Compare commits
	
		
			1 Commits
		
	
	
		
			aa6ae82607
			...
			projects/m
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 8e1d420ffb | 
							
								
								
									
										25
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						| @@ -1,31 +1,20 @@ | ||||
| ### | ||||
|  # @Author: zhp | ||||
|  # @Date: 2024-04-28 13:42:51 | ||||
|  # @LastEditTime: 2024-06-24 16:57:53 | ||||
|  # @LastEditors: DY | ||||
|  # @LastEditTime: 2024-05-29 17:06:55 | ||||
|  # @LastEditors: zhp | ||||
|  # @Description: | ||||
| ### | ||||
| # 开发环境配置 | ||||
| ENV = 'development' | ||||
|  | ||||
| # 页面标题 | ||||
| VUE_APP_TITLE = 发电玻璃智能管控平台 | ||||
| VUE_APP_TITLE = 芋道管理系统 | ||||
|  | ||||
| # 芋道管理系统/开发环境 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.70:30307' | ||||
| VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | ||||
| # 闫阳 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.81:48080' | ||||
| # 徐 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.56:48080' | ||||
| # 郭 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.61:48080' | ||||
| # sara | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.63:48080' | ||||
| # 张一丁 | ||||
| # VUE_APP_BASE_API = 'http://192.168.4.139:48080' | ||||
| # 蔡 | ||||
| # VUE_APP_BASE_API = 'http://192.168.1.54:48080' | ||||
| VUE_APP_BASE_API = 'http://192.168.1.61:48080' | ||||
| # VUE_APP_BASE_API = 'http://glass.kszny.picaiba.com' | ||||
|  | ||||
| # 路由懒加载 | ||||
| VUE_CLI_BABEL_TRANSPILE_MODULES = true | ||||
|  | ||||
| @@ -33,7 +22,7 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true | ||||
| VUE_APP_TENANT_ENABLE = true | ||||
|  | ||||
| # 验证码的开关 | ||||
| VUE_APP_CAPTCHA_ENABLE = false | ||||
| VUE_APP_CAPTCHA_ENABLE = true | ||||
|  | ||||
| # 文档的开关 | ||||
| VUE_APP_DOC_ENABLE = true | ||||
|   | ||||
| @@ -2,7 +2,7 @@ | ||||
| ENV = 'development' | ||||
|  | ||||
| # 页面标题 | ||||
| VUE_APP_TITLE = 发电玻璃智能管控平台 | ||||
| VUE_APP_TITLE = 芋道管理系统 | ||||
|  | ||||
| # 芋道管理系统/本地环境 | ||||
| VUE_APP_BASE_API = 'http://api-dashboard.yudao.iocoder.cn' | ||||
| @@ -14,7 +14,7 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true | ||||
| VUE_APP_TENANT_ENABLE = true | ||||
|  | ||||
| # 验证码的开关 | ||||
| VUE_APP_CAPTCHA_ENABLE = false | ||||
| VUE_APP_CAPTCHA_ENABLE = true | ||||
|  | ||||
| # 文档的开关 | ||||
| VUE_APP_DOC_ENABLE = true | ||||
|   | ||||
| @@ -2,7 +2,7 @@ | ||||
| NODE_ENV = 'production' | ||||
|  | ||||
| # 页面标题 | ||||
| VUE_APP_TITLE = 发电玻璃智能管控平台 | ||||
| VUE_APP_TITLE = 玻璃控股信息平台 | ||||
|  | ||||
| # 芋道管理系统/生产环境 | ||||
| VUE_APP_BASE_API = '' | ||||
| @@ -16,7 +16,7 @@ PUBLIC_PATH = '' | ||||
| VUE_APP_TENANT_ENABLE = true | ||||
|  | ||||
| # 验证码的开关 | ||||
| VUE_APP_CAPTCHA_ENABLE = false | ||||
| VUE_APP_CAPTCHA_ENABLE = true | ||||
|  | ||||
| # 文档的开关 | ||||
| VUE_APP_DOC_ENABLE = false | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| NODE_ENV = production | ||||
|  | ||||
| # 页面标题 | ||||
| VUE_APP_TITLE = 发电玻璃智能管控平台 | ||||
| VUE_APP_TITLE = 芋道管理系统 | ||||
|  | ||||
| # 测试环境配置 | ||||
| ENV = 'staging' | ||||
| @@ -16,7 +16,7 @@ PUBLIC_PATH = 'http://static.yudao.iocoder.cn/' | ||||
| VUE_APP_TENANT_ENABLE = true | ||||
|  | ||||
| # 验证码的开关 | ||||
| VUE_APP_CAPTCHA_ENABLE = false | ||||
| VUE_APP_CAPTCHA_ENABLE = true | ||||
|  | ||||
| # 文档的开关 | ||||
| VUE_APP_DOC_ENABLE = false | ||||
|   | ||||
| @@ -4,7 +4,7 @@ NODE_ENV = development | ||||
| ENV = 'staging' | ||||
|  | ||||
| # 页面标题 | ||||
| VUE_APP_TITLE = 发电玻璃智能管控平台 | ||||
| VUE_APP_TITLE = 芋道管理系统 | ||||
|  | ||||
| # 芋道管理系统/测试环境 | ||||
| VUE_APP_BASE_API = 'http://127.0.0.1:48080' | ||||
| @@ -18,7 +18,7 @@ VUE_APP_APP_NAME ='/admin-ui-vue2/' | ||||
| VUE_APP_TENANT_ENABLE = true | ||||
|  | ||||
| # 验证码的开关 | ||||
| VUE_APP_CAPTCHA_ENABLE = false | ||||
| VUE_APP_CAPTCHA_ENABLE = true | ||||
|  | ||||
| # 文档的开关 | ||||
| VUE_APP_DOC_ENABLE = true | ||||
|   | ||||
| @@ -51,14 +51,10 @@ | ||||
|     "crypto-js": "^4.0.0", | ||||
|     "echarts": "5.4.0", | ||||
|     "element-ui": "2.15.12", | ||||
|     "exceljs": "^4.4.0", | ||||
|     "file-saver": "^2.0.5", | ||||
|     "fuse.js": "6.6.2", | ||||
|     "highlight.js": "^11.9.0", | ||||
|     "html2canvas": "^1.4.1", | ||||
|     "js-beautify": "^1.15.1", | ||||
|     "jsencrypt": "3.3.1", | ||||
|     "jspdf": "^2.5.1", | ||||
|     "lodash": "^4.17.21", | ||||
|     "mockjs": "^1.1.0", | ||||
|     "moment": "^2.30.1", | ||||
| @@ -73,8 +69,7 @@ | ||||
|     "vue-quill-editor": "^3.0.6", | ||||
|     "vue-router": "3.4.9", | ||||
|     "vuedraggable": "2.24.3", | ||||
|     "vuex": "3.6.2", | ||||
|     "xlsx": "^0.18.5" | ||||
|     "vuex": "3.6.2" | ||||
|   }, | ||||
|   "devDependencies": { | ||||
|     "@vue/cli-plugin-babel": "4.5.18", | ||||
|   | ||||
| @@ -1,57 +1,38 @@ | ||||
| /* | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 08:54:59 | ||||
|  * @LastEditTime: 2024-06-19 15:22:10 | ||||
|  * @LastEditTime: 2024-05-22 16:31:08 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
|  */ | ||||
| import request from '@/utils/request' | ||||
|  | ||||
| // 查询生产数据管理分页 | ||||
| // 查询部门列表 | ||||
| export function getProduceDataPage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/proddata/page', | ||||
|     url: 'ip/prod-output/prodOutputDataPage', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 查询图数据 | ||||
| export function getproddata(data) { | ||||
| export function getProduceDataDetail(id){ | ||||
|   return request({ | ||||
|     url: '/ip/proddata/list', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function getProduceDataDetail(data){ | ||||
|   return request({ | ||||
|     url: '/ip/proddata/get', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|      url: '/ip/prod-output/get?id=' + id, | ||||
|     method: 'get' | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 导出生产数据 | ||||
| export function exportOutPutExcel(data) { | ||||
|   return request({ | ||||
|     url: '/ip/proddata/export-excel', | ||||
|     url: '/ip/prod-output/output-export-excel', | ||||
|     method: 'post', | ||||
|     data: data, | ||||
|     responseType: 'blob' | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 获取生产数据管理列表 | ||||
| export function prodOutputDataList(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/prodOutputDataList', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 获取生产管理生产目标管理碲化镉工厂分页 | ||||
| export function prodTargetDiPage(data) { | ||||
|   return request({ | ||||
| @@ -129,7 +110,7 @@ export function importToTarget(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-target/to-target-import-excel', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|     data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| @@ -138,7 +119,7 @@ export function importDiTarget(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-target/di-target-import-excel', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|     data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| @@ -157,12 +138,3 @@ export function cockpitDataMonitor(data) { | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function exportFactoryDataExcel(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output-month/export/excel', | ||||
|     method: 'post', | ||||
|     data: data, | ||||
|     responseType: 'blob' | ||||
|   }) | ||||
| } | ||||
|   | ||||
| @@ -1,60 +0,0 @@ | ||||
| /* | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 08:54:59 | ||||
|  * @LastEditTime: 2024-06-03 14:25:02 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
|  */ | ||||
| import request from '@/utils/request' | ||||
|  | ||||
| // 查询工单分页 | ||||
| export function getWorkOrderPage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-work-order/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 查询工单趋势数据 | ||||
| export function getDailyTrend(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-work-order/getDailyTrend', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 获得工单 | ||||
| export function getWorkOrderDetail(id){ | ||||
|   return request({ | ||||
|      url: '/ip/prod-work-order/get?id=' + id, | ||||
|     method: 'get' | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 获得工单设备加工数量 | ||||
| export function getEqNum(id){ | ||||
|   return request({ | ||||
|      url: '/ip/prod-work-order/getEqNum?workOrderId=' + id, | ||||
|     method: 'get' | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 导出工单数据 | ||||
| export function exportExcel(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-work-order/export-excel', | ||||
|     method: 'post', | ||||
|     data: data, | ||||
|     responseType: 'blob' | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 获得工单数据概览 | ||||
| export function getOverView(){ | ||||
|   return request({ | ||||
|      url: '/ip/prod-work-order/getOverView', | ||||
|     method: 'get' | ||||
|   }) | ||||
| } | ||||
| @@ -1,219 +0,0 @@ | ||||
| // 对标报表的接口 | ||||
| import request from '@/utils/request' | ||||
|  | ||||
| // 产量对标FTO | ||||
| export function fTOReportByDateRangePage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/queryOBFTOReportByDateRange', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 产量对标FTO导出 | ||||
| export function fTOReportByDateRangeExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/queryOBFTOReportByDateRangeExcel', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 芯片产量对标 | ||||
| export function cPReportByDateRangePage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/queryCPReportByDateRange', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 芯片产量对标导出 | ||||
| export function cPReportByDateRangeExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/queryCPReportByDateRangeExport', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 标准组件产量对标 | ||||
| export function sCPReportByDateRangePage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/querySCPReportByDateRange', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 标准组件产量对标导出 | ||||
| export function sCPReportByDateRangeExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/querySCPReportByDateRangeExport', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 转化效率对标 | ||||
| export function componentconvertrateCPage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/componentconvertrate-compare/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 转化效率对标导出 | ||||
| export function componentconvertrateCExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/componentconvertrate-compare/export-excel', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 芯片良率对标 | ||||
| export function chipyieldRatePage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/chipyield-rate/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 芯片良率对标导出 | ||||
| export function chipyieldRateExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/chipyield-rate/export-excel', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 标准组件良率对标 | ||||
| export function componentyieldRatePage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/componentyield-rate/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 标准组件良率对标导出 | ||||
| export function componentyieldRateExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/componentyield-rate/export-excel', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
|  | ||||
| // 稼动率对标 | ||||
| export function utilzationComparePage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/utilzation-compare/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 稼动率对标导出 | ||||
| export function utilzationCompareExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/utilzation-compare/export-excel', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 芯片OEE对标 | ||||
| export function chipoeeComparePage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/chipoee-compare/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 芯片OEE对标导出 | ||||
| export function chipoeeCompareExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/chipoee-compare/export-excel', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 封装OEE对标 | ||||
| export function componentOEEPage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/component-oee/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 封装OEE对标导出 | ||||
| export function componentOEEExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/component-oee/export', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 芯片人均产量 | ||||
| export function chipAnnualAverageProductionPage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/chip-annual-average-production/page', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 芯片人均产量导出 | ||||
| export function chipAnnualAverageProductionExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/chip-annual-average-production/export', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 标准组件人均产量对标 | ||||
| export function componentAapPage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/componentAap', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 标准组件人均产量对标导出 | ||||
| export function componentAapExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/componentAap-export', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| // 指标完成情况对标 | ||||
| export function targetCompletionPage(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/TargetCompletion', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| // 指标完成情况对标导出 | ||||
| export function targetCompletionExport(data) { | ||||
|   return request({ | ||||
|     url: '/ip/prod-output/TargetCompletion-export', | ||||
|     method: 'post', | ||||
|     responseType: 'blob', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
| @@ -1,95 +0,0 @@ | ||||
| /* | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-17 09:41:03 | ||||
|  * @LastEditTime: 2024-06-20 15:39:21 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
|  */ | ||||
| import request from '@/utils/request' | ||||
| export function getComprehensiveDataPage(data) { | ||||
|   return request({ | ||||
|     url: 'ip/comprehensive/data/get/comprehensive/data', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function exportComprehensiveDataPage(data) { | ||||
|    return request({ | ||||
|     url: 'ip/comprehensive/data/export/comprehensive/data', | ||||
|     method: 'post', | ||||
|     data: data, | ||||
|     responseType: 'blob', | ||||
|   }) | ||||
| } | ||||
|  | ||||
|  | ||||
| export function getProduceTransData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/prod-output/queryYCEReportByDateRange', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function exportProduceTransData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/prod-output/queryYCEReportByDateRangeExcel', | ||||
|     method: 'post', | ||||
|     data: data, | ||||
|     responseType: 'blob', | ||||
|   }) | ||||
| } | ||||
|  | ||||
|  | ||||
| export function getProduceSituationData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/production/situation/get/production/situation', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function exportProduceSituationData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/production/situation/export/production/situation', | ||||
|     method: 'post', | ||||
|      data: data, | ||||
|       responseType: 'blob', | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function getProductionSituationMWData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/production/situation/power/get/production/situation', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function exportProductionSituationMWData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/production/situation/power/export/production/situation', | ||||
|     method: 'post', | ||||
|      data: data, | ||||
|       responseType: 'blob', | ||||
|   }) | ||||
| } | ||||
|  | ||||
|  | ||||
| export function getProductionYieldSituationMWData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/product/yield/get/production/situation', | ||||
|     method: 'post', | ||||
|     data: data | ||||
|   }) | ||||
| } | ||||
|  | ||||
| export function exportProductionYieldSituationMWData(data) { | ||||
|    return request({ | ||||
|     url: 'ip/product/yield/export/production/situation', | ||||
|     method: 'post', | ||||
|     data: data, | ||||
|     responseType: 'blob', | ||||
|   }) | ||||
| } | ||||
| Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 7.6 MiB | 
| @@ -1,17 +0,0 @@ | ||||
| <?xml version="1.0" encoding="UTF-8"?> | ||||
| <svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||
|     <title>编组 15</title> | ||||
|     <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||
|         <g id="工单管理" transform="translate(-714.000000, -131.000000)"> | ||||
|             <g id="编组-15" transform="translate(714.000000, 131.000000)"> | ||||
|                 <g id="编组-13备份" fill="#0B58FF" opacity="0.227236793"> | ||||
|                     <rect id="矩形备份-2" x="0" y="0" width="26" height="26" rx="6"></rect> | ||||
|                 </g> | ||||
|                 <g id="公司" transform="translate(4.749735, 4.749735)" fill-rule="nonzero"> | ||||
|                     <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16.50053" height="16.50053"></rect> | ||||
|                     <path d="M11.933204,3.46511501 L11.933204,1 C11.933204,0.44771525 11.4854888,-1.01453063e-16 10.933204,0 L7.7088886,0 L7.7088886,0 C3.83109495,0 0.687522083,3.16186639 0.687522083,7.06222625 L0.687522083,15.50053 C0.687522083,16.0528147 1.13523733,16.50053 1.68752208,16.50053 L14.8130079,16.50053 C15.3652927,16.50053 15.8130079,16.0528147 15.8130079,15.50053 L15.8130079,6.45996015 L15.8130079,6.45996015 L11.933204,3.46511501 Z M10.8812851,15.4709239 L1.80917527,15.4709239 L1.80917527,6.9505448 C1.81175925,3.6815283 4.55432163,1.03209261 7.93823277,1.02960612 L10.8812851,1.02960612 L10.8812851,15.4709239 Z M14.8298514,15.4709239 L11.9257773,15.4709239 L11.9257773,5.179727 L14.850314,7.12879718 L14.8298514,15.4709239 Z M3.75976827,9.04329837 L8.75976827,9.04329837 L8.75976827,10.3766317 L3.75976827,10.3766317 L3.75976827,9.04329837 Z M3.75976827,6.3766317 L8.75976827,6.3766317 L8.75976827,7.70996504 L3.75976827,7.70996504 L3.75976827,6.3766317 Z" id="形状" fill="#0B58FF"></path> | ||||
|                 </g> | ||||
|             </g> | ||||
|         </g> | ||||
|     </g> | ||||
| </svg> | ||||
| Before Width: | Height: | Size: 1.9 KiB | 
| @@ -1,15 +0,0 @@ | ||||
| <?xml version="1.0" encoding="UTF-8"?> | ||||
| <svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||
|     <title>编组 13</title> | ||||
|     <g id="03设备管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||
|         <g id="工单管理" transform="translate(-474.000000, -131.000000)"> | ||||
|             <g id="编组-13" transform="translate(474.000000, 131.000000)"> | ||||
|                 <rect id="矩形备份-2" fill="#66DD89" opacity="0.227236793" x="0" y="0" width="26" height="26" rx="6"></rect> | ||||
|                 <g id="机床、加工中心" transform="translate(3.000000, 3.000000)" fill-rule="nonzero"> | ||||
|                     <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="20" height="20"></rect> | ||||
|                     <path d="M18.1818304,15.1909171 L18.1818304,2.5 C18.1818304,2.22385763 17.9579728,2 17.6818304,2 L2.7272736,2 C2.45113122,2 2.2272736,2.22385763 2.2272736,2.5 L2.2272736,10.195451 C2.2272736,10.3084167 2.31885035,10.3999934 2.431816,10.3999934 C2.54478165,10.3999934 2.63635841,10.4915702 2.63635841,10.6045358 L2.63635841,10.999993 C2.63635841,11.3313636 2.90498735,11.5999925 3.23635794,11.5999925 L3.24999521,11.5999925 C3.58889745,11.5999925 3.86363201,11.8747271 3.86363201,12.2136293 L3.86363201,12.7909094 C3.86363201,13.016846 4.04678981,13.2000037 4.2727264,13.2000037 C4.498663,13.2000037 4.6818208,13.016846 4.6818208,12.7909094 L4.6818208,12.2136293 C4.6818208,11.8747271 4.95655535,11.5999925 5.2954576,11.5999925 L5.30909486,11.5999925 C5.64046546,11.5999925 5.9090944,11.3313636 5.9090944,10.999993 L5.9090944,10.6045358 C5.9090944,10.4915702 6.00067115,10.3999934 6.1136368,10.3999934 C6.22660245,10.3999934 6.3181792,10.3084167 6.3181792,10.195451 L6.3181792,6.5 C6.3181792,6.22385763 6.54203683,6 6.8181792,6 L12.772736,6 C13.0488784,6 13.272736,6.22385763 13.272736,6.5 L13.272736,15.1000019 C13.272736,15.3761442 13.0488784,15.6000019 12.772736,15.6000019 L11.7272736,15.6000019 C11.4511312,15.6000019 11.2272736,15.3761442 11.2272736,15.1000019 L11.2272736,14.8000009 C11.2272736,14.3581726 10.869101,14 10.4272727,14 L8.75453855,14 C8.31271023,14 7.95453761,14.3581726 7.95453761,14.8000009 L7.95453761,15.1000019 C7.95453761,15.3761442 7.73067998,15.6000019 7.45453761,15.6000019 L6.4090944,15.6000019 C6.13295202,15.6000019 5.9090944,15.3761442 5.9090944,15.1000019 L5.9090944,14.8000009 C5.9090944,14.3581726 5.55092178,14 5.10909346,14 L3.43635934,14 C2.99453103,14 2.63635841,14.3581726 2.63635841,14.8000009 L2.63635841,15.1000019 C2.63635841,15.3761442 2.41250078,15.6000019 2.13635841,15.6000019 L1.8181792,15.6000019 C1.36631131,15.6000019 1,15.9663132 1,16.4181811 L1,17.5 C1,17.7761424 1.22385763,18 1.5,18 L18.5,18 C18.7761424,18 19,17.7761424 19,17.5 L19,16.0090867 C19,15.7831554 18.8168465,15.6000019 18.5909152,15.6000019 C18.3649839,15.6000019 18.1818304,15.4168484 18.1818304,15.1909171 Z M5.0909056,10.8000056 L3.4545472,10.8000056 L3.4545472,10.3999934 L5.0909056,10.3999934 L5.0909056,10.8000056 Z M5.49999041,6.20000375 L5.49999041,9.60000656 L5.49999041,9.60000656 L3.04544321,9.60000656 L3.04544321,2.80000562 L17.3636416,2.80000562 L17.3636416,15.6000019 L14.0909056,15.6000019 L14.0909056,6.20000375 C14.0909056,5.647719 13.6431904,5.20000375 13.0909056,5.20000375 L6.49999041,5.20000375 C5.94770566,5.20000375 5.49999041,5.647719 5.49999041,6.20000375 Z M8.7727264,14.7999963 L10.4090848,14.7999963 L10.4090848,15.6000019 L8.7727264,15.6000019 L8.7727264,14.7999963 Z M3.4545472,14.7999963 L5.0909056,14.7999963 L5.0909056,15.6000019 L3.4545472,15.6000019 L3.4545472,14.7999963 Z M18.1818304,17.1999944 L1.81816962,17.1999944 L1.81816962,16.3999888 L18.1818304,16.3999888 L18.1818304,17.1999944 Z M12.0454528,4.00000469 C12.0440427,4.28673847 12.1996755,4.55228735 12.4534043,4.69605646 C12.707133,4.83982557 13.0201502,4.83982557 13.2738789,4.69605646 C13.5276077,4.55228735 13.6832405,4.28673847 13.6818304,4.00000469 C13.6832405,3.71327091 13.5276077,3.44772202 13.2738789,3.30395291 C13.0201502,3.1601838 12.707133,3.1601838 12.4534043,3.30395291 C12.1996755,3.44772202 12.0440427,3.71327091 12.0454528,4.00000469 L12.0454528,4.00000469 Z M5.49999041,3.60001125 L11.2272736,3.60001125 L11.2272736,4.39999813 L5.49999041,4.39999813 L5.49999041,3.60001125 Z M15.3181792,11.5999925 L16.136368,11.5999925 L16.136368,14.7999963 L15.3181792,14.7999963 L15.3181792,11.5999925 Z M15.3181792,9.19999438 L16.136368,9.19999438 L16.136368,10.8000056 L15.3181792,10.8000056 L15.3181792,9.19999438 Z M15.3181792,6.79999625 L16.136368,6.79999625 L16.136368,8.4000075 L15.3181792,8.4000075 L15.3181792,6.79999625 Z" id="形状" fill="#43B866"></path> | ||||
|                 </g> | ||||
|             </g> | ||||
|         </g> | ||||
|     </g> | ||||
| </svg> | ||||
| Before Width: | Height: | Size: 4.7 KiB | 
| Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 6.5 MiB | 
| Before Width: | Height: | Size: 8.5 MiB | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/logo/logo.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| After Width: | Height: | Size: 2.7 KiB | 
| @@ -232,8 +232,6 @@ aside { | ||||
|   background-color: #d9d9d9; | ||||
| } | ||||
|  | ||||
| // 大屏滚动表格 | ||||
|  | ||||
| .no-data-bg { | ||||
|   position: absolute; | ||||
|   display: inline-block; | ||||
| @@ -254,13 +252,3 @@ aside { | ||||
|     letter-spacing: 1px; | ||||
|   } | ||||
| } | ||||
|  | ||||
| .dv-scroll-board .rows .ceil, | ||||
| .dv-scroll-board .header .header-item { | ||||
|   border-right: 1px solid rgba(13, 23, 40, 1); | ||||
| } | ||||
|  | ||||
| .dv-scroll-board .rows .ceil:last-child, | ||||
| .dv-scroll-board .header .header-item:last-child { | ||||
|   border-right: none; | ||||
| } | ||||
|   | ||||
| @@ -49,7 +49,7 @@ | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import logoImg from "@/assets/logo/cnbm.png"; | ||||
| import logoImg from "@/assets/logo/logo.png"; | ||||
| import variables from "@/assets/styles/variables.scss"; | ||||
|  | ||||
| export default { | ||||
| @@ -70,7 +70,7 @@ export default { | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       title: "发电玻璃智能管控平台", | ||||
|       title: "玻璃控股信息平台", | ||||
|       logo: logoImg, | ||||
|     }; | ||||
|   }, | ||||
| @@ -104,7 +104,7 @@ export default { | ||||
|       width: 32px; | ||||
|       height: 32px; | ||||
|       vertical-align: middle; | ||||
|       margin-right: 10px; | ||||
|       margin-right: 12px; | ||||
|     } | ||||
|  | ||||
|     & .sidebar-title { | ||||
| @@ -113,7 +113,7 @@ export default { | ||||
|       color: #fff; | ||||
|       font-weight: 600; | ||||
|       line-height: 50px; | ||||
|       font-size: 19px; | ||||
|       font-size: 14px; | ||||
|       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; | ||||
|       vertical-align: middle; | ||||
|     } | ||||
|   | ||||
| @@ -8,14 +8,10 @@ function __resizeHandler(entries) { | ||||
|           ? entry.contentBoxSize[0] | ||||
|           : entry.contentBoxSize; | ||||
|         this.chart_mixin_chartInstance.resize({ | ||||
|           // width: | ||||
|           //   contentBoxSize.inlineSize < this.MIN_WIDTH | ||||
|           //     ? this.MIN_WIDTH | ||||
|           //     : contentBoxSize.inlineSize, | ||||
|         // width: | ||||
|         //   entry.contentRect.width < this.MIN_WIDTH | ||||
|         //     ? this.MIN_WIDTH | ||||
|         //     : entry.contentRect.width, | ||||
|           width: | ||||
|             contentBoxSize.inlineSize < this.MIN_WIDTH | ||||
|               ? this.MIN_WIDTH | ||||
|               : contentBoxSize.inlineSize, | ||||
|           height: contentBoxSize.blockSize, | ||||
|         }); | ||||
|     } else { | ||||
|   | ||||
| @@ -127,8 +127,7 @@ Router.prototype.push = function push(location) { | ||||
|  | ||||
| export default new Router({ | ||||
|   base: process.env.VUE_APP_APP_NAME ? process.env.VUE_APP_APP_NAME : "/", | ||||
|   // mode: "history", // 去掉url中的# | ||||
|   mode: "hash", | ||||
|   mode: "history", // 去掉url中的# | ||||
|   scrollBehavior: () => ({ y: 0 }), | ||||
|   routes: constantRoutes, | ||||
| }); | ||||
|   | ||||
| @@ -92,12 +92,10 @@ const actions = { | ||||
|   /** 初始化首页数据 */ | ||||
|   async initHome({ commit }) { | ||||
|     const dataArr = await getHomeInfo(); | ||||
|     // console.log('dataArr', dataArr); | ||||
|       let preData = dataArr.previousProdOutputOutDO | ||||
|       let preFtoData = dataArr.previousProdOutputFtoDO | ||||
|     console.log('dataArr',dataArr); | ||||
|     // const targetArr = await getHomeInfo(); | ||||
|     // factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData | ||||
|     const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetOutputDO,dataArr.prodOutputFtoDO,preData,preFtoData); | ||||
|     const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO | ||||
| ); | ||||
|     commit("SET_HOME_INFO", payload); | ||||
|   }, | ||||
|   /** 初始化驾驶舱数据 */ | ||||
| @@ -127,7 +125,6 @@ const actions = { | ||||
|     //   const payload = handler(factoryData) | ||||
|     //   commit("SET_COPILOT_INFO", { type, payload }); | ||||
|     // } else { | ||||
|       // console.log('factoryList',factoryList) | ||||
|       let factoryData = factoryList.prodOutputOutDO ? factoryList.prodOutputOutDO : factoryList.prodOutputRateDO | ||||
|       let preData = factoryList.previousProdOutputOutDO ? factoryList.previousProdOutputOutDO : factoryList.previousProdOutputRateDO | ||||
|       let preFtoData = factoryList.previousProdOutputFtoDO ? factoryList.previousProdOutputFtoDO : [] | ||||
| @@ -289,7 +286,7 @@ function splitCurrentAndPreviousB(factoryListResponse) { | ||||
| } | ||||
|  | ||||
| function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) { | ||||
|   // console.log('工厂',preData); | ||||
|   console.log('工厂',targetListResponse); | ||||
|  | ||||
|   // 初始数据 | ||||
|   const { chipOeeRate, transformRate, chipRate, stdRate } = initA(); | ||||
| @@ -343,24 +340,17 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO | ||||
|   //     componentYieldRate: 0.73, | ||||
|   //   }, | ||||
|   // ]; | ||||
|   if (preData) { | ||||
|   if (preData && preData[0] != null) { | ||||
|     for (const factory of preData) { | ||||
|       const fId = getPreFactoryId(factory) | ||||
|       // console.log('factory',factory.previousYearOee); | ||||
|         //  chipInvest.previous[fId] = factory.previousYearInputNumber; | ||||
|       const fId = getPreFactoryId(factory); | ||||
|          chipInvest.previous[fId] = factory.previousYearInputNumber; | ||||
|       // chipOeeRate.current[fId] = factory.oee; | ||||
|       if (factory.previousGlassType === 0) { | ||||
|          chipOeeRate.previous[fId] = factory.previousYearOee; | ||||
|       } | ||||
|       // chipOeeRate.previous[fId] = factory.previousYearOee; | ||||
|       chipOeeRate.previous[fId] = factory.previousYearOee; | ||||
|       // 转化效率 | ||||
|         if (factory.previousGlassType === 1) { | ||||
|         transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency; | ||||
|       } | ||||
|       // transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ; | ||||
|       transformRate.previous[fId] =factory.previousYearComponentConversionEfficiency ; | ||||
|       // 芯片良率 与 标准组件良率 | ||||
|       if (![0, 1].includes(factory.previousGlassType)) continue; | ||||
|       const _t = [chipRate, stdRate][factory.previousGlassType] | ||||
|       if (![0, 1].includes(factory.glassType)) continue; | ||||
|       const _t = [chipRate, stdRate][factory.glassType] | ||||
|       // _t.current[fId] = factory.yieldRate ; | ||||
|       _t.previous[fId] = factory.previousYearYieldRate ; | ||||
|       // } | ||||
| @@ -385,14 +375,10 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO | ||||
|         transformRate.target[fId] = componentConversionEfficiency | ||||
|       } | ||||
|       // 芯片OEE | ||||
|       if (factory.glassType === 0) { | ||||
|          chipOeeRate.current[fId] = factory.oee; | ||||
|       } | ||||
|       chipOeeRate.current[fId] = factory.oee; | ||||
|       // chipOeeRate.previous[fId] = factory.previousYearOee; | ||||
|       // 转化效率 | ||||
|       if (factory.glassType === 1) { | ||||
|         transformRate.current[fId] = factory.componentConversionEfficiency; | ||||
|       } | ||||
|       transformRate.current[fId] = factory.componentConversionEfficiency; | ||||
|       // transformRate.previous[fId] = factory.previousYearComponentConversionEfficiency ; | ||||
|       // 芯片良率 与 标准组件良率 | ||||
|       if (![0, 1].includes(factory.glassType)) continue; | ||||
| @@ -400,7 +386,6 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO | ||||
|       _t.current[fId] = factory.yieldRate ; | ||||
|       // _t.previous[fId] = factory.previousYearYieldRate ; | ||||
|     } | ||||
|     // console.log('chipOeeRate',stdRate); | ||||
|     // console.log('chipOeeRate',chipOeeRate); | ||||
|     return { | ||||
|       chipOeeRate, | ||||
| @@ -412,12 +397,12 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO | ||||
| } | ||||
|  | ||||
| function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOutputFtoListRes,preData,preFtoData) { | ||||
|   // console.log('prodOutputFtoListRes',preFtoData); | ||||
|   console.log('prodOutputFtoListRes',preData); | ||||
|   // 初始数据 | ||||
|   const { chipInvest, ftoInvest, chipOutput, stdOutput, bipvOutput } = init() | ||||
|    if (prodOutputFtoListRes.length !== 0 ) { | ||||
|    if (prodOutputFtoListRes) { | ||||
|     for (const factory of prodOutputFtoListRes) { | ||||
|       // console.log(factory); | ||||
|       console.log(factory); | ||||
|       const fId = getFactoryId(factory); | ||||
|       // const preFId = getPreFactoryId(factory); | ||||
|       // if (fId) { | ||||
| @@ -430,7 +415,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu | ||||
|    } | ||||
|    if (preFtoData) { | ||||
|     for (const factory of preFtoData) { | ||||
|       // console.log(factory); | ||||
|       console.log(factory); | ||||
|       const fId = getPreFactoryId(factory); | ||||
|       // const preFId = getPreFactoryId(factory); | ||||
|       // if (fId) { | ||||
| @@ -441,13 +426,10 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu | ||||
|       // } | ||||
|     } | ||||
|    } | ||||
|     if (preData) { | ||||
|     if (preData && preData[0] != null) { | ||||
|     for (const factory of preData) { | ||||
|       const fId = getPreFactoryId(factory); | ||||
|       if (factory.previousGlassType === 0) { | ||||
|       chipInvest.previous[fId] = factory.previousYearInputNumber | ||||
|       } | ||||
|         //  chipInvest.previous[fId] = factory.previousYearInputNumber; | ||||
|          chipInvest.previous[fId] = factory.previousYearInputNumber; | ||||
|       if (![0, 1, 2].includes(factory.previousGlassType)) continue; | ||||
|       const _t = [chipOutput, stdOutput, bipvOutput][factory.previousGlassType]; | ||||
|       // if (fId) { | ||||
| @@ -460,14 +442,11 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu | ||||
|     } | ||||
|   } | ||||
|     // console.log('ftoInvest',ftoInvest) | ||||
|   if (factoryListResponse) { | ||||
|   if (factoryListResponse && factoryListResponse[0] != null) { | ||||
|     for (const factory of factoryListResponse) { | ||||
|       const fId = getFactoryId(factory); | ||||
|       // console.log('factory.inputNumber', factory, fId); | ||||
|       if (factory.glassType === 0) { | ||||
|       chipInvest.current[fId] = factory.inputNumber | ||||
|       } | ||||
|       // const preFId = getPreFactoryId(factory); | ||||
|  | ||||
|       // 获取目标值 | ||||
|       if (targetListResponse) { | ||||
|         const { chipYield, componentYield, bipvProductOutput } = | ||||
| @@ -477,6 +456,7 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu | ||||
|         bipvOutput.target[fId] = bipvProductOutput; | ||||
|       } | ||||
|       // 芯片投入 | ||||
|           chipInvest.current[fId] = factory.inputNumber; | ||||
|  | ||||
|       // 产出数据, 0 - (玻璃)芯片产出, 1 - 标准组件产出, 2 - BIPV产出 | ||||
|       // 因为后端写的垃圾数据,所以这里要做一下判断 | ||||
| @@ -484,7 +464,6 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu | ||||
|       const _t = [chipOutput, stdOutput, bipvOutput][factory.glassType]; | ||||
|         _t.current[fId] = factory.outputNumber; | ||||
|     } | ||||
|     // console.log('chipInvest',ftoInvest); | ||||
|     return { | ||||
|       chipInvest, | ||||
|       // ftoInvest, | ||||
| @@ -493,6 +472,15 @@ function splitCurrentAndPrevious(factoryListResponse, targetListResponse, prodOu | ||||
|       stdOutput, | ||||
|       bipvOutput, | ||||
|     }; | ||||
|   }else{ | ||||
|       return { | ||||
|       chipInvest, | ||||
|       // ftoInvest, | ||||
|       ftoInvest, | ||||
|       chipOutput, | ||||
|       stdOutput, | ||||
|       bipvOutput, | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
|   | ||||
| @@ -74,9 +74,9 @@ export const SystemDataScopeEnum = { | ||||
| /** | ||||
|  * 工厂名称 | ||||
|  */ | ||||
| // export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'] | ||||
| export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'] | ||||
|  | ||||
| export const factoryArray1 =[ | ||||
| export const dhgfactoryList =[ | ||||
|   { | ||||
|     name: '瑞昌中建材光电材料有限公司', | ||||
|     id: 0 | ||||
| @@ -97,43 +97,12 @@ export const factoryArray1 =[ | ||||
|     name: '成都中建材光电材料有限公司', | ||||
|     id: 4 | ||||
|   }, | ||||
|   { | ||||
|     name: '凯盛光伏材料有限公司', | ||||
|     id: 5 | ||||
|   }, | ||||
|   { | ||||
|     name: '蚌埠兴科玻璃有限公司', | ||||
|     id: 6 | ||||
|   } | ||||
| ] | ||||
|  | ||||
| // export const dhgfactoryList =[ | ||||
| //   { | ||||
| //     name: '瑞昌中建材光电材料有限公司', | ||||
| //     id: 0 | ||||
| //   }, | ||||
| //   { | ||||
| //     name: '邯郸中建材光电材料有限公司', | ||||
| //     id: 1 | ||||
| //   }, | ||||
| //   { | ||||
| //     name: '中建材株洲光电材料有限公司', | ||||
| //     id: 2 | ||||
| //   }, | ||||
| //   { | ||||
| //     name: '佳木斯中建材光电材料有限公司', | ||||
| //     id: 3 | ||||
| //   }, | ||||
| //   { | ||||
| //     name: '成都中建材光电材料有限公司', | ||||
| //     id: 4 | ||||
| //   }, | ||||
| //   { | ||||
| //     name: '蚌埠兴科玻璃有限公司', | ||||
| //     id: 6 | ||||
| //   } | ||||
| // ] | ||||
|  | ||||
| export const tyjxfactoryList =[ | ||||
|   { | ||||
|     name: '凯盛光伏材料有限公司', | ||||
| @@ -141,32 +110,6 @@ export const tyjxfactoryList =[ | ||||
|   } | ||||
| ] | ||||
|  | ||||
| // 暂时只有瑞昌邯郸数据 | ||||
| export const factoryList =['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司'] | ||||
|  | ||||
| export const factoryListabbr =['瑞昌', '邯郸'] | ||||
| export const factoryArray =[ | ||||
|   { | ||||
|     name: '瑞昌中建材光电材料有限公司', | ||||
|     id: 0 | ||||
|   }, | ||||
|   { | ||||
|     name: '邯郸中建材光电材料有限公司', | ||||
|     id: 1 | ||||
|   } | ||||
| ] | ||||
|  | ||||
| export const dhgfactoryList =[ | ||||
|   { | ||||
|     name: '瑞昌中建材光电材料有限公司', | ||||
|     id: 0 | ||||
|   }, | ||||
|   { | ||||
|     name: '邯郸中建材光电材料有限公司', | ||||
|     id: 1 | ||||
|   } | ||||
| ] | ||||
|  | ||||
| /** | ||||
|  * 代码生成模板类型 | ||||
|  */ | ||||
|   | ||||
| @@ -83,7 +83,6 @@ export default { | ||||
|           nameTextStyle: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|   | ||||
| @@ -8,7 +8,9 @@ | ||||
| <template> | ||||
|   <div class="copilot-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button v-if="0" style=" | ||||
|     <button | ||||
|       v-if="0" | ||||
|       style=" | ||||
|         appearance: none; | ||||
|         outline: none; | ||||
|         border: none; | ||||
| @@ -18,11 +20,22 @@ | ||||
|         position: absolute; | ||||
|         top: 8px; | ||||
|         right: 8px; | ||||
|       " @click="$emit('refresh')"> | ||||
|       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | ||||
|         style="width: 24px; height: 24px"> | ||||
|         <path stroke-linecap="round" stroke-linejoin="round" | ||||
|           d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /> | ||||
|       " | ||||
|       @click="$emit('refresh')" | ||||
|     > | ||||
|       <svg | ||||
|         xmlns="http://www.w3.org/2000/svg" | ||||
|         fill="none" | ||||
|         viewBox="0 0 24 24" | ||||
|         stroke-width="1.5" | ||||
|         stroke="currentColor" | ||||
|         style="width: 24px; height: 24px" | ||||
|       > | ||||
|         <path | ||||
|           stroke-linecap="round" | ||||
|           stroke-linejoin="round" | ||||
|           d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" | ||||
|         /> | ||||
|       </svg> | ||||
|     </button> | ||||
|     <!-- decoration  --> | ||||
| @@ -31,13 +44,19 @@ | ||||
|     <div v-if="side == 'left'" class="corner bl"></div> | ||||
|     <div v-if="side == 'right'" class="corner br"></div> | ||||
|     <!-- content  --> | ||||
|     <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"> | ||||
|       <Icon style="margin-left: 16px;" :icon="icon"></Icon> | ||||
|     <div | ||||
|       class="container-head" | ||||
|       :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" | ||||
|     > | ||||
|       <Icon :icon="icon"></Icon> | ||||
|       <h2 class="container-title">{{ title }}</h2> | ||||
|     </div> | ||||
|     <div class="container-body" :class="[ | ||||
|     <div | ||||
|       class="container-body" | ||||
|       :class="[ | ||||
|         side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | ||||
|       ]"> | ||||
|       ]" | ||||
|     > | ||||
|       <slot /> | ||||
|     </div> | ||||
|   </div> | ||||
|   | ||||
| @@ -19,7 +19,7 @@ | ||||
|       <CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period" | ||||
|         @click="() => $emit('update:period', i)" /> | ||||
|       <div class="btn-group"> | ||||
|         <!-- <button type="button" class="export-btn" @click="handleExport" /> --> | ||||
|         <button type="button" class="export-btn" /> | ||||
|         <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']" | ||||
|           @click="toggleFullScreen" /> | ||||
|         <!-- <button class="times-btn"> {{ times }} </button> --> | ||||
| @@ -31,7 +31,6 @@ | ||||
| <script> | ||||
| import CopilotButton from "./button.vue"; | ||||
| import screenfull from "screenfull"; | ||||
| import { exportFactoryDataExcel } from "@/api/produceData"; | ||||
|  | ||||
| export default { | ||||
|   name: "CopilotHeader", | ||||
| @@ -59,15 +58,6 @@ export default { | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: { | ||||
|     handleExport() { | ||||
|       exportFactoryDataExcel({ | ||||
|         // factoryId: this.companyId, | ||||
|         timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3, | ||||
|       }).then(response => { | ||||
|         this.$download.excel(response, `生产数据.xls`); | ||||
|         // this.exportLoading = false; | ||||
|       }).catch(() => { }); | ||||
|     }, | ||||
|     getTimes() { | ||||
|       setInterval(this.getTimesInterval, 60000); | ||||
|     }, | ||||
|   | ||||
| @@ -4,22 +4,18 @@ | ||||
|       <!-- <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active" | ||||
|         @click="() => $emit('update:active', i)" /> | ||||
|       <div class="type-name"></div> --> | ||||
|       <CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period" | ||||
|         @click="() => $emit('update:period', i.id)" /> | ||||
|       <!-- <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than" | ||||
|         @click="() => $emit('update:than', i)" /> --> | ||||
|       <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than" | ||||
|         @click="() => $emit('update:than', i)" /> | ||||
|       <div class="btn-group"> | ||||
|         <button type="button" class="export-btn" /> | ||||
|         <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']" | ||||
|           @click="toggleFullScreen" /> | ||||
|       </div> | ||||
|     </section> | ||||
|     <div class="page-title">{{ companyName }}</div> | ||||
|     <section class="menu2"> | ||||
|       <div class="btn-group"> | ||||
|         <el-tooltip v-if="showPeriod" class="item" effect="dark" content="导出" placement="top"> | ||||
|           <button type="button" class="export-btn" @click="handleExport" /> | ||||
|         </el-tooltip> | ||||
|         <el-tooltip class="item" effect="dark" :content="isFullscreen  === false ? '退出全屏' : '全屏'" placement="top"> | ||||
|           <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']" | ||||
|             @click="toggleFullScreen" /> | ||||
|         </el-tooltip> | ||||
|       </div> | ||||
|       <CopilotButton v-for="i in dataList" :key="i.id" :label="i.name" :active="i.id === period" | ||||
|         @click="() => $emit('update:period', i.id)" /> | ||||
|     </section> | ||||
|   </div> | ||||
| </template> | ||||
| @@ -29,8 +25,6 @@ | ||||
| import FactorySelect from "./FactorySelect.vue"; | ||||
| import screenfull from "screenfull"; | ||||
| import CopilotButton from "./button.vue"; | ||||
| import { exportFactoryDataExcel } from "@/api/produceData"; | ||||
|  | ||||
| export default { | ||||
|   name: "FactoryDataHeader", | ||||
|   components: { CopilotButton, FactorySelect }, | ||||
| @@ -48,20 +42,9 @@ export default { | ||||
|       type: String, | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     period(val) { | ||||
|       if (val != 1) { | ||||
|         this.showPeriod = true | ||||
|       } else { | ||||
|         this.showPeriod = false | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       isFullscreen: false, | ||||
|       content: '全屏', | ||||
|       showPeriod:false, | ||||
|       dataList: [ | ||||
|         { id: 1, name: "日" }, | ||||
|         { id: 2, name: "周" }, | ||||
| @@ -72,22 +55,6 @@ export default { | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: { | ||||
|     handleExport() { | ||||
|       // if (this.period != 1) { | ||||
|         this.showPeriod = true | ||||
|         exportFactoryDataExcel({ | ||||
|           factoryId: this.companyId, | ||||
|           timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3, | ||||
|           compare: this.than === '同比' ? 1 : 2 | ||||
|         }).then(response => { | ||||
|           this.$download.excel(response, `${this.companyName}生产数据.xls`); | ||||
|           // this.exportLoading = false; | ||||
|         }).catch(() => { }); | ||||
|       // } else { | ||||
|       //   this.showPeriod = false | ||||
|       // } | ||||
|  | ||||
|     }, | ||||
|     toggleFullScreen() { | ||||
|       this.isFullscreen = !this.isFullscreen; | ||||
|  | ||||
| @@ -123,16 +90,14 @@ export default { | ||||
|   gap: 8px; | ||||
| } | ||||
| .factory-header > .menu2 { | ||||
|   width: 20vw; | ||||
|   width: 26vw; | ||||
|   display: flex; | ||||
|   justify-content: flex-end; | ||||
|   align-items: center; | ||||
|   gap: 8px; | ||||
| } | ||||
|  | ||||
| .export-btn, | ||||
| .fullscreen-btn { | ||||
|   /* float: right; */ | ||||
|   width: 32px; | ||||
|   height: 32px; | ||||
|   margin-left: 24px; | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-05-31 13:26:32 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!--  | ||||
|     filename: button.vue | ||||
|     author: liubin | ||||
| @@ -57,7 +50,7 @@ button { | ||||
|   padding: 12px; | ||||
|   padding-left: 20px; | ||||
|   color: #fff; | ||||
|   font-size: 18px; | ||||
|   font-size: 22px; | ||||
|   letter-spacing: 10px; | ||||
|   cursor: pointer; | ||||
| } | ||||
|   | ||||
| @@ -1,10 +1,16 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-23 15:49:14 | ||||
|  * @LastEditTime: 2024-06-04 08:54:10 | ||||
|  * @LastEditTime: 2024-05-29 10:56:21 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|     filename: BarChartBase.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <chart-container class="bar-chart-base"> | ||||
| @@ -84,7 +90,6 @@ export default { | ||||
|           nameTextStyle: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|   | ||||
| @@ -1,215 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:43:51 | ||||
|  * @LastEditTime: 2024-06-05 09:43:52 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div class="copilot-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button v-if="false" style=" | ||||
|         appearance: none; | ||||
|         outline: none; | ||||
|         border: none; | ||||
|         background: none; | ||||
|         color: #fff; | ||||
|         cursor: pointer; | ||||
|         position: absolute; | ||||
|         top: 8px; | ||||
|         right: 8px; | ||||
|       " @click="$emit('refresh')"> | ||||
|       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | ||||
|         style="width: 24px; height: 24px"> | ||||
|         <path stroke-linecap="round" stroke-linejoin="round" | ||||
|           d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /> | ||||
|       </svg> | ||||
|     </button> | ||||
|     <!-- decoration  --> | ||||
|     <div class="corner tl"></div> | ||||
|     <div class="corner tr"></div> | ||||
|     <div class="corner bl"></div> | ||||
|     <div class="corner br"></div> | ||||
|     <!-- content  --> | ||||
|     <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"> | ||||
|       <Icon style="margin-left: 16px;" :icon="icon"></Icon> | ||||
|       <h2 class="container-title">{{ title }}</h2> | ||||
|     </div> | ||||
|     <div class="container-body" :class="[ | ||||
|         side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | ||||
|       ]"> | ||||
|       <slot /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import ContainerIconVue from "./ContainerIcon.vue"; | ||||
| export default { | ||||
|   name: "DashboardContainer", | ||||
|   components: { | ||||
|     Icon: ContainerIconVue, | ||||
|   }, | ||||
|   props: { | ||||
|     side: { | ||||
|       type: String, | ||||
|       default: "left", | ||||
|     }, | ||||
|     icon: { | ||||
|       type: String, | ||||
|       default: "cube", | ||||
|     }, | ||||
|     title: { | ||||
|       type: String, | ||||
|       default: "Default Title", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 100%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 30%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 60%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, #024798, transparent); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .container-body { | ||||
|     padding: 12px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     flex: 1; | ||||
|     height: 0; | ||||
|   } | ||||
|  | ||||
|   .corner { | ||||
|     z-index: 1; | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
|  | ||||
|   .corner.tl { | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-left: 2px solid #0175dc; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|   } | ||||
|  | ||||
|   .corner.tr { | ||||
|     top: 0; | ||||
|     right: 0; | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-right: 2px solid #0175dc; | ||||
|   } | ||||
|  | ||||
|   .corner.bl { | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     bottom: 0; | ||||
|     left: 0; | ||||
|     // border-left: 10px solid #0175dc; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid transparent; | ||||
|     border-left: 0.532vw solid transparent; | ||||
|     border-bottom: .6vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid transparent; | ||||
|   } | ||||
|  | ||||
|   .corner.br { | ||||
|     bottom: 0; | ||||
|     right: 0; | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     border-left: 0.532vw solid transparent; | ||||
|     border-bottom: 0.532vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid #0175dc; | ||||
|     // border-left: 10px solid transparent; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid #0175dc; | ||||
|     // transform: rotate(-90deg); | ||||
|  | ||||
|   } | ||||
|  | ||||
|   .gradient-to-right { | ||||
|     background: linear-gradient(to right, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .gradient-to-left { | ||||
|     background: linear-gradient(to left, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-right { | ||||
|     background: linear-gradient(to right, #0003, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-left { | ||||
|     background: linear-gradient(to left, #0003, transparent); | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,214 +0,0 @@ | ||||
| <!-- | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 10:44:09 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="copilot-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button v-if="false" style=" | ||||
|         appearance: none; | ||||
|         outline: none; | ||||
|         border: none; | ||||
|         background: none; | ||||
|         color: #fff; | ||||
|         cursor: pointer; | ||||
|         position: absolute; | ||||
|         top: 8px; | ||||
|         right: 8px; | ||||
|       " @click="$emit('refresh')"> | ||||
|       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | ||||
|         style="width: 24px; height: 24px"> | ||||
|         <path stroke-linecap="round" stroke-linejoin="round" | ||||
|           d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /> | ||||
|       </svg> | ||||
|     </button> | ||||
|     <!-- decoration  --> | ||||
|     <div class="corner tl"></div> | ||||
|     <div class="corner tr"></div> | ||||
|     <div class="corner bl"></div> | ||||
|     <div class="corner br"></div> | ||||
|     <!-- content  --> | ||||
|     <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"> | ||||
|       <Icon style="margin-left: 16px;" :icon="icon"></Icon> | ||||
|       <h2 class="container-title">{{ title }}</h2> | ||||
|     </div> | ||||
|     <div class="container-body" :class="[ | ||||
|         side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | ||||
|       ]"> | ||||
|       <slot /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import ContainerIconVue from "./ContainerIcon.vue"; | ||||
| export default { | ||||
|   name: "DashboardContainer", | ||||
|   components: { | ||||
|     Icon: ContainerIconVue, | ||||
|   }, | ||||
|   props: { | ||||
|     side: { | ||||
|       type: String, | ||||
|       default: "left", | ||||
|     }, | ||||
|     icon: { | ||||
|       type: String, | ||||
|       default: "cube", | ||||
|     }, | ||||
|     title: { | ||||
|       type: String, | ||||
|       default: "Default Title", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 100%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 30%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 60%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, #024798, transparent); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .container-body { | ||||
|     padding: 12px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     flex: 1; | ||||
|     height: 0; | ||||
|   } | ||||
|  | ||||
|   .corner { | ||||
|     z-index: 1; | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
|  | ||||
|   .corner.tl { | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-left: 2px solid #0175dc; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|   } | ||||
|  | ||||
|   .corner.tr { | ||||
|     top: 0; | ||||
|     right: 0; | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-right: 2px solid #0175dc; | ||||
|   } | ||||
|  | ||||
|   .corner.bl { | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     bottom: 0; | ||||
|     left: 0; | ||||
|     // border-left: 10px solid #0175dc; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid transparent; | ||||
|     border-left: 0.532vw solid #0175dc; | ||||
|     border-bottom: 0.532vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid transparent; | ||||
|   } | ||||
|  | ||||
|   .corner.br { | ||||
|     bottom: 0; | ||||
|     right: 0; | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     // border-left: 10px solid transparent; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid #0175dc; | ||||
|     // transform: rotate(-90deg); | ||||
|     border-left: 0.532vw solid transparent; | ||||
|     border-bottom: .6vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid transparent; | ||||
|   } | ||||
|  | ||||
|   .gradient-to-right { | ||||
|     background: linear-gradient(to right, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .gradient-to-left { | ||||
|     background: linear-gradient(to left, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-right { | ||||
|     background: linear-gradient(to right, #0003, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-left { | ||||
|     background: linear-gradient(to left, #0003, transparent); | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -25,7 +25,7 @@ import YieldCopilot from "./yield/index.vue"; | ||||
| // import EfficiencyCopilot from "./efficiency/index.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "copilotContainer", | ||||
|   name: "CopilotContainer", | ||||
|   components: { | ||||
|     CopilotHeaderVue, | ||||
|     YieldCopilot, | ||||
| @@ -35,7 +35,7 @@ export default { | ||||
|   data() { | ||||
|     return { | ||||
|       page: "产量", | ||||
|       period: "月", | ||||
|       period: "日", | ||||
|       than:'同比', | ||||
|       currentsStyles: '', | ||||
|     }; | ||||
|   | ||||
| @@ -36,9 +36,7 @@ export default { | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
| @@ -47,11 +45,8 @@ export default { | ||||
|     legend() { | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
| @@ -63,32 +58,27 @@ export default { | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { label: `去年${month}月${today}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${dayBeYes}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `去年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|  | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `上周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `去年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
| @@ -104,7 +94,7 @@ export default { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年`, color: "#12f7f1" }, | ||||
|           { label: `${year}年`, color: "#58adfa" }, | ||||
|           { label:  `${year}年目标`, color: "#58adfa" }, | ||||
|           { label:  `${year}年`, color: "#58adfa" }, | ||||
|  | ||||
|           // { label: `${year}年目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
| @@ -146,6 +136,14 @@ export default { | ||||
|       // console.log('chipOee', chipOeeRate) | ||||
|       let dataList = null | ||||
|       switch (this.period) { | ||||
|         case "日": | ||||
|           dataList = []; | ||||
|           dataList[0] = chipOeeRate?.previous; | ||||
|           dataList[1] = chipOeeRate?.current; | ||||
|         case "周": | ||||
|           dataList = []; | ||||
|           dataList[0] = chipOeeRate?.previous; | ||||
|           dataList[1] = chipOeeRate?.current; | ||||
|           default: | ||||
|           dataList = []; | ||||
|           dataList[0] = chipOeeRate?.previous; | ||||
| @@ -163,11 +161,8 @@ function getTemplate(period, dataList, than) { | ||||
|   // console.log('dataList',dataList); | ||||
|   let items = []; | ||||
|   var day1 = new Date(); | ||||
|   var day2 = new Date(); | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|   day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|   var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|   //今天的时间 | ||||
|   // var day2 = new Date(); | ||||
|   // day2.setTime(day2.getTime()); | ||||
| @@ -180,41 +175,31 @@ function getTemplate(period, dataList, than) { | ||||
|   if (period === '日' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year - 1}年${yesterday}日`, | ||||
|         name: `去年${month}月${today}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${dayBeYes}日`, | ||||
|         name: `${yesterday}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年本周`, | ||||
|         name: `去年本周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -222,11 +207,6 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '环比') { | ||||
|     items = [ | ||||
| @@ -239,16 +219,11 @@ function getTemplate(period, dataList, than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年${month}月`, | ||||
|         name: `去年${month}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|   | ||||
| @@ -1,15 +1,15 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-10 11:10:54 | ||||
|  * @LastEditTime: 2024-06-06 10:04:49 | ||||
|  * @LastEditTime: 2024-05-30 13:23:03 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="chip-rate"> | ||||
|     <ChipRateItem :period="period" :than="than" :cities="['邯郸',]" :color="1" /> | ||||
|     <ChipRateItem :period="period" :than="than" :cities="['瑞昌']" :color="2" /> | ||||
|     <ChipRateItem :period="period" :than="than" :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" /> | ||||
|     <ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" /> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
|   | ||||
| @@ -1,21 +1,21 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 10:25:10 | ||||
|  * @LastEditTime: 2024-06-06 13:55:10 | ||||
|  * @LastEditTime: 2024-05-30 11:19:51 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <!-- <div class="order"> --> | ||||
|   <div class="std-rate" style="width: 100%"> | ||||
|     <!-- <div class="span-2"> | ||||
|     <div class="std-rate" style="width: 100%; overflow: hidden scroll; height: 400px"> | ||||
|       <div class="span-2"> | ||||
|         <StdRateItem :period="period" :city="cities[5]" /> | ||||
|       </div> --> | ||||
|     <div class="span-2" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name"> | ||||
|       <StdRateItem :period="period" :than="than" :city="item" /> | ||||
|       </div> | ||||
|       <div class="flex-item" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name"> | ||||
|         <StdRateItem :period="period" :than="than" :city="item" /> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| @@ -33,15 +33,7 @@ export default { | ||||
|       default: "同比", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       // data: null | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     stdData() { | ||||
|       return this.$store.getters.copilot.efficiency.stdRate | ||||
|     }, | ||||
|     cities() { | ||||
|       console.log('ztl', this.$store.getters.copilot.efficiency.stdRate) | ||||
|       // let getterName = ""; | ||||
| @@ -57,30 +49,30 @@ export default { | ||||
|       //     break; | ||||
|       // } | ||||
|       const _cities = [ | ||||
|         { name: "瑞昌", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|         { name: "邯郸",target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|         { name: "瑞昌", target: 0, total: 0, current: 0, componentYield: 0, goodNumber:0,}, | ||||
|         { name: "邯郸", target: 0, total: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|         { name: "株洲", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|         { name: "佳木斯", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|         { name: "成都", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|         { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|         { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | ||||
|       ] | ||||
|       if (this.stdData?.previous) { | ||||
|         this.stdData?.previous.forEach( | ||||
|       if (this.$store.getters.copilot?.efficiency.stdRate?.previous) { | ||||
|         this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach( | ||||
|           (v, idx) => { | ||||
|             _cities[idx].previous = v ?? 0; | ||||
|           } | ||||
|         ); | ||||
|       } | ||||
|       if (this.stdData?.target) { | ||||
|         this.stdData?.target.forEach( | ||||
|       if (this.$store.getters.copilot?.efficiency.stdRate?.target) { | ||||
|         this.$store.getters.copilot?.efficiency.stdRate?.target.forEach( | ||||
|           (v, idx) => { | ||||
|             _cities[idx].target = v ?? 0; | ||||
|           } | ||||
|         ) | ||||
|       } | ||||
|       if (this.stdData?.current) { | ||||
|         this.stdData?.current.forEach( | ||||
|       if (this.$store.getters.copilot?.efficiency.stdRate?.current) { | ||||
|         this.$store.getters.copilot?.efficiency.stdRate?.current.forEach( | ||||
|           (v, idx) => { | ||||
|             _cities[idx].current = v ?? 0; | ||||
|           } | ||||
| @@ -88,30 +80,22 @@ export default { | ||||
|       } | ||||
|       // 删掉凯盛光伏 | ||||
|       // _cities.splice(4, 1); | ||||
|       let arr = [] | ||||
|       arr.push(_cities[0]) | ||||
|       arr.push(_cities[1]) | ||||
|       return arr; | ||||
|       return _cities; | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     period() { | ||||
|       this.data = this.$store.getters.copilot.efficiency.stdRate | ||||
|     } | ||||
|   data() { | ||||
|     return { | ||||
|       // cities: [ | ||||
|       //   { name: "瑞昌", target: 100, total: 200, current: 20 }, | ||||
|       //   { name: "邯郸", target: 200, total: 300, current: 20 }, | ||||
|       //   { name: "株洲", target: 300, total: 400, current: 20 }, | ||||
|       //   { name: "佳木斯", target: 400, total: 500, current: 20 }, | ||||
|       //   { name: "成都", target: 500, total: 600, current: 20 }, | ||||
|       //   { name: "凯盛光伏", target: 400, total: 500, current: 20 }, | ||||
|       //   { name: "蚌埠", target: 500, total: 600, current: 20 }, | ||||
|       // ], | ||||
|     }; | ||||
|   }, | ||||
|   // data() { | ||||
|   //   return { | ||||
|   //     // cities: [ | ||||
|   //     //   { name: "瑞昌", target: 100, total: 200, current: 20 }, | ||||
|   //     //   { name: "邯郸", target: 200, total: 300, current: 20 }, | ||||
|   //     //   { name: "株洲", target: 300, total: 400, current: 20 }, | ||||
|   //     //   { name: "佳木斯", target: 400, total: 500, current: 20 }, | ||||
|   //     //   { name: "成都", target: 500, total: 600, current: 20 }, | ||||
|   //     //   { name: "凯盛光伏", target: 400, total: 500, current: 20 }, | ||||
|   //     //   { name: "蚌埠", target: 500, total: 600, current: 20 }, | ||||
|   //     // ], | ||||
|   //   }; | ||||
|   // }, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
| @@ -119,12 +103,12 @@ export default { | ||||
| <style scoped lang="scss"> | ||||
| .std-rate { | ||||
|   display: flex; | ||||
|   gap: 16px; | ||||
|   // gap: 1px; | ||||
|   // flex: 1 1 auto; | ||||
|   flex-direction: column; | ||||
|  | ||||
|   // display: -webkit-box; | ||||
|   flex-wrap: wrap; | ||||
|   // align-items: center; | ||||
|   align-items: center; | ||||
|   // grid-template-columns: repeat(2, 1fr); | ||||
|   // grid-template-rows: repeat(4, 1fr); | ||||
| } | ||||
| @@ -133,7 +117,7 @@ export default { | ||||
| } | ||||
| .flex-item{ | ||||
|   // flex: 1 1 auto; | ||||
|   // width: 50%; | ||||
|   width: 50%; | ||||
| } | ||||
| .span-2 { | ||||
|   // flex: 1 1 auto; | ||||
|   | ||||
| @@ -36,9 +36,7 @@ export default { | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
| @@ -47,11 +45,8 @@ export default { | ||||
|     legend() { | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
| @@ -63,32 +58,27 @@ export default { | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|  | ||||
|           { label: `去年${month}月${today}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${dayBeYes}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `去年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `上周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `去年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
| @@ -104,7 +94,7 @@ export default { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年`, color: "#12f7f1" }, | ||||
|           { label: `${year}年`, color: "#58adfa" }, | ||||
|           { label: `${year}年目标`, color: "#58adfa" }, | ||||
|           { label: `${year}年`, color: "#58adfa" }, | ||||
|  | ||||
|           // { label: `${year}年目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
| @@ -117,9 +107,17 @@ export default { | ||||
|     series() { | ||||
|       // console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee); | ||||
|       const transformRate = this.transformRate | ||||
|       console.log('chipOee', transformRate) | ||||
|       // console.log('chipOee', chipOeeRate) | ||||
|       let dataList = null; | ||||
|       switch (this.period) { | ||||
|         case "日": | ||||
|           dataList = []; | ||||
|           dataList[0] = transformRate.previous; | ||||
|           dataList[1] = transformRate.current; | ||||
|         case "周": | ||||
|           dataList = []; | ||||
|           dataList[0] = transformRate.previous; | ||||
|           dataList[1] = transformRate.current; | ||||
|         default: | ||||
|           dataList = []; | ||||
|           dataList[0] = transformRate.previous; | ||||
| @@ -154,11 +152,8 @@ function getTemplate(period, dataList,than) { | ||||
|   // console.log('dataList',dataList); | ||||
|   let items = []; | ||||
|   var day1 = new Date(); | ||||
|   var day2 = new Date(); | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|   day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|   var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|   //今天的时间 | ||||
|   // var day2 = new Date(); | ||||
|   // day2.setTime(day2.getTime()); | ||||
| @@ -171,41 +166,31 @@ function getTemplate(period, dataList,than) { | ||||
|   if (period === '日' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year - 1}年${yesterday}日`, | ||||
|         name: `去年${month}月${today}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${dayBeYes}日`, | ||||
|         name: `${yesterday}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年本周`, | ||||
|         name: `去年本周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -213,11 +198,6 @@ function getTemplate(period, dataList,than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '环比') { | ||||
|     items = [ | ||||
| @@ -230,16 +210,11 @@ function getTemplate(period, dataList,than) { | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|       { | ||||
|         name: `本周目标`, | ||||
|         data: dataList ? dataList[2] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年${month}月`, | ||||
|         name: `去年${month}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 13:22:43 | ||||
|  * @LastEditTime: 2024-06-17 09:22:17 | ||||
|  * @LastEditTime: 2024-05-29 14:09:08 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -11,7 +11,7 @@ | ||||
|       <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | ||||
|     </div> | ||||
|     <div ref="oeeChart" style="height:94%;width:100%"></div> | ||||
|     <div ref="oeeChart" style="height:96%;width:100%"></div> | ||||
|   </chart-container> | ||||
| </template> | ||||
|  | ||||
| @@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue"; | ||||
| import { debounce } from "@/utils/debounce"; | ||||
| import * as echarts from "echarts"; | ||||
| export default { | ||||
|   name: "barChartBaseoee", | ||||
|   name: "BarChartBase", | ||||
|   components: { | ||||
|     ChartContainer, | ||||
|   }, | ||||
| @@ -180,30 +180,30 @@ export default { | ||||
|             itemStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             // areaStyle: { | ||||
|             //   color: { | ||||
|             //     type: "linear", | ||||
|             //     x: 0, | ||||
|             //     y: 0, | ||||
|             //     x2: 0, | ||||
|             //     y2: 1, | ||||
|             //     colorStops: [ | ||||
|             //       { | ||||
|             //         offset: 0, | ||||
|             //         color: "#f3c000", // 0% 处的颜色 | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 0.55, | ||||
|             //         color: "#f3c00033", | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 1, | ||||
|             //         color: "transparent", // 100% 处的颜色 | ||||
|             //       }, | ||||
|             //     ], | ||||
|             //     global: false, // 缺省为 false | ||||
|             //   }, | ||||
|             // }, | ||||
|             areaStyle: { | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#f3c000", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 0.55, | ||||
|                     color: "#f3c00033", | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "transparent", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|         ], | ||||
| @@ -221,12 +221,12 @@ export default { | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 12; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       // if (val === false && this.isOpen === true) { | ||||
|       //   console.log(val) | ||||
|       //   this.width = 97 + '%' | ||||
| @@ -268,11 +268,11 @@ export default { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     if (screenfull.isEnabled) { | ||||
|       screenfull.on("change", () => { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|     // if (screenfull.isEnabled) { | ||||
|     //   screenfull.on("change", () => { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     this.actualOptions = this.options | ||||
|     this.canvasReset(); | ||||
|     window.addEventListener("resize", this.canvasReset); | ||||
| @@ -303,7 +303,6 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .bar-chart-base { | ||||
|   // position: relative; | ||||
|  | ||||
| @@ -328,9 +327,6 @@ export default { | ||||
|       margin-right: 0.22vw; | ||||
|     } | ||||
|   } | ||||
|      .legend-item:nth-child(3) { | ||||
|        margin-left: 1vw; | ||||
|      } | ||||
|  .legend-item:nth-child(3):before { | ||||
|    // width: 12px; | ||||
|    // height: 2px; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-23 15:50:44 | ||||
|  * @LastEditTime: 2024-06-17 09:23:39 | ||||
|  * @LastEditTime: 2024-05-29 14:25:10 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -11,7 +11,7 @@ | ||||
|       <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | ||||
|     </div> | ||||
|     <div ref="oeeChart" style="height:94%;width:100%"></div> | ||||
|     <div ref="oeeChart" style="height:96%;width:100%"></div> | ||||
|   </chart-container> | ||||
| </template> | ||||
|  | ||||
| @@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue"; | ||||
| import { debounce } from "@/utils/debounce"; | ||||
| import * as echarts from "echarts"; | ||||
| export default { | ||||
|   name: "barChartBaseoee", | ||||
|   name: "BarChartBase", | ||||
|   components: { | ||||
|     ChartContainer, | ||||
|   }, | ||||
| @@ -180,30 +180,30 @@ export default { | ||||
|             itemStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             // areaStyle: { | ||||
|             //   color: { | ||||
|             //     type: "linear", | ||||
|             //     x: 0, | ||||
|             //     y: 0, | ||||
|             //     x2: 0, | ||||
|             //     y2: 1, | ||||
|             //     colorStops: [ | ||||
|             //       { | ||||
|             //         offset: 0, | ||||
|             //         color: "#f3c000", // 0% 处的颜色 | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 0.55, | ||||
|             //         color: "#f3c00033", | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 1, | ||||
|             //         color: "transparent", // 100% 处的颜色 | ||||
|             //       }, | ||||
|             //     ], | ||||
|             //     global: false, // 缺省为 false | ||||
|             //   }, | ||||
|             // }, | ||||
|             areaStyle: { | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#f3c000", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 0.55, | ||||
|                     color: "#f3c00033", | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "transparent", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|         ], | ||||
| @@ -221,12 +221,12 @@ export default { | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 12; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       // if (val === false && this.isOpen === true) { | ||||
|       //   console.log(val) | ||||
|       //   this.width = 97 + '%' | ||||
| @@ -242,7 +242,7 @@ export default { | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.initChart(this.actualOptions) | ||||
|       this.canvasReset() | ||||
|       // this.canvasReset() | ||||
|     }, | ||||
|     series(val) { | ||||
|       if (!val) { | ||||
| @@ -267,11 +267,11 @@ export default { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     if (screenfull.isEnabled) { | ||||
|       screenfull.on("change", () => { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|     // if (screenfull.isEnabled) { | ||||
|     //   screenfull.on("change", () => { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     this.actualOptions = this.options | ||||
|     this.canvasReset(); | ||||
|     window.addEventListener("resize", this.canvasReset); | ||||
| @@ -302,7 +302,6 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .bar-chart-base { | ||||
|   // position: relative; | ||||
|  | ||||
| @@ -327,9 +326,7 @@ export default { | ||||
|       margin-right: 0.22vw; | ||||
|     } | ||||
|   } | ||||
|  .legend-item:nth-child(3) { | ||||
|    margin-left: 1vw; | ||||
|  } | ||||
|  | ||||
|   .legend-item:nth-child(1):before { | ||||
|     background-color: #12f7f1; | ||||
|   } | ||||
|   | ||||
| @@ -13,11 +13,10 @@ | ||||
|     <!-- <div style="flex:1;padding: 0 20%;"> --> | ||||
|     <div class="chart" ref="chart"></div> | ||||
|     <!-- </div> --> | ||||
|     <div class="legend"> | ||||
|     <div class="legend" > | ||||
|       <div class="legend-item" v-for="lgd in legend" :key="lgd.label"> | ||||
|         <span class="legend-item__label">{{ lgd.label }}</span> | ||||
|         <span class="legend-item__value">{{ lgd.value }}</span> | ||||
|  | ||||
|         <span class="legend-item__label">{{ lgd.label }}</span> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| @@ -65,13 +64,13 @@ export default { | ||||
|     valueTuple() { | ||||
|       const getter = this.chipRate; | ||||
|       // console.log(getter) | ||||
|       // if (this.period === "日" || this.period === "周") { | ||||
|       //   return [ | ||||
|       //     getter.previous[this.factoryId], | ||||
|       //     getter.current[this.factoryId], | ||||
|       //     0, | ||||
|       //   ]; | ||||
|       // } | ||||
|       if (this.period === "日" || this.period === "周") { | ||||
|         return [ | ||||
|           getter.previous[this.factoryId], | ||||
|           getter.current[this.factoryId], | ||||
|           0, | ||||
|         ]; | ||||
|       } | ||||
|       // [100, 200, 200] | ||||
|       return [ | ||||
|         getter.previous[this.factoryId], | ||||
| @@ -80,86 +79,27 @@ export default { | ||||
|       ]; | ||||
|     }, | ||||
|     options() { | ||||
|       // const single = this.period === "日" || this.period === "周"; | ||||
|       const today = new Date().getDate(); | ||||
|       const single = this.period === "日" || this.period === "周"; | ||||
|       const year = new Date().getFullYear(); | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const vt = this.valueTuple; | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
|       // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日'; | ||||
|       // const today = new Date().getDate(); | ||||
|       // let yesterday = new Date().getDate() -1; | ||||
|       // const month = new Date().getMonth() + 1; | ||||
|       const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1; | ||||
|       // const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${yesterday}日良率`, }, | ||||
|           { label: `${year - 1}年${yesterday}日良率` }, | ||||
|           { label: `${yesterday}日目标` }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${yesterday}日良率` }, | ||||
|           { label: `${dayBeYes}日良率` }, | ||||
|           { label: `${yesterday}日目标` }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `本周良率`, }, | ||||
|           { label: `${year - 1}年本周良率` }, | ||||
|           { label: `本周目标`, }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `本周良率`, }, | ||||
|           { label: `上周良率`, }, | ||||
|           { label: `本周目标`, }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${month}月良率`, }, | ||||
|           { label: `${year-1}年${month}月良率`, }, | ||||
|           { label: `${month}月目标良率`, }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${month}月良率`, }, | ||||
|           { label: `${lastMonth}月良率`, }, | ||||
|           { label: `${month}月目标良率`, }, | ||||
|         ]; | ||||
|       } else { | ||||
|         items = [ | ||||
|           { label: `${year}年良率`, }, | ||||
|           { label: `${year - 1}年良率` }, | ||||
|           { label: `${year}年目标良率` }, | ||||
|         ]; | ||||
|       } | ||||
|       let titleValue = vt[1] === null ? 0 + '%' : this.formatNumber(vt[1]) + '%', | ||||
|       let titleValue = single | ||||
|           ? (vt[1] != null && `${vt[1] * 100}%`) || "0%" | ||||
|           : vt[0] != null && vt[2] != null && vt[2] !== 0 | ||||
|           ? `${((vt[1] / vt[2]) * 100).toFixed(0)}%` | ||||
|           : "0%", | ||||
|         subtitle = { | ||||
|           日: "昨日良率", | ||||
|           日: "本日良率", | ||||
|           周: "本周良率", | ||||
|           月: `${month}月良率`, | ||||
|           年: `${year}良率`, | ||||
|         }[this.period]; | ||||
|       console.log(vt[0]); | ||||
|  | ||||
|       const t = getOptions({ | ||||
|         // single, | ||||
|         single, | ||||
|         color: this.color == 1 ? "#4CF0E8" : "#1065ff", | ||||
|         titleValue, | ||||
|         subtitle, | ||||
|         yesterday, | ||||
|         currentName: items[0].label, | ||||
|         preName: items[1].label, | ||||
|         previousSum: vt[0], | ||||
|         currentSum: vt[1], | ||||
|         targetSum: vt[2], | ||||
| @@ -169,11 +109,8 @@ export default { | ||||
|     legend() { | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
| @@ -185,48 +122,41 @@ export default { | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" }, | ||||
|           { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | ||||
|           { label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | ||||
|           { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" }, | ||||
|           { label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${dayBeYes}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | ||||
|           { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | ||||
|           { label: `${yesterday}日目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | ||||
|           { label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" }, | ||||
|           { label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | ||||
|           { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | ||||
|           { label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | ||||
|           { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" }, | ||||
|           { label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | ||||
|           { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | ||||
|           { label: `本周目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | ||||
|           { label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" }, | ||||
|           { label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | ||||
|           { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | ||||
|  | ||||
|           { label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | ||||
|           { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" }, | ||||
|           { label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" }, | ||||
|           { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | ||||
|           { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | ||||
|  | ||||
|           { label: `${month}月目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | ||||
|           { label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" }, | ||||
|           { label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" }, | ||||
|           { label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" }, | ||||
|         ]; | ||||
|       } else { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | ||||
|           { label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | ||||
|  | ||||
|           { label: `${year}年目标`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | ||||
|           { label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" }, | ||||
|           { label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null  ? 0 + "%" : (this.valueTuple[0]) + "%" }, | ||||
|           { label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" }, | ||||
|         ]; | ||||
|       } | ||||
|       return items | ||||
| @@ -261,16 +191,6 @@ export default { | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     formatNumber(num) { | ||||
|       console.log(num); | ||||
|       // 判断是否为整数 | ||||
|       if (Number.isInteger(num)) { | ||||
|         return num; // 如果是整数,直接转换为字符串 | ||||
|       } else { | ||||
|         // 如果不是整数,保留两位小数并转换为字符串 | ||||
|         return num.toFixed(2); | ||||
|       } | ||||
|     }, | ||||
|     handleCityUpdate(id) { | ||||
|       this.factoryId = id; | ||||
|     }, | ||||
| @@ -286,8 +206,7 @@ export default { | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     align-items: center; | ||||
|     // padding: 0 3px; | ||||
|     // justify-content: center; | ||||
|     justify-content: center; | ||||
|     gap: 3px; | ||||
|     backdrop-filter: blur(24px); | ||||
|   .cities { | ||||
| @@ -297,34 +216,29 @@ export default { | ||||
|     .chart { | ||||
|       // margin-left: 5%; | ||||
|       // width: 290px; | ||||
|       flex: 1 1 auto; | ||||
|       padding: 0 20%; | ||||
|       /* margin: 10%; */ | ||||
|       height: 16vh; | ||||
|       /* min-width: 300px; */ | ||||
|       align-self: stretch; | ||||
|       // flex: 1 1 auto; | ||||
|     // align-items: center; | ||||
|       // margin:0 auto; | ||||
|       // padding: 0 10%;; | ||||
|       /* margin: 10%; */ | ||||
|       /* min-width: 300px; */ | ||||
|       height: 200px; | ||||
|     } | ||||
|   .legend { | ||||
|     height: 80px; | ||||
|     display: flex; | ||||
|     color: #fff; | ||||
|     justify-content: flex-end; | ||||
|     gap:20px; | ||||
|     // justify-content: space-between; | ||||
|     gap: 40px; | ||||
|     justify-content: space-around; | ||||
|   } | ||||
|   // .legend:nth-child(3){ | ||||
|   //   margin-left: 30px; | ||||
|   // } | ||||
|  | ||||
|   .legend-item { | ||||
|     margin-left: 15px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     // align-items: center; | ||||
|     align-items: flex-start; | ||||
|     align-items: center; | ||||
|     gap: 3px; | ||||
|  | ||||
|     &:first-child { | ||||
|       // margin-left: 5px; | ||||
|       .legend-item__value { | ||||
|         color: #0e61f5; | ||||
|       } | ||||
| @@ -336,40 +250,7 @@ export default { | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| .legend-item__label { | ||||
|   position: relative; | ||||
| } | ||||
|  | ||||
| .legend-item__label::before { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   width: 12px; | ||||
|   height: 12px; | ||||
|   background: #ccc; | ||||
|   border-radius: 2px; | ||||
|   top: 6px; | ||||
|   left: -18px; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(2) .legend-item__label::before { | ||||
|   background: #12fff5; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(2) .legend-item__value { | ||||
|   color: #12fff5; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(1) .legend-item__label::before { | ||||
|   background: #0f65ff; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(1) .legend-item__value { | ||||
|   color: #0f65ff; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(3) .legend-item__label::before { | ||||
|   background: #003982; | ||||
| } | ||||
|   .legend-item__value { | ||||
|     font-size: 24px; | ||||
|     font-weight: 600; | ||||
|   | ||||
| @@ -132,19 +132,19 @@ function calculateItems(period, valueTuple) { | ||||
|     case "日": | ||||
|       items = [ | ||||
|         { label: `${month}月${today}日累计`, value: valueTuple[1] }, | ||||
|         { label: `${year-1}年${month}月${today}日累计`, value: valueTuple[0] }, | ||||
|         { label: `去年${month}月${today}日累计`, value: valueTuple[0] }, | ||||
|       ]; | ||||
|       break; | ||||
|     case "周": | ||||
|       items = [ | ||||
|         { label: `本周累计`, value: valueTuple[1] }, | ||||
|         { label: `${year-1}年本周累计`, value: valueTuple[0] }, | ||||
|         { label: `去年本周累计`, value: valueTuple[0] }, | ||||
|       ]; | ||||
|       break; | ||||
|     case "月": | ||||
|       items = [ | ||||
|         { label: `${month}月累计`, value: valueTuple[1] }, | ||||
|         { label: `${year-1}年${month}月累计`, value: valueTuple[0] }, | ||||
|         { label: `去年${month}月累计`, value: valueTuple[0] }, | ||||
|         { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|       ]; | ||||
|       break; | ||||
|   | ||||
| @@ -6,7 +6,7 @@ | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="progress-bar" :data-title="title" :data-rate="current + '%'"> | ||||
|   <div class="progress-bar" :data-title="title" :data-rate="value + '%'"> | ||||
|     <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div> | ||||
|   </div> | ||||
| </template> | ||||
| @@ -20,18 +20,6 @@ export default { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     target: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     previous: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     current: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     // total: { | ||||
|     //   type: Number, | ||||
|     //   default: 0, | ||||
| @@ -46,16 +34,11 @@ export default { | ||||
|   }, | ||||
|   computed: { | ||||
|     dataRate() { | ||||
|       // if (this.current != 0 && this.target != 0) { | ||||
|         console.log( '1111111111', this.current, this.target,this.previous); | ||||
|       return this.current == 0 && this.target == 0 | ||||
|           ? 0 | ||||
|         : this.current != 0 && this.target != 0 | ||||
|           ? `${((this.current / this.target) * 100).toFixed(2)}%` | ||||
|           : this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? this.current + '%' : 0 + '%' | ||||
|       // } else if(this.previous != 0) { | ||||
|       //   return this.previous + '%' | ||||
|       // } | ||||
|       return this.value == 0 | ||||
|         ? "-" | ||||
|         : this.value > 1 | ||||
|           ?  100 + '%' | ||||
|           : `${(parseFloat(this.value)).toFixed(0)}%`; | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 10:25:10 | ||||
|  * @LastEditTime: 2024-06-27 09:13:38 | ||||
|  * @LastEditTime: 2024-05-29 17:03:00 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -10,31 +10,31 @@ | ||||
|   <div v-if="period == '日'" class="std-rate-item"> | ||||
|     <CityName :value="city.name" /> | ||||
|     <div class="std-rate-item__value"> | ||||
|       <ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" /> | ||||
|       <preProgressBar :period="period" :title="titlePre" :previous="city.previous" /> | ||||
|       <ProgressBar :period="period" :title="title" :value="city.current" /> | ||||
|       <ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | ||||
|     </div> | ||||
|   </div> | ||||
|   <div v-else-if="period == '周'" class="std-rate-item"> | ||||
|     <CityName :value="city.name" /> | ||||
|     <div class="std-rate-item__value"> | ||||
|       <ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" /> | ||||
|       <preProgressBar :period="period" :title="titlePre" :previous="city.previous" /> | ||||
|       <ProgressBar :period="period" :title="title" :value="city.current" /> | ||||
|       <ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | ||||
|     </div> | ||||
|   </div> | ||||
|   <div v-else-if="period == '月'" class="std-rate-item"> | ||||
|     <CityName :value="city.name" /> | ||||
|     <div class="std-rate-item__value"> | ||||
|       <ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" /> | ||||
|       <preProgressBar :period="period" :title="titlePre" :previous="city.previous" /> | ||||
|       <!-- <ProgressBar :period="period" :title="title" :value="city.current" /> --> | ||||
|       <ProgressBar :period="period" :title="titleTarget" :value="city.target" /> | ||||
|       <ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | ||||
|       <ProgressBar :period="period" :title="title" :value="city.current" /> | ||||
|     </div> | ||||
|   </div> | ||||
|   <div v-else="period == '年'" class="std-rate-item"> | ||||
|     <CityName :value="city.name" /> | ||||
|     <div class="std-rate-item__value"> | ||||
|       <ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" /> | ||||
|       <preProgressBar :period="period" :title="titlePre" :previous="city.previous" /> | ||||
|       <!-- <ProgressBar :period="period" :title="title" :value="city.current" /> --> | ||||
|       <ProgressBar :period="period" :title="titleTarget" :value="city.target" /> | ||||
|       <ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | ||||
|       <ProgressBar :period="period" :title="title" :value="city.current" /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
| @@ -42,12 +42,10 @@ | ||||
| <script> | ||||
| import CityName from "./CityName.vue"; | ||||
| import ProgressBar from "./ProgressBar.vue"; | ||||
| import preProgressBar from "./preProgressBar.vue"; | ||||
|  | ||||
|  | ||||
| export default { | ||||
|   name: "StdRateItem", | ||||
|   components: { CityName, ProgressBar, preProgressBar }, | ||||
|   components: { CityName, ProgressBar }, | ||||
|   props: { | ||||
|     city: { | ||||
|       type: Object, | ||||
| @@ -71,25 +69,22 @@ export default { | ||||
|     titlePre() { | ||||
|       console.log(this.city); | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       const today = new Date().getDate(); | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1; | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         return `${year - 1}年${yesterday}日` | ||||
|         return `去年${month}月${today}日` | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         return `${dayBeYes}日` | ||||
|         return `${yesterday}日` | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         return `${year-1}年本周` | ||||
|         return `去年本周` | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         return `上周` | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         return `${year-1}年${month}月` | ||||
|         return `去年${month}月` | ||||
|       } else if (this.period === '月' && this.than === '环比') { | ||||
|         return `${lastMonth}月` | ||||
|       } else { | ||||
| @@ -98,18 +93,14 @@ export default { | ||||
|     }, | ||||
|     title() { | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       const today = new Date().getDate(); | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         return `${yesterday}日` | ||||
|         return `${month}月${today}日` | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         return `${yesterday}日` | ||||
|         return `${month}月${today}日` | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         return `本周` | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
| @@ -129,13 +120,9 @@ export default { | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '月') { | ||||
|         return `${month}月目标${this.city.target}%` | ||||
|         return `${month}月目标` | ||||
|       } else if (this.period === '年') { | ||||
|         return `${year}年目标${this.city.target}%` | ||||
|       } else if (this.period === '周') { | ||||
|         return `本周目标${this.city.target}%` | ||||
|       } else if (this.period === '日') { | ||||
|         return `${month}月${today}日目标${this.city.target}%` | ||||
|         return `${year}年目标` | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   | ||||
| @@ -1,130 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-27 09:12:54 | ||||
|  * @LastEditTime: 2024-06-27 09:14:21 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="progress-bar" :data-title="title" :data-rate="previous + '%'"> | ||||
|     <div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "ProgressBar", | ||||
|   components: {}, | ||||
|   props: { | ||||
|     value: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     target: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     previous: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     current: { | ||||
|       type: Number, | ||||
|       default: 0, | ||||
|     }, | ||||
|     // total: { | ||||
|     //   type: Number, | ||||
|     //   default: 0, | ||||
|     // }, | ||||
|     title: { | ||||
|       type: String, | ||||
|       default: "", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   computed: { | ||||
|     dataRate() { | ||||
|       // if (this.current != 0 && this.target != 0) { | ||||
|         // console.log( '1111111111', this.current, this.target,this.previous); | ||||
|       return this.previous >=100 ? 100 + '%' : this.previous + '%'; | ||||
|       // } else if(this.previous != 0) { | ||||
|       //   return this.previous + '%' | ||||
|       // } | ||||
|     }, | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .progress-bar { | ||||
|   height: 10px; | ||||
|   background-color: #002f6b; | ||||
|   border-radius: 4px; | ||||
|   margin-bottom: 12px; | ||||
|   position: relative; | ||||
|  | ||||
|   &:before { | ||||
|     content: attr(data-title); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     font-size: 12px; | ||||
|   } | ||||
|  | ||||
|   &:after { | ||||
|     content: attr(data-rate); | ||||
|     display: inline-block; | ||||
|     color: #fff; | ||||
|     position: absolute; | ||||
|     bottom: -200%; | ||||
|     right: 0; | ||||
|     font-size: 12px; | ||||
|   } | ||||
|  | ||||
|   &:first-child { | ||||
|     &:after { | ||||
|       color: #11eae3; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   &:nth-child(2) { | ||||
|     &:after { | ||||
|       color: #0e65fd; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .progress-bar__rate { | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 100%; | ||||
|     width: 0; | ||||
|     border-radius: 4px; | ||||
|      background: linear-gradient(to right, | ||||
|           #004c5e11 10%, | ||||
|           #004c5e, | ||||
|           #0ac0c0, | ||||
|           #11eae3); | ||||
|   } | ||||
|  | ||||
|   &:first-child { | ||||
|     .progress-bar__rate { | ||||
|       background: linear-gradient(to right, | ||||
|           #004c5e11 10%, | ||||
|           #004c5e, | ||||
|           #0ac0c0, | ||||
|           #11eae3); | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   &:nth-child(2) { | ||||
|     .progress-bar__rate { | ||||
|       background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd); | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,47 +1,39 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 10:04:53 | ||||
|  * @LastEditTime: 2024-07-01 12:27:45 | ||||
|  * @LastEditTime: 2024-05-30 11:13:01 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="efficiency-copilot"> | ||||
|     <section class="top flex"> | ||||
|       <Container title="芯片良率" icon="chip2"> | ||||
|         <ChipRate :period="period" :than="than" /> | ||||
|       </Container> | ||||
|       <left-container title="标准组件良率" icon="std"> | ||||
|         <StdRate :period="period" :than="than" /> | ||||
|       </left-container> | ||||
|     </section> | ||||
|     <section class="bottom flex"> | ||||
|       <Container title="芯片OEE" icon="chip"> | ||||
|         <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" /> | ||||
|       </Container> | ||||
|       <left-container title="转化效率" icon="cube"> | ||||
|         <TransformRate :transformRate="transformRate" :period="period" :than="than" /> | ||||
|       </left-container> | ||||
|     </section> | ||||
|  | ||||
|  | ||||
|     <Container title="芯片良率" icon="chip2"> | ||||
|       <ChipRate :period="period" :than="than" /> | ||||
|     </Container> | ||||
|     <Container title="标准组件良率" icon="std"> | ||||
|       <StdRate :period="period" :than="than" /> | ||||
|     </Container> | ||||
|     <Container title="芯片OEE" icon="chip"> | ||||
|       <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" /> | ||||
|     </Container> | ||||
|     <Container title="转化效率" icon="cube"> | ||||
|       <TransformRate :transformRate="transformRate" :period="period" :than="than" /> | ||||
|     </Container> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import Container from "@/views/copilot/components/rightContainer.vue"; | ||||
| import leftContainer from "@/views/copilot/components/leftContainer.vue"; | ||||
| import Container from "@/views/copilot/components/Container.vue"; | ||||
| import ChipOeeVue from "./components/ChipOee.vue"; | ||||
| import ChipRateVue from "./components/ChipRate.vue"; | ||||
| import StdRateVue from "./components/StdRate.vue"; | ||||
| import TransformRateVue from "./components/TransformRate.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "efficiencyCopilot", | ||||
|   name: "EfficiencyCopilot", | ||||
|   components: { | ||||
|     Container, | ||||
|     leftContainer, | ||||
|     ChipOee: ChipOeeVue, | ||||
|     ChipRate: ChipRateVue, | ||||
|     StdRate: StdRateVue, | ||||
| @@ -96,30 +88,7 @@ export default { | ||||
| }; | ||||
| </script> | ||||
|  | ||||
|  | ||||
| <style scoped> | ||||
| .efficiency-copilot { | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   gap: 20px; | ||||
| } | ||||
|  | ||||
| .flex { | ||||
|   display: flex; | ||||
|   gap: 20px; | ||||
|   flex: 1; | ||||
| } | ||||
|  | ||||
| .top > div, | ||||
| .bottom > div { | ||||
|   height: 100%; | ||||
| } | ||||
|  | ||||
| </style> | ||||
|  | ||||
| <!-- <style scoped> | ||||
|  | ||||
| .efficiency-copilot { | ||||
|   flex: 1; | ||||
|   display: grid; | ||||
| @@ -131,4 +100,4 @@ export default { | ||||
| .efficiency-copilot > div { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> --> | ||||
| </style> | ||||
|   | ||||
| @@ -1,147 +1,163 @@ | ||||
| export default ({ | ||||
| export default function ({ | ||||
|   single = false, | ||||
|   color, | ||||
|   titleValue, | ||||
|   subtitle, | ||||
|   previousSum, | ||||
|   currentSum, | ||||
|   targetSum, | ||||
|   currentName, | ||||
|   preName, | ||||
|   yesterday, | ||||
| }) => ({ | ||||
|   grid: { | ||||
|     left: 300, | ||||
|     right: 0, | ||||
|     bottom: 0, | ||||
|     top: 0, | ||||
|     containLabel: true, | ||||
|   }, | ||||
|   tooltip: {}, | ||||
|   title: { | ||||
|     text: titleValue, | ||||
|     left: "48%", | ||||
|     top: "37%", | ||||
|     textAlign: "center", | ||||
|     textStyle: { | ||||
|       fontWeight: 600, | ||||
|       fontSize: 36, | ||||
|       color: "#fffd", | ||||
| }) { | ||||
|   return { | ||||
|     grid: { | ||||
|       left: 0, | ||||
|       right: 0, | ||||
|       bottom: 0, | ||||
|       top: 0, | ||||
|       containLabel: true, | ||||
|     }, | ||||
|     subtext: `\u2002${yesterday + '日良率'}\u2002`, | ||||
|     subtextStyle: { | ||||
|       fontSize: 16, | ||||
|       fontWeight: 100, | ||||
|       color: "#fffd", | ||||
|       align: "right", | ||||
|     tooltip: { | ||||
|       // formatter(params) { | ||||
|       //   return `${params.name}: ${(params.value * 100).toFixed(0)}%`; | ||||
|       // } | ||||
|     }, | ||||
|   }, | ||||
|   series: [ | ||||
|     // 背景 series | ||||
|     { | ||||
|       type: "pie", | ||||
|       name: "当前良率", | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["50%", "52%"], | ||||
|       emptyCircleStyle: { | ||||
|         color: "#003982", | ||||
|     title: { | ||||
|       text: titleValue, | ||||
|       left: "49%", | ||||
|       top: "39%", | ||||
|       textAlign: "center", | ||||
|       textStyle: { | ||||
|         fontWeight: 600, | ||||
|         fontSize: 32, | ||||
|         color: "#fffd", | ||||
|       }, | ||||
|       subtext: `\u2002${subtitle}\u2002`, | ||||
|       subtextStyle: { | ||||
|         fontSize: 14, | ||||
|         fontWeight: 100, | ||||
|         color: "#fffd", | ||||
|         align: "right", | ||||
|       }, | ||||
|     }, | ||||
|     // 数据 series | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["50%", "52%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
|     series: [ | ||||
|       // 背景 series | ||||
|       { | ||||
|         type: "pie", | ||||
|         name: "当前目标", | ||||
|         radius: ["70%", "85%"], | ||||
|         center: ["50%", "52%"], | ||||
|         emptyCircleStyle: { | ||||
|           color: "#040c5f45", | ||||
|         }, | ||||
|       }, | ||||
|       labelLine: { | ||||
|         show: false, | ||||
|       }, | ||||
|       data: [ | ||||
|         { | ||||
|           value: currentSum, | ||||
|           name: currentName, | ||||
|           tooltip: { | ||||
|             formatter: `${currentName} : ${currentSum}` | ||||
|           }, | ||||
|           selected: false, | ||||
|           itemStyle: { | ||||
|             borderJoin: "round", | ||||
|             borderCap: "round", | ||||
|             borderWidth: 12, | ||||
|             borderRadius: "50%", | ||||
|             color: { | ||||
|               type: "linear", | ||||
|               x: 1, | ||||
|               y: 0, | ||||
|               x2: 0, | ||||
|               y2: 1, | ||||
|               colorStops: [ | ||||
|                 { offset: 0, color: "#4CF0E811" }, | ||||
|                 { offset: 1, color: "#4CF0E8" }, | ||||
|               ], | ||||
|       // 数据 series | ||||
|       { | ||||
|         type: "pie", | ||||
|         radius: ["70%", "85%"], | ||||
|         center: ["50%", "52%"], | ||||
|         avoidLabelOvervlap: false, | ||||
|         label: { | ||||
|           show: false, | ||||
|         }, | ||||
|         labelLine: { | ||||
|           show: false, | ||||
|         }, | ||||
|         data: [ | ||||
|           { | ||||
|             value: currentSum, | ||||
|             name: "当前良率", | ||||
|             selected: false, | ||||
|             itemStyle: { | ||||
|               borderJoin: "round", | ||||
|               borderCap: "round", | ||||
|               borderWidth: 12, | ||||
|               borderRadius: "50%", | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 1, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: single | ||||
|                   ? [ | ||||
|                       { offset: 0, color: `${color}11` }, | ||||
|                       { offset: 1, color: `${color}` }, | ||||
|                     ] | ||||
|                   : [ | ||||
|                       { offset: 0, color: "#4CF0E811" }, | ||||
|                       { offset: 1, color: "#4CF0E8" }, | ||||
|                     ], | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|         }, | ||||
|         { | ||||
|           value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), | ||||
|           name: currentName, | ||||
|           tooltip: { | ||||
|             formatter: `${currentName} : ${currentSum}` | ||||
|           { | ||||
|             value: | ||||
|               targetSum > currentSum | ||||
|                 ? targetSum - currentSum | ||||
|                 : targetSum == 0 | ||||
|                 ? currentSum == 0 | ||||
|                   ? 1 | ||||
|                   : 0 | ||||
|                 : targetSum, | ||||
|  | ||||
|             name: "未达成", | ||||
|             itemStyle: { color: "transparent" }, | ||||
|             label: { show: false }, | ||||
|           }, | ||||
|           itemStyle: { color: "transparent" }, | ||||
|           label: { show: false }, | ||||
|         }, | ||||
|       ], | ||||
|     }, | ||||
|     // 数据 series2 - 2023累计 | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["55%", "70%"], | ||||
|       center: ["50%", "52%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
|         ], | ||||
|       }, | ||||
|       labelLine: { | ||||
|         show: false, | ||||
|       }, | ||||
|       data: [ | ||||
|         { | ||||
|           value: previousSum, | ||||
|           name: preName, | ||||
|            tooltip: { | ||||
|             formatter: `${preName} : ${previousSum}` | ||||
|           }, | ||||
|           selected: false, | ||||
|           itemStyle: { | ||||
|             borderJoin: "round", | ||||
|             borderCap: "round", | ||||
|             borderWidth: 12, | ||||
|             borderRadius: "50%", | ||||
|             color: { | ||||
|               type: "linear", | ||||
|               x: 1, | ||||
|               y: 0, | ||||
|               x2: 0, | ||||
|               y2: 1, | ||||
|               colorStops: [ | ||||
|                 { offset: 0, color: "#1065ff66" }, | ||||
|                 { offset: 1, color: "#1065ff" }, | ||||
|               ], | ||||
|       // 数据 series2 - 2023累计 | ||||
|       single | ||||
|         ? null | ||||
|         : { | ||||
|             type: "pie", | ||||
|             radius: ["55%", "70%"], | ||||
|             center: ["50%", "52%"], | ||||
|             avoidLabelOvervlap: false, | ||||
|             label: { | ||||
|               show: false, | ||||
|             }, | ||||
|             labelLine: { | ||||
|               show: false, | ||||
|             }, | ||||
|             data: [ | ||||
|               { | ||||
|                 value: previousSum, | ||||
|                 name: "上期良率", | ||||
|                 selected: false, | ||||
|                 itemStyle: { | ||||
|                   borderJoin: "round", | ||||
|                   borderCap: "round", | ||||
|                   borderWidth: 12, | ||||
|                   borderRadius: "50%", | ||||
|                   color: { | ||||
|                     type: "linear", | ||||
|                     x: 1, | ||||
|                     y: 0, | ||||
|                     x2: 0, | ||||
|                     y2: 1, | ||||
|                     colorStops: [ | ||||
|                       { offset: 0, color: "#1065ff66" }, | ||||
|                       { offset: 1, color: "#1065ff" }, | ||||
|                     ], | ||||
|                   }, | ||||
|                 }, | ||||
|               }, | ||||
|               { | ||||
|                 value: | ||||
|                   targetSum > previousSum | ||||
|                     ? targetSum - previousSum | ||||
|                     : previousSum == 0 | ||||
|                     ? 1 | ||||
|                     : 0, | ||||
|                 name: "-", | ||||
|                 formatter: { | ||||
|                   show: false | ||||
|                 }, | ||||
|                 itemStyle: { color: "transparent" }, | ||||
|                 label: { show: false }, | ||||
|               }, | ||||
|             ], | ||||
|           }, | ||||
|         }, | ||||
|         { | ||||
|           value:previousSum === 0 ? 1 : 0, | ||||
|           name: preName, | ||||
|           tooltip: { | ||||
|             formatter: `${preName} : ${previousSum}` | ||||
|           }, | ||||
|           itemStyle: { color: "transparent" }, | ||||
|           label: { show: false }, | ||||
|         }, | ||||
|       ], | ||||
|     }, | ||||
|   ], | ||||
| }); | ||||
|     ], | ||||
|   }; | ||||
| } | ||||
|   | ||||
| @@ -1,13 +1,13 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-20 16:04:18 | ||||
|  * @LastEditTime: 2024-06-03 16:46:11 | ||||
|  * @LastEditTime: 2024-05-30 11:14:17 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div class="copilot-layout" ref="copilot-layout"> --> | ||||
|   <div class="copilot-layout" ref="copilot-layout"> | ||||
|   <div class="copilot-layout other" ref="copilot-layout"> | ||||
|     <CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive" | ||||
|       @update:period="period = $event" @update:than="updateThan" /> | ||||
|  | ||||
| @@ -25,7 +25,7 @@ import CopilotHeaderVue from "./components/CopilotHeader.vue"; | ||||
| import EfficiencyCopilot from "./efficiency/index.vue"; | ||||
|  | ||||
| export default { | ||||
|   name: "copilotEfficiencyContainer", | ||||
|   name: "CopilotContainer", | ||||
|   components: { | ||||
|     CopilotHeaderVue, | ||||
|     EfficiencyCopilot, | ||||
| @@ -34,7 +34,7 @@ export default { | ||||
|     return { | ||||
|       than:'同比', | ||||
|       page: "效率", | ||||
|       period: "月", | ||||
|       period: "日", | ||||
|       currentsStyles: '', | ||||
|     }; | ||||
|   }, | ||||
| @@ -95,14 +95,13 @@ export default { | ||||
| </script> | ||||
| <style> | ||||
|  | ||||
|  | ||||
| .copilot-layout { | ||||
|   padding: 16px; | ||||
|   background: url(../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; | ||||
|   position: absolute; | ||||
|   left: -16px; | ||||
|   /* top: -8px; */ | ||||
|   height: calc(100% + 30px); | ||||
|   /* height: calc(100% + 38px); */ | ||||
|   width: calc(100% + 30px); | ||||
|   z-index: 1001; | ||||
|   color: #fff; | ||||
| @@ -111,12 +110,12 @@ export default { | ||||
|   gap: 8px; | ||||
| } | ||||
|  | ||||
| /* .produce{ | ||||
| .produce{ | ||||
|   height: calc(100% + 38px); | ||||
| } */ | ||||
| /* .other { */ | ||||
|   /* height: calc(100% + 240px); */ | ||||
| /* } */ | ||||
| } | ||||
| .other { | ||||
|   height: calc(100% + 240px); | ||||
| } | ||||
| .copilot-footer { | ||||
|   /** position: absolute; | ||||
|   bottom: 10px; **/ | ||||
|   | ||||
| @@ -1,16 +1,16 @@ | ||||
| <template> | ||||
|   <div class="factory-layout"> | ||||
|     <FactoryDataHeader :companyName="companyName" :companyId="companyId" :period="period" | ||||
|       @update:period="updatePeriod" /> | ||||
|     <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period" | ||||
|       @update:than="updateThan" @update:period="updatePeriod" /> | ||||
|     <div class="factory-section"> | ||||
|       <section class="top flex"> | ||||
|         <db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than"> | ||||
|         <db-container title="生产监控" icon="prod"> | ||||
|           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | ||||
|             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|         </db-container> | ||||
|         <left-container title="工单监控" icon="order"> | ||||
|         <db-container title="工单监控" icon="order"> | ||||
|           <order :prodOrder="prodOrder" /> | ||||
|         </left-container> | ||||
|         </db-container> | ||||
|         <!-- <db-container title="" icon="store"> --> | ||||
|         <!-- <store :stock="stock" /> --> | ||||
|         <!-- </db-container> --> | ||||
| @@ -26,8 +26,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| @@ -39,7 +38,6 @@ export default { | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     DbContainer: Container, | ||||
|     LeftContainer: leftContainer, | ||||
|     ProdMonitor, | ||||
|     // Store, | ||||
|     // Energy, | ||||
|   | ||||
| @@ -8,9 +8,9 @@ | ||||
|           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | ||||
|             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|         </db-container> | ||||
|         <left-container title="工单监控" icon="order"> | ||||
|         <db-container title="工单监控" icon="order"> | ||||
|           <order :prodOrder="prodOrder" /> | ||||
|         </left-container> | ||||
|         </db-container> | ||||
|         <!-- <db-container title="" icon="store"> --> | ||||
|         <!-- <store :stock="stock" /> --> | ||||
|         <!-- </db-container> --> | ||||
| @@ -26,8 +26,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| @@ -39,7 +38,6 @@ export default { | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     DbContainer: Container, | ||||
|     LeftContainer: leftContainer, | ||||
|     ProdMonitor, | ||||
|     // Store, | ||||
|     // Energy, | ||||
|   | ||||
| @@ -1,36 +1,22 @@ | ||||
| <template> | ||||
|   <chart-container class="bar-chart-base"> | ||||
|     <div class="left-chart-base"> | ||||
|       <!-- <div class="legend"> | ||||
|   <div class="left-chart-base"> | ||||
|     <!-- <div class="legend"> | ||||
|       <span v-for="item in legend" :key="item.label" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }">{{ item.label }}</span> | ||||
|     </div> --> | ||||
|  | ||||
|       <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div> | ||||
|     </div> | ||||
|   </chart-container> | ||||
|     <div id="factoryEnergyChart" style="width: 100%; height: 100%"></div> | ||||
|   </div> | ||||
| </template> | ||||
| <script> | ||||
| import { debounce } from "@/utils/debounce"; | ||||
| import * as echarts from "echarts"; | ||||
| import ChartContainer from "../../components/ChartContainer.vue"; | ||||
|  | ||||
| // import CopilotButton from "./chartButton" | ||||
| export default { | ||||
|   components: { | ||||
|     ChartContainer | ||||
|     // CopilotButton, | ||||
|   }, | ||||
|   name: "Energy", | ||||
|   props: { | ||||
|     // legend: { | ||||
|     //   type: Array, | ||||
|     //   required: true, | ||||
|     // }, | ||||
|     type: { | ||||
|       type: String, | ||||
|       default:'目标产量' | ||||
|     }, | ||||
|     energyCockpits: { | ||||
|       type: Array, | ||||
|       required: true, | ||||
| @@ -41,49 +27,16 @@ export default { | ||||
|       isFullscreen: false, | ||||
|       actualOptions: null, | ||||
|       chart: "", | ||||
|       data: [], | ||||
|       orderXAxis:[], | ||||
|       // obj:{ | ||||
|       //   seriesArr: [], | ||||
|       //   targetProduceArr: [], | ||||
|       //   planIn: [], | ||||
|       //   acIn: [], | ||||
|       //   acProduceArr: [], | ||||
|       //   scrapNum: [], | ||||
|       //   processNum: [], | ||||
|       // }, | ||||
|       options: { | ||||
|         color: ["#FFD160", "#2760FF", "#12FFF5"], | ||||
|         grid: { | ||||
|           left: "6%", | ||||
|           right: "3%", | ||||
|           bottom: "15%", | ||||
|           left: "7%", | ||||
|           right: "7%", | ||||
|           bottom: "8%", | ||||
|           top: "15%", | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||
|           backgroundColor: '#001829', | ||||
|           borderColor: '#001829', | ||||
|           formatter: params => { | ||||
|             console.log('params', params) | ||||
|             var res = ``; | ||||
|             for (var i = 0, l = params.length; i < l; i++) { | ||||
|               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||
|               // console.log(item.color, color); | ||||
|               res += | ||||
|                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||
|               `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` + | ||||
|               `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`; | ||||
|             } | ||||
|             return res; | ||||
|           }, | ||||
|         }, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
| @@ -95,25 +48,11 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             interval: 0,//设置横坐标为斜 | ||||
|             rotate:45, | ||||
|             color: "rgba(255, 255, 255, 0.7)", | ||||
|             fontSize: 12, | ||||
|             // formatter: function (value) { | ||||
|             //   console.log(value); | ||||
|  | ||||
|             //   return value; | ||||
|             // }, | ||||
|           }, | ||||
|           data: [], | ||||
|         }, | ||||
|         // dataZoom: [ | ||||
|         //   { | ||||
|         //     // show: true, | ||||
|         //     start: 0, | ||||
|         //     end: 50 | ||||
|         //   } | ||||
|         //   ], | ||||
|         yAxis: { | ||||
|             type: "value", | ||||
|             name: "单位/片", | ||||
| @@ -127,7 +66,7 @@ export default { | ||||
|             }, | ||||
|             axisLabel: { | ||||
|               color: "rgba(255, 255, 255, 0.7)", | ||||
|               fontSize: 10, | ||||
|               fontSize: 12, | ||||
|             }, | ||||
|             axisLine: { | ||||
|               show: true, | ||||
| @@ -233,9 +172,6 @@ export default { | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     type(val) { | ||||
|       this.initChart() | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     // isFullscreen(val) { | ||||
|     //   this.actualOptions.series.map((item) => { | ||||
| @@ -261,9 +197,9 @@ export default { | ||||
|     //   this.actualOptions = actualOptions; | ||||
|     //   this.initOptions(actualOptions); | ||||
|     // }, | ||||
|     // energyCockpits() { | ||||
|     //   this.initChart(); | ||||
|     // }, | ||||
|     energyCockpits() { | ||||
|       this.initChart(); | ||||
|     }, | ||||
|     isOpen(val) { | ||||
|       this.canvasReset(); | ||||
|     }, | ||||
| @@ -292,81 +228,17 @@ export default { | ||||
|       }, 500)(); | ||||
|     }, | ||||
|     initChart() { | ||||
|       if (this.type === '目标产量') { | ||||
|         this.orderXAxis = [] | ||||
|         this.data = [] | ||||
|         if (this.energyCockpits) { | ||||
|           this.energyCockpits.forEach(ele => { | ||||
|             this.data.push(ele.targetProduction) | ||||
|             if (ele.workOrderNumber.length > 4) { | ||||
|               ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + ".."; | ||||
|             } | ||||
|             this.orderXAxis.push(ele.workOrderNumber) | ||||
|           }); | ||||
|         } | ||||
|         // this.initChart(targetProduceArr, orderXAxis) | ||||
|       } else if (this.type === '计划投入') { | ||||
|         this.orderXAxis = [] | ||||
|         this.data = [] | ||||
|         if (this.energyCockpits) { | ||||
|           this.energyCockpits.forEach(ele => { | ||||
|             this.data.push(ele.plannedInvestment) | ||||
|             if (ele.workOrderNumber.length > 4) { | ||||
|               ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + ".."; | ||||
|             } | ||||
|             this.orderXAxis.push(ele.workOrderNumber) | ||||
|           }); | ||||
|         } | ||||
|       } else if (this.type === '实际投入') { | ||||
|         this.orderXAxis = [] | ||||
|         this.data = [] | ||||
|         if (this.energyCockpits) { | ||||
|           this.energyCockpits.forEach(ele => { | ||||
|             this.data.push(ele.actualInvestment) | ||||
|             if (ele.workOrderNumber.length > 4) { | ||||
|               ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + ".."; | ||||
|             } | ||||
|             this.orderXAxis.push(ele.workOrderNumber) | ||||
|           }); | ||||
|         } | ||||
|       } else if (this.type === '实际产出') { | ||||
|         this.orderXAxis = [] | ||||
|         this.data = [] | ||||
|         if (this.energyCockpits) { | ||||
|           this.energyCockpits.forEach(ele => { | ||||
|             this.data.push(ele.actualProduction) | ||||
|             if (ele.workOrderNumber.length > 4) { | ||||
|               ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + ".."; | ||||
|             } | ||||
|             this.orderXAxis.push(ele.workOrderNumber) | ||||
|           }); | ||||
|         } | ||||
|       } else if (this.type === '废品数量') { | ||||
|         this.orderXAxis = [] | ||||
|         this.data  = [] | ||||
|         if (this.energyCockpits) { | ||||
|           this.energyCockpits.forEach(ele => { | ||||
|             this.data.push(ele.wasteNum) | ||||
|             if (ele.workOrderNumber.length > 4) { | ||||
|               ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + ".."; | ||||
|             } | ||||
|             this.orderXAxis.push(ele.workOrderNumber) | ||||
|           }); | ||||
|         } | ||||
|       } else if (this.type === '待再加工') { | ||||
|         this.orderXAxis = [] | ||||
|         this.data = [] | ||||
|         if (this.energyCockpits) { | ||||
|           this.energyCockpits.forEach(ele => { | ||||
|             console.log(ele.reworkNum); | ||||
|             this.data.push(ele.reworkNum) | ||||
|             if (ele.workOrderNumber.length > 4) { | ||||
|               ele.workOrderNumber = ele.workOrderNumber.substring(0, 4) + ".."; | ||||
|             } | ||||
|             this.orderXAxis.push(ele.workOrderNumber) | ||||
|           }); | ||||
|         } | ||||
|       } | ||||
|       console.log("this.energyCockpits", this.energyCockpits); | ||||
|       let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量']; | ||||
|       // let n = 0; | ||||
|       let seriesArr =[] | ||||
|       seriesArr[0] = this.energyCockpits.length != 0 && this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0 | ||||
|       seriesArr[1] = this.energyCockpits.length != 0 && this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0 | ||||
|       seriesArr[2] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0 | ||||
|       seriesArr[3] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualProduction ? this.energyCockpits[0].actualProduction : 0 | ||||
|       seriesArr[4] = this.energyCockpits.length != 0 && this.energyCockpits[0].wasteNum ? this.energyCockpits[0].wasteNum : 0 | ||||
|       seriesArr[5] = this.energyCockpits.length != 0 && this.energyCockpits[0].reworkNum ? this.energyCockpits[0].reworkNum : 0 | ||||
|       console.log(seriesArr); | ||||
|  | ||||
|       // let seriesArr = [ | ||||
|       //   { | ||||
| @@ -408,21 +280,20 @@ export default { | ||||
|       //     } | ||||
|       //   } | ||||
|       // } | ||||
|  | ||||
|       if (this.chart) { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(document.getElementById("factoryEnergyChart")); | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       actualOptions.xAxis.data = orderXAxis; | ||||
|       actualOptions.series[0].data = seriesArr; | ||||
|       // actualOptions.series[0].name = seriesArr[0].name; | ||||
|       // actualOptions.series[1].data = seriesArr[1].data; | ||||
|       // actualOptions.series[1].name = seriesArr[1].name; | ||||
|       // actualOptions.series[2].data = seriesArr[2].data; | ||||
|       // actualOptions.series[2].name = seriesArr[2].name; | ||||
|       if (this.chart) { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(document.getElementById("factoryEnergyChart")); | ||||
|       // const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       this.options.xAxis.data = this.orderXAxis; | ||||
|       this.options.series[0].data = this.data; | ||||
|       // this.actualOptions = actualOptions; | ||||
|       this.chart.setOption(this.options); | ||||
|       this.actualOptions = actualOptions; | ||||
|       this.chart.setOption(actualOptions); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-30 08:58:39 | ||||
|  * @LastEditTime: 2024-07-02 10:53:34 | ||||
|  * @LastEditTime: 2024-05-30 10:38:32 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -11,7 +11,7 @@ | ||||
|       <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | ||||
|     </div> | ||||
|     <div ref="oeeChart" style="height:100%"></div> | ||||
|     <div ref="oeeChart" style="height:96%;width:100%"></div> | ||||
|   </chart-container> | ||||
| </template> | ||||
|  | ||||
| @@ -62,59 +62,7 @@ export default { | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         // tooltip: { | ||||
|         //   trigger: "axis", | ||||
|         //   axisPointer: { | ||||
|         //     // type: "cross", | ||||
|         //     crossStyle: { | ||||
|         //       color: "rgba(237,237,237,0.5)", | ||||
|         //     }, | ||||
|         //   }, | ||||
|         //   extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||
|         //   backgroundColor: '#001829', | ||||
|         //   borderColor: '#001829', | ||||
|         //   // textStyle: { | ||||
|         //   //   color:'rgba(255, 255, 255, 0.85)' | ||||
|         //   // }, | ||||
|         //   formatter: params => { | ||||
|         //     console.log('params', params) | ||||
|         //     var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||
|         //     for (var i = 0, l = params.length; i < l; i++) { | ||||
|         //       res += | ||||
|         //         "<br/>" + | ||||
|         //         `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` + | ||||
|         //         `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].seriesName}</span>` + | ||||
|         //         `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value}</span>`; | ||||
|         //     } | ||||
|         //     return res; | ||||
|         //   }, | ||||
|         // }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|             extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||
|             backgroundColor: '#001829', | ||||
|           borderColor: '#001829', | ||||
|             formatter: params => { | ||||
|               console.log('params', params) | ||||
|               var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||
|               for (var i = 0, l = params.length; i < l; i++) { | ||||
|                 let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||
|                 // console.log(item.color, color); | ||||
|                 res += | ||||
|                   "<br/>" + | ||||
|                   `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||
|                   `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||
|                   `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`; | ||||
|               } | ||||
|               return res; | ||||
|             }, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -131,11 +79,10 @@ export default { | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           name: "单位/%", | ||||
|           nameTextStyle: { | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -158,7 +105,7 @@ export default { | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "FTO", // this.series[0].name, | ||||
|             name: "fto", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
| @@ -226,11 +173,32 @@ export default { | ||||
|           }, | ||||
|           { | ||||
|             name: "", // "2024年目标值", | ||||
|             type: "line", | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color:'#f3c000' | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#f3c000", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "#f3c00033", | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "transparent", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
| @@ -253,12 +221,12 @@ export default { | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       this.options.series.map((item) => { | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       // if (val === false && this.isOpen === true) { | ||||
|       //   console.log(val) | ||||
|       //   this.width = 97 + '%' | ||||
| @@ -273,7 +241,7 @@ export default { | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.initChart(this.options) | ||||
|       this.initChart(this.actualOptions) | ||||
|       this.canvasReset() | ||||
|     }, | ||||
|     series(val) { | ||||
| @@ -283,17 +251,16 @@ export default { | ||||
|       } | ||||
|       // console.log('val', val) | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)) | ||||
|       console.log(actualOptions); | ||||
|       // actualOptions.xAxis.data = val | ||||
|       console.log(actualOptions) | ||||
|       this.options.series[0].data = val[0].data; | ||||
|       this.options.series[0].name = val[0].name; | ||||
|       this.options.series[1].data = val?.[1]?.data; | ||||
|       this.options.series[1].name = val?.[1]?.name; | ||||
|       this.options.series[2].data = val?.[2]?.data || []; | ||||
|       this.options.series[2].name = val?.[2]?.name || ""; | ||||
|       actualOptions.series[0].data = val[0].data; | ||||
|       actualOptions.series[0].name = val[0].name; | ||||
|       actualOptions.series[1].data = val?.[1]?.data; | ||||
|       actualOptions.series[1].name = val?.[1]?.name; | ||||
|       actualOptions.series[2].data = val?.[2]?.data || []; | ||||
|       actualOptions.series[2].name = val?.[2]?.name || ""; | ||||
|       this.actualOptions = actualOptions; | ||||
|       this.initChart(this.options); | ||||
|       this.initChart(actualOptions); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
| @@ -330,7 +297,7 @@ export default { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(this.$refs.oeeChart); | ||||
|       this.chart.setOption(this.options); | ||||
|       this.chart.setOption(this.actualOptions); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| @@ -342,14 +309,14 @@ export default { | ||||
|  | ||||
|   .legend { | ||||
|     position: absolute; | ||||
|     top: 3vh; | ||||
|     right: 13vw; | ||||
|     top: 5.2vh; | ||||
|     right: 1vw; | ||||
|   } | ||||
|  | ||||
|   .legend-item { | ||||
|     position: relative; | ||||
|     // font-size: 12px; | ||||
|     margin-right:1.2vw; | ||||
|     margin-right: 1.3vw; | ||||
|  | ||||
|     &::before { | ||||
|       content: ""; | ||||
| @@ -361,9 +328,7 @@ export default { | ||||
|       margin-right: 0.22vw; | ||||
|     } | ||||
|   } | ||||
|   .legend-item:nth-child(3) { | ||||
|       margin-left: 1vw; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(1):before { | ||||
|     background-color: #12f7f1; | ||||
|   } | ||||
| @@ -371,37 +336,8 @@ export default { | ||||
|   .legend-item:nth-child(2):before { | ||||
|     background-color: #58adfa; | ||||
|   } | ||||
|  .legend-item:nth-child(3):before { | ||||
|    // width: 12px; | ||||
|    // height: 2px; | ||||
|    width: 1vw; | ||||
|    height: 0.1064vw; | ||||
|    background-color: #f3c000; | ||||
|    position: absolute; | ||||
|    top: 50%; | ||||
|    // left: -16px; | ||||
|    left: -0.951vw; | ||||
|    transform: translateY(-50%); | ||||
|  } | ||||
|  | ||||
|  .legend-item:nth-child(3):after { | ||||
|    background-color: #f3c000; | ||||
|    content: ""; | ||||
|    display: inline-block; | ||||
|    position: absolute; | ||||
|    // width: 6px; | ||||
|    // height: 6px; | ||||
|    width: 0.3191vw; | ||||
|    height: 0.3191vw; | ||||
|    border-radius: 100%; | ||||
|    top: 50%; | ||||
|    left: -0.851vw; | ||||
|    // left: -16px; | ||||
|    transform: translateY(-50%) translateX(50%); | ||||
|  } | ||||
|   .legend-item:nth-child(3):before { | ||||
|     background-color: #f3c000; | ||||
|   } | ||||
| } | ||||
|  .echarts-tooltip-dark { | ||||
|    background: #001829; | ||||
|  | ||||
|  } | ||||
| </style> | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-29 14:48:06 | ||||
|  * @LastEditTime: 2024-06-18 14:49:25 | ||||
|  * @LastEditTime: 2024-05-30 10:54:00 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -41,7 +41,7 @@ export default { | ||||
|   }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["FTO投入", "芯片产量", "标准组件产量"]; | ||||
|     const cities = ["fto投入", "芯片产量", "标准组件产量"]; | ||||
|     return { | ||||
|       // xAxis: cities, | ||||
|     }; | ||||
| @@ -49,25 +49,13 @@ export default { | ||||
|   computed: { | ||||
|     xAxis() { | ||||
|       console.log(' this.companyId', this.companyId); | ||||
|       return this.companyId === 0 ? ["FTO投入", "芯片产量", "标准组件产量"] : ["FTO投入", "芯片产量", "标准组件产量", 'BIPV产量']; | ||||
|       return this.companyId === 0 ? ["fto投入", "芯片产量", "标准组件产量"] : ["fto投入", "芯片产量", "标准组件产量", 'BIPV产量']; | ||||
|     }, | ||||
|     legend() { | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
|       // var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日'; | ||||
|       // const today = new Date().getDate(); | ||||
|       // let yesterday = new Date().getDate() -1; | ||||
|       // const month = new Date().getMonth() + 1; | ||||
|       // const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1; | ||||
|       // const year = new Date().getFullYear(); | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
| @@ -77,22 +65,19 @@ export default { | ||||
|       const month = new Date().getMonth() + 1; | ||||
|       const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1; | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === 1 && this.than === '同比') { | ||||
|       if (this.period === 1  && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年${yesterday}累计` }, | ||||
|           { label: `${yesterday}日累计`, }, | ||||
|  | ||||
|           // { label: `${month}月${today}日目标`, }, | ||||
|           { label: `去年${month}月${today}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === 1 && this.than === '环比') { | ||||
|       } else if (this.period ===1 && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${dayBeYes}日累计` }, | ||||
|           { label: `${yesterday}日累计` }, | ||||
|           // { label: `${month}月${today}日目标`, }, | ||||
|           { label: `${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === 2 && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `去年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === 2 && this.than === '环比') { | ||||
| @@ -102,7 +87,7 @@ export default { | ||||
|         ]; | ||||
|       } else if (this.period === 3 && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `去年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
| @@ -173,11 +158,8 @@ function getTemplate(period, dataList, than) { | ||||
|   // console.log('dataList',dataList); | ||||
|   let items = []; | ||||
|   var day1 = new Date(); | ||||
|   var day2 = new Date(); | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|   day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|   var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|   //今天的时间 | ||||
|   // var day2 = new Date(); | ||||
|   // day2.setTime(day2.getTime()); | ||||
| @@ -190,11 +172,11 @@ function getTemplate(period, dataList, than) { | ||||
|   if (period === 1 && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year - 1}年${yesterday}日`, | ||||
|         name: `去年${month}月${today}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
| @@ -202,11 +184,11 @@ function getTemplate(period, dataList, than) { | ||||
|   } else if (period ===1 && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${dayBeYes}日`, | ||||
|         name: `${yesterday}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
| @@ -214,7 +196,7 @@ function getTemplate(period, dataList, than) { | ||||
|   } else if (period === 2 && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年本周`, | ||||
|         name: `去年本周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -238,7 +220,7 @@ function getTemplate(period, dataList, than) { | ||||
|   } else if (period === 3 && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年${month}月`, | ||||
|         name: `去年${month}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:48:37 | ||||
|  * @LastEditTime: 2024-06-05 09:53:49 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!--  | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
| @@ -16,7 +9,7 @@ | ||||
|   <div class="copilot-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button | ||||
|       v-if="0" | ||||
|       v-if="false" | ||||
|       style=" | ||||
|         appearance: none; | ||||
|         outline: none; | ||||
| @@ -29,7 +22,7 @@ | ||||
|         right: 8px; | ||||
|       " | ||||
|       @click="$emit('refresh')" | ||||
|     >rotate | ||||
|     > | ||||
|       <svg | ||||
|         xmlns="http://www.w3.org/2000/svg" | ||||
|         fill="none" | ||||
| @@ -48,14 +41,14 @@ | ||||
|     <!-- decoration  --> | ||||
|     <div class="corner tl"></div> | ||||
|     <div class="corner tr"></div> | ||||
|     <div class="corner bl"></div> | ||||
|     <div class="corner br"></div> | ||||
|     <div v-if="side == 'left'" class="corner bl"></div> | ||||
|     <div v-if="side == 'right'" class="corner br"></div> | ||||
|     <!-- content  --> | ||||
|     <div | ||||
|       class="container-head" | ||||
|       :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" | ||||
|     > | ||||
|       <Icon  :icon="icon"></Icon> | ||||
|       <Icon :icon="icon"></Icon> | ||||
|       <h2 class="container-title">{{ title }}</h2> | ||||
|     </div> | ||||
|     <div | ||||
| @@ -1,19 +1,14 @@ | ||||
| <template> | ||||
|   <div class="order-container"> | ||||
|     <div class="table"> | ||||
|       <dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%; color: rgba(255, 255, 255, .6);" ref="orderScrollBoard" /> | ||||
|       <dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%" ref="orderScrollBoard" /> | ||||
|     </div> | ||||
|     <div class="chart"> | ||||
|       <div class="chart-title"> | ||||
|         <span class="title">工单情况</span> | ||||
|         <span class="title">生产情况</span> | ||||
|         <span class="line"></span> | ||||
|       </div> | ||||
|       <div class="button-type" style="margin-left: auto;position: absolute;right: 3%;top: 57%;z-index: 999;"> | ||||
|         <CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i" | ||||
|           :active="i === type" @click="() => $emit('update:type', i)" /> | ||||
|       </div> | ||||
|       <barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" | ||||
|         style="height: 0;flex:1"></barChartBase> | ||||
|       <barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase> | ||||
|     </div> | ||||
|   </div> | ||||
|  | ||||
| @@ -21,18 +16,14 @@ | ||||
| <script> | ||||
| import { debounce } from "@/utils/debounce"; | ||||
| import barChartBase from './BarChartBase' | ||||
| // import barChartBase from './BarChartBase' | ||||
| import CopilotButton from "./chartButton" | ||||
| export default { | ||||
|   name: "Order", | ||||
|   components: { | ||||
|     barChartBase, | ||||
|     CopilotButton, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       showTable: true, | ||||
|       // type: '目标产量', | ||||
|       config: { | ||||
|         header: ["工单号", "工单状态", "计划投入", "实际投入", "目标产量", "实际产量", "生产进度"], | ||||
|         headerBGC: "rgba(0, 106, 205, 0.22)", | ||||
| @@ -41,17 +32,13 @@ export default { | ||||
|         data: [], | ||||
|         rowNum: 12, | ||||
|         waitTime: 3000, | ||||
|         columnWidth: [150], | ||||
|         align: ["left"], | ||||
|         columnWidth: [100], | ||||
|         align: ["center"], | ||||
|         carousel: "page", | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   props: { | ||||
|     type: { | ||||
|       type: String, | ||||
|       default: "目标产量", | ||||
|     }, | ||||
|     prodOrder: { | ||||
|       type: Array, | ||||
|       default: [], | ||||
| @@ -71,18 +58,9 @@ export default { | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     window.addEventListener("resize", this.tableReset) | ||||
|     this.$nextTick(() => { | ||||
|       let button = document.getElementsByClassName('button-type') | ||||
|       console.log(button); | ||||
|       button[0].children[0].style.borderRadius = '4px 0 0 4px' | ||||
|       button[0].children[5].style.borderRadius = '0px 4px 4px 0px' | ||||
|       // children[5].classList.add('skate') | ||||
|       // console.log(button[0].children[5].classList); | ||||
|     }); | ||||
|     window.addEventListener("resize", this.tableReset); | ||||
|   }, | ||||
|   methods: { | ||||
|  | ||||
|     tableReset() { | ||||
|       this.showTable = false; | ||||
|       debounce(() => { | ||||
| @@ -101,37 +79,51 @@ export default { | ||||
|           arr.push( | ||||
|             `<span title=${this.prodOrder[i].workOrderNumber || ""}>${ | ||||
|             this.prodOrder[i].workOrderNumber || "" | ||||
|             }</span>`, | ||||
|               `<span title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || "" | ||||
|               }</span>`, | ||||
|               `<span title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || "" | ||||
|               }</span>`, | ||||
|               `<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || "" | ||||
|               }</span>`, | ||||
|               `<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || "" | ||||
|               }</span>`, | ||||
|               `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" | ||||
|               }</span>`, | ||||
|               `<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress | ||||
|                 ? this.prodOrder[i].productionProgress.toFixed(0) + "%" | ||||
|                 : "0%" | ||||
|               }</span> | ||||
|             }</span>` | ||||
|           ); | ||||
|           arr.push( | ||||
|             `<span title=${this.prodOrder[i].inStatus || ""}>${ | ||||
|             this.prodOrder[i].inStatus || "" | ||||
|             }</span>` | ||||
|           ); | ||||
|           arr.push( | ||||
|             `<span title=${this.prodOrder[i].plannedInvestment || ""}>${ | ||||
|             this.prodOrder[i].plannedInvestment || "" | ||||
|             }</span>` | ||||
|           ); | ||||
|           arr.push( | ||||
|             `<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || "" | ||||
|             }</span>` | ||||
|           ); | ||||
|           arr.push( | ||||
|             `<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || "" | ||||
|             }</span>` | ||||
|           ); | ||||
|           arr.push( | ||||
|             `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" | ||||
|             }</span>` | ||||
|           ); | ||||
|           arr.push(`<span style="display:inline-block;width:45px;">${ | ||||
|             this.prodOrder[i].productionProgress | ||||
|             ? this.prodOrder[i].productionProgress.toFixed(0) + "%" | ||||
|               : "0%" | ||||
|           }</span> | ||||
|             <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;"> | ||||
|             <svg xmlns="http://www.w3.org/200/svg" height="20" width="20"> | ||||
|               <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/> | ||||
|               <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress | ||||
|                 ? this.prodOrder[i].productionProgress.toFixed(0) * | ||||
|                 37.68 * | ||||
|                 0.01 + | ||||
|                 "," + | ||||
|                 (1 - | ||||
|                   this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * | ||||
|                 37.68 | ||||
|                 : 0 + "," + 37.68 | ||||
|               <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${ | ||||
|             this.prodOrder[i].productionProgress | ||||
|             ? this.prodOrder[i].productionProgress.toFixed(0) * | ||||
|                       37.68 * | ||||
|                       0.01 + | ||||
|                     "," + | ||||
|                     (1 - | ||||
|               this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * | ||||
|                       37.68 | ||||
|                   : 0 + "," + 37.68 | ||||
|               }"/> | ||||
|             </svg> | ||||
|           </div>` | ||||
|           ) | ||||
|           </div>`); | ||||
|           outArr.push(arr); | ||||
|         } | ||||
|         this.config.data = outArr; | ||||
| @@ -188,7 +180,7 @@ export default { | ||||
|               height: 1px; // display: inline-block; | ||||
|               border: 1px solid; | ||||
|               // display: inline-block; | ||||
|               border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 0%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2; | ||||
|               border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2; | ||||
|               backdrop-filter: blur(3px); | ||||
|             } | ||||
|           } | ||||
|   | ||||
| @@ -8,11 +8,11 @@ | ||||
|         </div> | ||||
|         <div class="middle-box"> | ||||
|           <span class="type">玻璃类型</span> | ||||
|           <span class="type-name">FTO</span> | ||||
|           <span class="type-name">FTO投入</span> | ||||
|         </div> | ||||
|         <div class="right-box"> | ||||
|           <span class="type">投入数量</span> | ||||
|           <span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span> | ||||
|           <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div class="std-box"> | ||||
| @@ -23,13 +23,13 @@ | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">玻璃类型</span> | ||||
|               <span class="type-name">标准组件</span> | ||||
|               <span class="type-name">标准组检产量</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|                 msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -38,12 +38,12 @@ | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|                 msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
|               <span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span> | ||||
|               <span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -56,13 +56,13 @@ | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">玻璃类型</span> | ||||
|               <span class="type-name">芯片</span> | ||||
|               <span class="type-name">芯片产量</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|                 msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -71,12 +71,12 @@ | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|                 msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
|               <span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span> | ||||
|               <span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -89,13 +89,13 @@ | ||||
|           <div class="separate"> | ||||
|             <div> | ||||
|               <span class="type">玻璃类型</span> | ||||
|               <span class="type-name">BIPV</span> | ||||
|               <span class="type-name">BIPV产量</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type">良品数量</span> | ||||
|               <span class="type-name">{{ | ||||
|                 msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -104,12 +104,12 @@ | ||||
|             <div> | ||||
|               <span class="type">生产数量</span> | ||||
|               <span class="num">{{ | ||||
|                 msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 | ||||
|                 }}</span> | ||||
|               msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0 | ||||
|               }}</span> | ||||
|             </div> | ||||
|             <div> | ||||
|               <span class="type1">良品率</span> | ||||
|               <span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span> | ||||
|               <span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
| @@ -118,11 +118,7 @@ | ||||
|     <div class="chart"> | ||||
|       <div class="chart-title"> | ||||
|         <span class="title">生产情况</span> | ||||
|         <div class="button-than" style="position: absolute;right: 3%;"> | ||||
|           <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than" | ||||
|             @click="() => $emit('update:than', i)" /> | ||||
|         </div> | ||||
|         <!-- <span class="line"></span> --> | ||||
|         <span class="line"></span> | ||||
|       </div> | ||||
|       <barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart" | ||||
|         style="height: 0;flex:1"> | ||||
| @@ -133,12 +129,11 @@ | ||||
| <script> | ||||
| import { number } from 'echarts'; | ||||
| import barChartBase from './ChipOee' | ||||
| import CopilotButton from "./button.vue" | ||||
|  | ||||
| export default { | ||||
|   name: "ProdMonitor", | ||||
|   components: { | ||||
|     barChartBase, | ||||
|     CopilotButton | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
| @@ -159,9 +154,6 @@ export default { | ||||
|       type: Number, | ||||
|       default:0 | ||||
|     }, | ||||
|     than: { | ||||
|       type: String, | ||||
|     }, | ||||
|     than: { | ||||
|       type: String, | ||||
|       default: '同比', | ||||
| @@ -190,13 +182,6 @@ export default { | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.makeData(); | ||||
|     this.$nextTick(() => { | ||||
|       let button = document.getElementsByClassName('button-than') | ||||
|       console.log(button); | ||||
|       button[0].children[0].style.borderRadius = '4px 0 0 4px' | ||||
|       button[0].children[1].style.borderRadius = '0px 4px 4px 0' | ||||
|       console.log(button[0].children[0].style); | ||||
|     }) | ||||
|   }, | ||||
|   methods: { | ||||
|     makeData() { | ||||
| @@ -253,15 +238,15 @@ export default { | ||||
|           font-style: normal; | ||||
|           display: inline-block; | ||||
|       } | ||||
|       // .line{ | ||||
|       //   flex: 1; | ||||
|       //   // width: 80%; | ||||
|       //   height: 1px;        // display: inline-block; | ||||
|       //   border: 1px solid; | ||||
|       //   // display: inline-block; | ||||
|       //   border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2; | ||||
|       //   backdrop-filter: blur(3px); | ||||
|       // } | ||||
|       .line{ | ||||
|         flex: 1; | ||||
|         // width: 80%; | ||||
|         height: 1px;        // display: inline-block; | ||||
|         border: 1px solid; | ||||
|         // display: inline-block; | ||||
|         border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2; | ||||
|         backdrop-filter: blur(3px); | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   .data{ | ||||
|   | ||||
| @@ -1,99 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-06 14:22:56 | ||||
|  * @LastEditTime: 2024-06-07 10:53:39 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <button | ||||
|     class="copilot-btn" | ||||
|     :class="[active ? 'active' : '']" | ||||
|     @click="$emit('click', label)" | ||||
|   > | ||||
|     {{ label }} | ||||
|   </button> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "CopilotButton", | ||||
|   props: { | ||||
|     label: { | ||||
|       type: String, | ||||
|       required: true, | ||||
|     }, | ||||
|     active: { | ||||
|       type: Boolean, | ||||
|       default: false, | ||||
|     }, | ||||
|   }, | ||||
|  | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style> | ||||
|  | ||||
| button { | ||||
|   appearance: none; | ||||
|   outline: none; | ||||
|   border: none; | ||||
|   background: none; | ||||
| } | ||||
| </style> | ||||
|  | ||||
| <style scoped> | ||||
| .copilot-btn { | ||||
|   /* flex: 1; */ | ||||
|   /* position: relative; */ | ||||
|   width: 88px; | ||||
|   height: 32px; | ||||
|   background: #01306C; | ||||
|   /* border-radius: 4px 0px 0px 4px; */ | ||||
|   backdrop-filter: blur(3px); | ||||
|   /* text-align: center; | ||||
|   padding: 12px; | ||||
|   padding-left: 20px; | ||||
|   color: #fff; | ||||
|   font-size: 18px; */ | ||||
|   font-family: PingFangSC, PingFang SC; | ||||
|   font-weight: 400; | ||||
|   font-size: 16px; | ||||
|   color: #FFFFFF; | ||||
|   line-height: 22px; | ||||
|   letter-spacing: 5px; | ||||
|   text-align: center; | ||||
|   font-style: normal; | ||||
|   letter-spacing: 10px; | ||||
|   cursor: pointer; | ||||
| } | ||||
|  | ||||
| .copilot-btn.active { | ||||
|   background: #1D74D8; | ||||
|   /* border-radius: 4px;; */ | ||||
| } | ||||
| /* .copilot-btn::before, | ||||
| .copilot-btn::after { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   width: 16px; | ||||
|   height: 16px; | ||||
|   top: 0; | ||||
|   background: transparent; | ||||
|   border-style: solid; | ||||
|   border-width: 2px; | ||||
|   border-color: transparent; | ||||
|   border-top-color: #007be4; | ||||
| } | ||||
|  | ||||
| .copilot-btn::before { | ||||
|   left: 0; | ||||
|   border-left-color: #007be4; | ||||
| } | ||||
|  | ||||
| .copilot-btn::after { | ||||
|   right: 0; | ||||
|   border-right-color: #007be4; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,148 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-07 08:37:17 | ||||
|  * @LastEditTime: 2024-06-07 11:04:41 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <button | ||||
|     class="chart-btn" | ||||
|     :class="[active ? 'active' : '']" | ||||
|     @click="$emit('click', label)" | ||||
|   > | ||||
|     {{ label }} | ||||
|   </button> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
|   name: "CopilotButton", | ||||
|   props: { | ||||
|     label: { | ||||
|       type: String, | ||||
|       required: true, | ||||
|     }, | ||||
|     active: { | ||||
|       type: Boolean, | ||||
|       default: false, | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style> | ||||
| button { | ||||
|   appearance: none; | ||||
|   outline: none; | ||||
|   border: none; | ||||
|   background: none; | ||||
| } | ||||
| </style> | ||||
|  | ||||
| <style scoped> | ||||
| .skate { | ||||
|   /* flex: 1; */ | ||||
|   position: relative; | ||||
|   width: 88px; | ||||
|   height: 32px; | ||||
|   background: #01306C; | ||||
|   /* border-radius: 4px 0px 0px 4px; */ | ||||
|   backdrop-filter: blur(3px); | ||||
|   /* text-align: center; | ||||
|   padding: 12px; | ||||
|   padding-left: 20px; | ||||
|   color: #fff; | ||||
|   font-size: 18px; */ | ||||
|   font-family: PingFangSC, PingFang SC; | ||||
|   font-weight: 400; | ||||
|   font-size: 12px; | ||||
|   color: #FFFFFF; | ||||
|   line-height: 22px; | ||||
|   letter-spacing: 5px; | ||||
|   text-align: center; | ||||
|   font-style: normal; | ||||
|   /* margin-right: 1px; */ | ||||
|   /* letter-spacing: 10px; */ | ||||
|   cursor: pointer; | ||||
| } | ||||
|  | ||||
| .chart-btn:nth-child(6)::after { | ||||
|   content: ''; | ||||
|   width: 0; | ||||
|   height: 0; | ||||
|   display: none; | ||||
| } | ||||
| .chart-btn { | ||||
|   /* flex: 1; */ | ||||
|   position: relative; | ||||
|   width: 88px; | ||||
|   height: 32px; | ||||
|   background: #01306C; | ||||
|   /* border-radius: 4px 0px 0px 4px; */ | ||||
|   backdrop-filter: blur(3px); | ||||
|   /* text-align: center; | ||||
|   padding: 12px; | ||||
|   padding-left: 20px; | ||||
|   color: #fff; | ||||
|   font-size: 18px; */ | ||||
|   font-family: PingFangSC, PingFang SC; | ||||
|   font-weight: 400; | ||||
|   font-size: 12px; | ||||
|   color: #FFFFFF; | ||||
|   line-height: 22px; | ||||
|   letter-spacing: 5px; | ||||
|   text-align: center; | ||||
|   font-style: normal; | ||||
|   /* margin-right: 1px; */ | ||||
|   /* letter-spacing: 10px; */ | ||||
|   cursor: pointer; | ||||
| } | ||||
| .chart-btn::after { | ||||
|   /* flex: 1; */ | ||||
|   /* position: relative; */ | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|     /* width: 16px; */ | ||||
|     /* height: 16px; */ | ||||
|   top: px; | ||||
|   right: -1px; | ||||
|   width: 1px; | ||||
|   height: 23px; | ||||
|   border: 1px solid #010D18; | ||||
| } | ||||
| .chart-btn.active { | ||||
|   background: #1D74D8; | ||||
|   /* border-radius: 4px;; */ | ||||
| } | ||||
| .chart-btn.active::after { | ||||
|   display: none; | ||||
|   /* border-radius: 4px;; */ | ||||
| } | ||||
| /* .copilot-btn::before, | ||||
| .copilot-btn::after { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   width: 16px; | ||||
|   height: 16px; | ||||
|   top: 0; | ||||
|   background: transparent; | ||||
|   border-style: solid; | ||||
|   border-width: 2px; | ||||
|   border-color: transparent; | ||||
|   border-top-color: #007be4; | ||||
| } | ||||
|  | ||||
| .copilot-btn::before { | ||||
|   left: 0; | ||||
|   border-left-color: #007be4; | ||||
| } | ||||
|  | ||||
| .copilot-btn::after { | ||||
|   right: 0; | ||||
|   border-right-color: #007be4; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,222 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:36:07 | ||||
|  * @LastEditTime: 2024-06-05 09:38:23 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 10:44:09 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="copilot-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button v-if="false" style=" | ||||
|         appearance: none; | ||||
|         outline: none; | ||||
|         border: none; | ||||
|         background: none; | ||||
|         color: #fff; | ||||
|         cursor: pointer; | ||||
|         position: absolute; | ||||
|         top: 8px; | ||||
|         right: 8px; | ||||
|       " @click="$emit('refresh')"> | ||||
|       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | ||||
|         style="width: 24px; height: 24px"> | ||||
|         <path stroke-linecap="round" stroke-linejoin="round" | ||||
|           d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /> | ||||
|       </svg> | ||||
|     </button> | ||||
|     <!-- decoration  --> | ||||
|     <div class="corner tl"></div> | ||||
|     <div class="corner tr"></div> | ||||
|     <div class="corner bl"></div> | ||||
|     <div class="corner br"></div> | ||||
|     <!-- content  --> | ||||
|     <div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"> | ||||
|       <Icon style="margin-left: 16px;" :icon="icon"></Icon> | ||||
|       <h2 class="container-title">{{ title }}</h2> | ||||
|     </div> | ||||
|     <div class="container-body" :class="[ | ||||
|         side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | ||||
|       ]"> | ||||
|       <slot /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import ContainerIconVue from "./ContainerIcon.vue"; | ||||
| export default { | ||||
|   name: "DashboardContainer", | ||||
|   components: { | ||||
|     Icon: ContainerIconVue, | ||||
|   }, | ||||
|   props: { | ||||
|     side: { | ||||
|       type: String, | ||||
|       default: "left", | ||||
|     }, | ||||
|     icon: { | ||||
|       type: String, | ||||
|       default: "cube", | ||||
|     }, | ||||
|     title: { | ||||
|       type: String, | ||||
|       default: "Default Title", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return {}; | ||||
|   }, | ||||
|   computed: {}, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 100%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 30%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 60%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, #024798, transparent); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .container-body { | ||||
|     padding: 12px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     flex: 1; | ||||
|     height: 0; | ||||
|   } | ||||
|  | ||||
|   .corner { | ||||
|     z-index: 1; | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
|  | ||||
|   .corner.tl { | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-left: 2px solid #0175dc; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|   } | ||||
|  | ||||
|   .corner.tr { | ||||
|     top: 0; | ||||
|     right: 0; | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-right: 2px solid #0175dc; | ||||
|   } | ||||
|  | ||||
|   .corner.bl { | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     bottom: 0; | ||||
|     left: 0; | ||||
|     // border-left: 10px solid #0175dc; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid transparent; | ||||
|     border-left: 0.532vw solid transparent; | ||||
|     border-bottom: .6vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid transparent; | ||||
|   } | ||||
|  | ||||
|   .corner.br { | ||||
|     bottom: 0; | ||||
|     right: 0; | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     border-left: 0.532vw solid transparent; | ||||
|     border-bottom: 0.532vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid #0175dc; | ||||
|     // border-left: 10px solid transparent; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid #0175dc; | ||||
|     // transform: rotate(-90deg); | ||||
|  | ||||
|   } | ||||
|  | ||||
|   .gradient-to-right { | ||||
|     background: linear-gradient(to right, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .gradient-to-left { | ||||
|     background: linear-gradient(to left, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-right { | ||||
|     background: linear-gradient(to right, #0003, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-left { | ||||
|     background: linear-gradient(to left, #0003, transparent); | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,219 +0,0 @@ | ||||
| <!-- | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 10:44:09 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="copilot-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button v-if="false" style=" | ||||
|         appearance: none; | ||||
|         outline: none; | ||||
|         border: none; | ||||
|         background: none; | ||||
|         color: #fff; | ||||
|         cursor: pointer; | ||||
|         position: absolute; | ||||
|         top: 8px; | ||||
|         right: 8px; | ||||
|       " @click="$emit('refresh')"> | ||||
|       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" | ||||
|         style="width: 24px; height: 24px"> | ||||
|         <path stroke-linecap="round" stroke-linejoin="round" | ||||
|           d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" /> | ||||
|       </svg> | ||||
|     </button> | ||||
|     <!-- decoration  --> | ||||
|     <div class="corner tl"></div> | ||||
|     <div class="corner tr"></div> | ||||
|     <div class="corner bl"></div> | ||||
|     <div class="corner br"></div> | ||||
|     <!-- content  --> | ||||
|     <div class="container-head" ref="container-head" | ||||
|       :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']"> | ||||
|       <Icon  :icon="icon"></Icon> | ||||
|       <h2 class="container-title">{{ title }}</h2> | ||||
|     </div> | ||||
|     <div class="container-body" :class="[ | ||||
|       side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | ||||
|     ]"> | ||||
|       <slot /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import ContainerIconVue from "./ContainerIcon.vue" | ||||
| export default { | ||||
|   name: "DashboardContainer", | ||||
|   components: { | ||||
|     Icon: ContainerIconVue, | ||||
|   }, | ||||
|   props: { | ||||
|     side: { | ||||
|       type: String, | ||||
|       default: "left", | ||||
|     }, | ||||
|     icon: { | ||||
|       type: String, | ||||
|       default: "cube", | ||||
|     }, | ||||
|     title: { | ||||
|       type: String, | ||||
|       default: "Default Title", | ||||
|     }, | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|     }; | ||||
|   }, | ||||
|   computed: {}, | ||||
|   mounted() { | ||||
|  | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 100%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 30%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 60%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, #024798, transparent); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
|     } | ||||
|   } | ||||
|  | ||||
|   .container-body { | ||||
|     padding: 12px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     flex: 1; | ||||
|     height: 0; | ||||
|   } | ||||
|  | ||||
|   .corner { | ||||
|     z-index: 1; | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
|  | ||||
|   .corner.tl { | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-left: 2px solid #0175dc; | ||||
|     top: 0; | ||||
|     left: 0; | ||||
|   } | ||||
|  | ||||
|   .corner.tr { | ||||
|     top: 0; | ||||
|     right: 0; | ||||
|     border-top: 2px solid #0175dc; | ||||
|     border-right: 2px solid #0175dc; | ||||
|   } | ||||
|  | ||||
|   .corner.bl { | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     bottom: 0; | ||||
|     left: 0; | ||||
|     // border-left: 10px solid #0175dc; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid transparent; | ||||
|     border-left: 0.532vw solid #0175dc; | ||||
|     border-bottom: 0.532vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid transparent; | ||||
|   } | ||||
|  | ||||
|   .corner.br { | ||||
|     bottom: 0; | ||||
|     right: 0; | ||||
|     // width: 20px; | ||||
|     // height: 20px; | ||||
|     width: 1.064vw; | ||||
|     height: 1.064vw; | ||||
|     // border-left: 10px solid transparent; | ||||
|     // border-bottom: 10px solid #0175dc; | ||||
|     // border-top: 10px solid transparent; | ||||
|     // border-right: 10px solid #0175dc; | ||||
|     // transform: rotate(-90deg); | ||||
|     border-left: 0.532vw solid transparent; | ||||
|     border-bottom: .6vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid transparent; | ||||
|   } | ||||
|  | ||||
|   .gradient-to-right { | ||||
|     background: linear-gradient(to right, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .gradient-to-left { | ||||
|     background: linear-gradient(to left, #0c3f68cc, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-right { | ||||
|     background: linear-gradient(to right, #0003, transparent); | ||||
|   } | ||||
|  | ||||
|   .body-gradient-to-left { | ||||
|     background: linear-gradient(to left, #0003, transparent); | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -5,12 +5,12 @@ | ||||
|     <div class="factory-section"> | ||||
|       <section class="top flex"> | ||||
|         <db-container title="生产监控" icon="prod"> | ||||
|           <prod-monitor @update:than="updateThan" :companyId="companyId" :factoryData="factoryData" :than="than" | ||||
|             :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | ||||
|             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|         </db-container> | ||||
|         <db-container title="工单监控" icon="order"> | ||||
|           <order :prodOrder="prodOrder" /> | ||||
|         </db-container> | ||||
|         <left-container title="工单监控" icon="order"> | ||||
|           <order @update:type="updateType" :type="type" :prodOrder="prodOrder" /> | ||||
|         </left-container> | ||||
|         <!-- <db-container title="" icon="store"> --> | ||||
|         <!-- <store :stock="stock" /> --> | ||||
|         <!-- </db-container> --> | ||||
| @@ -26,8 +26,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| @@ -39,7 +38,6 @@ export default { | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     DbContainer: Container, | ||||
|     LeftContainer: leftContainer, | ||||
|     ProdMonitor, | ||||
|     // Store, | ||||
|     // Energy, | ||||
| @@ -47,7 +45,6 @@ export default { | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       type: '目标产量', | ||||
|       companyId: 1, | ||||
|       companyName: "邯郸中建材光电材料有限公司", | ||||
|       period: 1, | ||||
| @@ -76,10 +73,6 @@ export default { | ||||
|     this.getMes(); | ||||
|   }, | ||||
|   methods: { | ||||
|     updateType(val) { | ||||
|       console.log(val) | ||||
|       this.type = val | ||||
|     }, | ||||
|     updateCompany(obj) { | ||||
|       this.companyId = obj.companyId; | ||||
|       this.companyName = obj.companyName; | ||||
| @@ -134,11 +127,11 @@ export default { | ||||
|         if (preData && preData[0] != null) { | ||||
|           for (const factory of preData) { | ||||
|             if (factory.previousGlassType === 0) { | ||||
|               preDataDetail[1] = factory.previousOutputNumber | ||||
|               preDataDetail[1] = factory.previousYearOutputNumber | ||||
|             } else if (factory.previousGlassType === 1) { | ||||
|               preDataDetail[2] = factory.previousOutputNumber | ||||
|             } else if (factory.previousGlassType === 2) { | ||||
|               preDataDetail[3] = factory.previousOutputNumber | ||||
|               preDataDetail[2] = factory.previousYearOutputNumber | ||||
|             } else if (factory.previousYearOutputNumber === 2) { | ||||
|               currentDataDetail[3] = factory.outputNumber | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|   | ||||
| @@ -1,16 +1,16 @@ | ||||
| <template> | ||||
|   <div class="factory-layout"> | ||||
|     <FactoryDataHeader :companyName="companyName" :companyId="companyId" :period="period" | ||||
|       @update:period="updatePeriod" /> | ||||
|     <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period" | ||||
|       @update:than="updateThan" @update:period="updatePeriod" /> | ||||
|     <div class="factory-section"> | ||||
|       <section class="top flex"> | ||||
|         <db-container title="生产监控" icon="prod"> | ||||
|           <prod-monitor @update:than="updateThan" :than="than" :companyId="companyId" :factoryData="factoryData" | ||||
|              :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | ||||
|             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|         </db-container> | ||||
|         <db-container title="工单监控" icon="order"> | ||||
|           <order :prodOrder="prodOrder" /> | ||||
|         </db-container> | ||||
|         <left-container title="工单监控" icon="order"> | ||||
|           <order @update:type="updateType" :type="type" :prodOrder="prodOrder" /> | ||||
|         </left-container> | ||||
|         <!-- <db-container title="" icon="store"> --> | ||||
|         <!-- <store :stock="stock" /> --> | ||||
|         <!-- </db-container> --> | ||||
| @@ -26,9 +26,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
|  | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| @@ -40,7 +38,6 @@ export default { | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     DbContainer: Container, | ||||
|     LeftContainer:leftContainer, | ||||
|     ProdMonitor, | ||||
|     // Store, | ||||
|     // Energy, | ||||
| @@ -49,7 +46,6 @@ export default { | ||||
|   data() { | ||||
|     return { | ||||
|       companyId: 0, | ||||
|       type:'目标产量', | ||||
|       companyName: "瑞昌中建材光电材料有限公司", | ||||
|       period: 1, | ||||
|       show:false, | ||||
| @@ -77,10 +73,6 @@ export default { | ||||
|     this.getMes(); | ||||
|   }, | ||||
|   methods: { | ||||
|     updateType(val) { | ||||
|       console.log(val) | ||||
|       this.type = val | ||||
|     }, | ||||
|     updateCompany(obj) { | ||||
|       this.companyId = obj.companyId; | ||||
|       this.companyName = obj.companyName; | ||||
| @@ -89,7 +81,7 @@ export default { | ||||
|     updateThan(val) { | ||||
|       console.log(val); | ||||
|       this.than = val; | ||||
|       this.getMes() | ||||
|       // this.getMes(); | ||||
|     }, | ||||
|     updatePeriod(val) { | ||||
|       this.period = val; | ||||
| @@ -132,17 +124,16 @@ export default { | ||||
|             // } | ||||
|           } | ||||
|         } | ||||
|         if (preData) { | ||||
|         if (preData && preData[0] != null) { | ||||
|           for (const factory of preData) { | ||||
|             if (factory.previousGlassType === 0) { | ||||
|               console.log('factory', factory) | ||||
|               preDataDetail[1] = factory.previousOutputNumber | ||||
|               preDataDetail[1] = factory.previousYearOutputNumber | ||||
|             } else if (factory.previousGlassType === 1) { | ||||
|               preDataDetail[2] = factory.previousOutputNumber | ||||
|               preDataDetail[2] = factory.previousYearOutputNumber | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         if (targetListResponse) { | ||||
|         if (targetListResponse && targetListResponse[0] != null) { | ||||
|           for (const factory of targetListResponse) { | ||||
|             targetDataDetail[0] = factory.ftoInput | ||||
|             // if (factory.previousGlassType === 0) { | ||||
| @@ -154,7 +145,7 @@ export default { | ||||
|           } | ||||
|         } | ||||
|         // console.log('ftoInvest',ftoInvest) | ||||
|         if (factoryListResponse) { | ||||
|         if (factoryListResponse && factoryListResponse[0] != null) { | ||||
|           for (const factory of factoryListResponse) { | ||||
|             // targetDataDetail[0] = factory.ftoInput | ||||
|             if (factory.glassType === 0) { | ||||
| @@ -164,7 +155,6 @@ export default { | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|         console.log('  this.factoryData.preDataDetail', preDataDetail); | ||||
|         this.factoryData.preDataDetail = preDataDetail | ||||
|         this.factoryData.currentDataDetail = currentDataDetail | ||||
|         this.factoryData.targetDataDetail = targetDataDetail | ||||
| @@ -196,7 +186,7 @@ export default { | ||||
|     gap: 16px; | ||||
|     .flex { | ||||
|       display: flex; | ||||
|       gap: 20px; | ||||
|       gap: 16px; | ||||
|       flex: 1; | ||||
|     } | ||||
|     .top > div, | ||||
|   | ||||
| @@ -8,9 +8,9 @@ | ||||
|           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | ||||
|             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|         </db-container> | ||||
|         <left-container title="工单监控" icon="order"> | ||||
|         <db-container title="工单监控" icon="order"> | ||||
|           <order :prodOrder="prodOrder" /> | ||||
|         </left-container> | ||||
|         </db-container> | ||||
|         <!-- <db-container title="" icon="store"> --> | ||||
|         <!-- <store :stock="stock" /> --> | ||||
|         <!-- </db-container> --> | ||||
| @@ -26,8 +26,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| @@ -39,7 +38,6 @@ export default { | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     DbContainer: Container, | ||||
|     LeftContainer: leftContainer, | ||||
|     ProdMonitor, | ||||
|     // Store, | ||||
|     // Energy, | ||||
|   | ||||
| @@ -8,9 +8,9 @@ | ||||
|           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | ||||
|             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|         </db-container> | ||||
|         <left-container title="工单监控" icon="order"> | ||||
|         <db-container title="工单监控" icon="order"> | ||||
|           <order :prodOrder="prodOrder" /> | ||||
|         </left-container> | ||||
|         </db-container> | ||||
|         <!-- <db-container title="" icon="store"> --> | ||||
|         <!-- <store :stock="stock" /> --> | ||||
|         <!-- </db-container> --> | ||||
| @@ -26,8 +26,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| @@ -39,7 +38,6 @@ export default { | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     DbContainer: Container, | ||||
|     LeftContainer: leftContainer, | ||||
|     ProdMonitor, | ||||
|     // Store, | ||||
|     // Energy, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-21 13:24:03 | ||||
|  * @LastEditTime: 2024-06-05 09:43:30 | ||||
|  * @LastEditTime: 2024-05-21 13:24:03 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -37,7 +37,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| // import Container from "./components/Container.vue"; | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import Store from "./components/Store.vue"; | ||||
| import Energy from "./components/Energy.vue"; | ||||
| @@ -47,7 +47,7 @@ export default { | ||||
|   name: "factoryData", | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     // DbContainer: Container, | ||||
|     DbContainer: Container, | ||||
|     ProdMonitor, | ||||
|     Store, | ||||
|     Energy, | ||||
|   | ||||
| @@ -8,9 +8,9 @@ | ||||
|           <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | ||||
|             :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | ||||
|         </db-container> | ||||
|         <left-container title="工单监控" icon="order"> | ||||
|         <db-container title="工单监控" icon="order"> | ||||
|           <order :prodOrder="prodOrder" /> | ||||
|         </left-container> | ||||
|         </db-container> | ||||
|         <!-- <db-container title="" icon="store"> --> | ||||
|         <!-- <store :stock="stock" /> --> | ||||
|         <!-- </db-container> --> | ||||
| @@ -26,9 +26,7 @@ | ||||
| </template> | ||||
| <script> | ||||
| import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | ||||
| import Container from "./components/rightContainer.vue"; | ||||
| import leftContainer from "./components/leftContainer.vue"; | ||||
|  | ||||
| import Container from "./components/Container.vue"; | ||||
| import ProdMonitor from "./components/ProdMonitor.vue"; | ||||
| import { deepClone } from "@/utils"; | ||||
| // import Store from "./components/Store.vue"; | ||||
| @@ -40,7 +38,6 @@ export default { | ||||
|   components: { | ||||
|     FactoryDataHeader, | ||||
|     DbContainer: Container, | ||||
|     LeftContainer: leftContainer, | ||||
|     ProdMonitor, | ||||
|     // Store, | ||||
|     // Energy, | ||||
|   | ||||
| @@ -23,10 +23,7 @@ export default { | ||||
|   components: { BarChartBase }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|  | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
| @@ -45,11 +42,8 @@ export default { | ||||
|     legend() { | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
| @@ -61,17 +55,17 @@ export default { | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `去年${month}月${today}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${dayBeYes}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `去年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
| @@ -81,7 +75,7 @@ export default { | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `去年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
| @@ -152,11 +146,8 @@ export default { | ||||
| function getTemplate(period, dataList,than) { | ||||
|   let items = []; | ||||
|   var day1 = new Date(); | ||||
|   var day2 = new Date(); | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|   day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|   var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|   //今天的时间 | ||||
|   // var day2 = new Date(); | ||||
|   // day2.setTime(day2.getTime()); | ||||
| @@ -169,11 +160,11 @@ function getTemplate(period, dataList,than) { | ||||
|   if (period === '日' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year - 1}年${yesterday}日`, | ||||
|         name: `去年${month}月${today}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
| @@ -181,11 +172,11 @@ function getTemplate(period, dataList,than) { | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${dayBeYes}日`, | ||||
|         name: `${yesterday}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
| @@ -193,7 +184,7 @@ function getTemplate(period, dataList,than) { | ||||
|   } else if (period === '周' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年本周`, | ||||
|         name: `去年本周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -217,7 +208,7 @@ function getTemplate(period, dataList,than) { | ||||
|   } else if (period === '月' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年${month}月`, | ||||
|         name: `去年${month}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|   | ||||
| @@ -23,10 +23,7 @@ export default { | ||||
|   components: { BarChartBase }, | ||||
|   data() { | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|  | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
| @@ -45,11 +42,8 @@ export default { | ||||
|     legend() { | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
| @@ -61,17 +55,17 @@ export default { | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year - 1}年${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `去年${month}月${today}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${dayBeYes}日`, color: "#12f7f1" }, | ||||
|           { label: `${yesterday}日`, color: "#58adfa" }, | ||||
|           { label: `${yesterday}日`, color: "#12f7f1" }, | ||||
|           { label: `${month}月${today}日`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `去年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
| @@ -81,7 +75,7 @@ export default { | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${year-1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `去年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
| @@ -153,15 +147,9 @@ export default { | ||||
|  | ||||
| function getTemplate(period, dataList,than) { | ||||
|   let items = []; | ||||
|   // var day1 = new Date(); | ||||
|   // day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|   // var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|   var day1 = new Date(); | ||||
|   var day2 = new Date(); | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|   day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|   var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|   //今天的时间 | ||||
|   // var day2 = new Date(); | ||||
|   // day2.setTime(day2.getTime()); | ||||
| @@ -174,11 +162,11 @@ function getTemplate(period, dataList,than) { | ||||
|   if (period === '日' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year - 1}年${yesterday}日`, | ||||
|         name: `去年${month}月${today}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
| @@ -186,11 +174,11 @@ function getTemplate(period, dataList,than) { | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${dayBeYes}日`, | ||||
|         name: `${yesterday}日`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|         name: `${yesterday}日`, | ||||
|         name: `${month}月${today}日`, | ||||
|         data: dataList ? dataList[1] : [], | ||||
|         // : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)), | ||||
|       }, | ||||
| @@ -198,7 +186,7 @@ function getTemplate(period, dataList,than) { | ||||
|   } else if (period === '周' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年本周`, | ||||
|         name: `去年本周`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -222,7 +210,7 @@ function getTemplate(period, dataList,than) { | ||||
|   } else if (period === '月' && than === '同比') { | ||||
|     items = [ | ||||
|       { | ||||
|         name: `${year-1}年${month}月`, | ||||
|         name: `去年${month}月`, | ||||
|         data: dataList ? dataList[0] : [], | ||||
|       }, | ||||
|       { | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-20 13:32:59 | ||||
|  * @LastEditTime: 2024-06-17 16:42:12 | ||||
|  * @LastEditTime: 2024-05-30 13:35:00 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -78,13 +78,13 @@ export default { | ||||
|     valueTuple() { | ||||
|       // [previousValue, currentValue, sumValue?] | ||||
|       const getter = this.$store.getters.copilot.yield[this.dataSourceField]; | ||||
|       // if (this.period === "日" || this.period === "周") { | ||||
|       //   console.log(this.period) | ||||
|       //   return [ | ||||
|       //     getter.previous[this.factoryId], | ||||
|       //     getter.current[this.factoryId], | ||||
|       //   ]; | ||||
|       // } | ||||
|       if (this.period === "日" || this.period === "周") { | ||||
|         console.log(this.period) | ||||
|         return [ | ||||
|           getter.previous[this.factoryId], | ||||
|           getter.current[this.factoryId], | ||||
|         ]; | ||||
|       } | ||||
|       // [100, 200, 200] | ||||
|       return [ | ||||
|         getter.previous[this.factoryId], | ||||
| @@ -100,11 +100,8 @@ export default { | ||||
|       const vt = this.valueTuple; | ||||
|       let items = []; | ||||
|       var day1 = new Date(); | ||||
|       var day2 = new Date(); | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|       day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|       day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|       var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|       var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|       //今天的时间 | ||||
|       // var day2 = new Date(); | ||||
|       // day2.setTime(day2.getTime()); | ||||
| @@ -116,32 +113,28 @@ export default { | ||||
|       // const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${yesterday}日累计`,}, | ||||
|           { label: `${year - 1}年${yesterday}累计` }, | ||||
|           { label: `${yesterday}日目标`, }, | ||||
|           { label: `${month}月${today}日累计`,}, | ||||
|           { label: `去年${month}月${today}日累计` }, | ||||
|         ]; | ||||
|       } else if (this.period === '日' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${month}月${today}日累计`}, | ||||
|           { label: `${yesterday}日累计`}, | ||||
|           { label: `${dayBeYes}日累计` }, | ||||
|           { label: `${yesterday}日目标`, }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `本周累计`,}, | ||||
|           { label: `${year-1}年本周累计` }, | ||||
|           { label: `本周目标`, }, | ||||
|           { label: `去年本周累计`}, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `本周累计`,}, | ||||
|           { label: `上周累计`, }, | ||||
|           { label: `本周目标`, }, | ||||
|           { label: `上周累计`,}, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${month}月累计`,}, | ||||
|           { label: `${year-1}年${month}月累计`, }, | ||||
|           { label: `去年${month}月累计`, }, | ||||
|           { label: `${month}月目标`,}, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '环比') { | ||||
| @@ -158,14 +151,13 @@ export default { | ||||
|         ]; | ||||
|       } | ||||
|       let titleValue = | ||||
|         vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined) | ||||
|           ? this.formatNumber((vt[1] / vt[2] * 100)) + '%' | ||||
|           : (vt[1] != 0 && vt[1] != null) && vt[2] == 0 | ||||
|             ? "100%" : '0%', | ||||
|           vt[0] != null && vt[2] != null && vt[2] !== 0 | ||||
|             ? `${vt[1] / vt[2]}%` | ||||
|             : "0%", | ||||
|         subtitle = | ||||
|           this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`; | ||||
|       console.log('titleValue', items) | ||||
|       // console.log(this.valueTuple[2]- this.valueTuple[1]) | ||||
|       this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`; | ||||
|       console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],) | ||||
|       console.log(items) | ||||
|       return getOptions({ | ||||
|         titleValue, | ||||
|         subtitle, | ||||
| @@ -173,7 +165,7 @@ export default { | ||||
|         preName: items[1].label, | ||||
|         previousSum: this.valueTuple[0], | ||||
|         currentSum: this.valueTuple[1], | ||||
|         targetSum: this.valueTuple[2] ? this.valueTuple[2] :0, | ||||
|         targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 , | ||||
|       }); | ||||
|     }, | ||||
|  | ||||
| @@ -204,15 +196,6 @@ export default { | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     formatNumber(num) { | ||||
|       // 判断是否为整数 | ||||
|       if (Number.isInteger(num)) { | ||||
|         return num; // 如果是整数,直接转换为字符串 | ||||
|       } else { | ||||
|         // 如果不是整数,保留两位小数并转换为字符串 | ||||
|         return num.toFixed(2); | ||||
|       } | ||||
|     } | ||||
|     // fullscreen mixin 需要的回调 | ||||
|     // fullscreenCallback(isFullscreen) { | ||||
|     //   console.log("isFullscreen--->", isFullscreen); | ||||
| @@ -220,16 +203,11 @@ export default { | ||||
|   }, | ||||
| }; | ||||
|  | ||||
| function calculateItems(period, valueTuple, than) { | ||||
|   console.log('valueTuple', valueTuple); | ||||
| function calculateItems(period, valueTuple,than) { | ||||
|   let items = []; | ||||
|   var day1 = new Date(); | ||||
|   var day2 = new Date(); | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) | ||||
|   day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000) | ||||
|   day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | ||||
|   var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate() | ||||
|   var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate() | ||||
|  | ||||
|   //今天的时间 | ||||
|   // var day2 = new Date(); | ||||
|   // day2.setTime(day2.getTime()); | ||||
| @@ -241,44 +219,40 @@ function calculateItems(period, valueTuple, than) { | ||||
|   const year = new Date().getFullYear(); | ||||
|   if (period === '日' && than === '同比') { | ||||
|     items = [ | ||||
|       { label: `${year - 1}年${yesterday}累计`, value: valueTuple[0] }, | ||||
|       { label: `${yesterday}累计`, value: valueTuple[1] }, | ||||
|       { label: `${yesterday}日目标`, value: valueTuple[2] }, | ||||
|       { label: `${month}月${today}日累计`, value: valueTuple[1] }, | ||||
|       { label: `去年${month}月${today}日累计`, value: valueTuple[0] }, | ||||
|     ]; | ||||
|   } else if (period === '日' && than === '环比') { | ||||
|     items = [ | ||||
|       { label: `${dayBeYes}日累计`, value: valueTuple[0] }, | ||||
|       { label: `${yesterday}日累计`, value: valueTuple[1] }, | ||||
|       { label: `${yesterday}日目标`, value: valueTuple[2] }, | ||||
|       { label: `${month}月${today}日累计`, value: valueTuple[1] }, | ||||
|       { label: `${yesterday}日累计`, value: valueTuple[0] }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '同比') { | ||||
|     items = [ | ||||
|       { label: `${year-1}年本周累计`, value: valueTuple[0] }, | ||||
|       { label: `本周累计`, value: valueTuple[1] }, | ||||
|       { label: `本周目标`, value: valueTuple[2] }, | ||||
|       { label: `去年本周累计`, value: valueTuple[0] }, | ||||
|     ]; | ||||
|   } else if (period === '周' && than === '环比') { | ||||
|     items = [ | ||||
|       { label: `上周累计`, value: valueTuple[0] }, | ||||
|       { label: `本周累计`, value: valueTuple[1] }, | ||||
|       { label: `本周目标`, value: valueTuple[2] }, | ||||
|       { label: `上周累计`, value: valueTuple[0] }, | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '同比') { | ||||
|     items = [ | ||||
|       { label: `${year-1}年${month}月累计`, value: valueTuple[0] }, | ||||
|       { label: `${month}月累计`, value: valueTuple[1] }, | ||||
|       { label: `去年${month}月累计`, value: valueTuple[0] }, | ||||
|       { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|     ]; | ||||
|   } else if (period === '月' && than === '环比') { | ||||
|     items = [ | ||||
|       { label: `${lastMonth}月累计`, value: valueTuple[0] }, | ||||
|       { label: `${month}月累计`, value: valueTuple[1] }, | ||||
|       { label: `${lastMonth}月累计`, value: valueTuple[0] }, | ||||
|       { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|     ]; | ||||
|   } else { | ||||
|     items = [ | ||||
|       { label: `${year - 1}年累计`, value: valueTuple[0] }, | ||||
|       { label: `${year}年累计`, value: valueTuple[1] }, | ||||
|       { label: `${year - 1}年累计`, value: valueTuple[0] }, | ||||
|       { label: `${year}年目标`, value: valueTuple[2] }, | ||||
|     ]; | ||||
|   } | ||||
| @@ -340,17 +314,17 @@ function calculateItems(period, valueTuple, than) { | ||||
|   left: -18px; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(2) .legend-item__label::before { | ||||
| .legend-item:nth-child(1) .legend-item__label::before { | ||||
|   background: #12fff5; | ||||
| } | ||||
| .legend-item:nth-child(2) .legend-item__value { | ||||
| .legend-item:nth-child(1) .legend-item__value { | ||||
|   color: #12fff5; | ||||
| } | ||||
|  | ||||
| .legend-item:nth-child(1) .legend-item__label::before { | ||||
| .legend-item:nth-child(2) .legend-item__label::before { | ||||
|   background: #0f65ff; | ||||
| } | ||||
| .legend-item:nth-child(1) .legend-item__value { | ||||
| .legend-item:nth-child(2) .legend-item__value { | ||||
|   color: #0f65ff; | ||||
| } | ||||
|  | ||||
|   | ||||
| @@ -1,10 +1,10 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-30 16:00:50 | ||||
|  * @LastEditTime: 2024-06-03 16:26:03 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
|     filename: DoubleRingWrapper.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 09:55:12 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="double-ring-wrapper"> | ||||
|     <template> | ||||
| @@ -42,13 +42,13 @@ export default { | ||||
|     return { | ||||
|       factoryId: 4, // 默认成都 | ||||
|       cityOptions: [ | ||||
|         // "成都", | ||||
|         "成都", | ||||
|         "邯郸", | ||||
|         // "株洲", | ||||
|         "株洲", | ||||
|         "瑞昌", | ||||
|         // "佳木斯", | ||||
|         // "凯盛光伏", | ||||
|         // "蚌埠兴科", | ||||
|         "佳木斯", | ||||
|         "凯盛光伏", | ||||
|         "蚌埠兴科", | ||||
|       ], | ||||
|     }; | ||||
|   }, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-24 15:15:00 | ||||
|  * @LastEditTime: 2024-05-31 16:16:16 | ||||
|  * @LastEditTime: 2024-05-28 08:42:36 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -54,12 +54,12 @@ export default { | ||||
|     return { | ||||
|       factoryId: 4, // 默认成都 | ||||
|       cityOptions: [ | ||||
|         // "成都", | ||||
|         "成都", | ||||
|         "邯郸", | ||||
|         // "株洲", | ||||
|         // "佳木斯", | ||||
|         // "凯盛光伏", | ||||
|         // "蚌埠兴科", | ||||
|         "株洲", | ||||
|         "佳木斯", | ||||
|         "凯盛光伏", | ||||
|         "蚌埠兴科", | ||||
|       ], | ||||
|     }; | ||||
|   }, | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-10 11:10:54 | ||||
|  * @LastEditTime: 2024-06-05 09:49:46 | ||||
|  * @LastEditTime: 2024-05-28 13:36:07 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -9,32 +9,29 @@ | ||||
| <template> | ||||
|   <div class="yield-copilot"> | ||||
|     <section class="top flex"> | ||||
|       <right-container class="std-yield" title="标准组件产出" icon="std"> | ||||
|       <db-container class="std-yield" title="标准组件产出" icon="std"> | ||||
|         <std-output v-if="show" :period="period" :than="than" /> | ||||
|       </right-container> | ||||
|       </db-container> | ||||
|       <db-container class="chip-yield" title="芯片产出" icon="chip2"> | ||||
|         <chip-output v-if="show" :period="period" :than="than" /> | ||||
|       </db-container> | ||||
|       <left-container class="bipv-yield" title="BIPV产出" icon="bipv"> | ||||
|       <db-container class="bipv-yield" title="BIPV产出" icon="bipv"> | ||||
|         <bipv-output v-if="show" :period="period" :than="than" /> | ||||
|       </left-container> | ||||
|       </db-container> | ||||
|     </section> | ||||
|     <section class="bottom flex"> | ||||
|       <right-container class="fto-involve" title="FTO投入"> | ||||
|       <db-container class="fto-involve" title="FTO投入"> | ||||
|         <fto-invest :period="period" :than="than" /> | ||||
|       </right-container> | ||||
|       <left-container class="chip-involve" title="芯片投入" icon="chip"> | ||||
|       </db-container> | ||||
|       <db-container class="chip-involve" title="芯片投入" icon="chip"> | ||||
|         <chip-invest :period="period" :than="than" /> | ||||
|       </left-container> | ||||
|       </db-container> | ||||
|     </section> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import twoContainer from "@/views/copilot/components/twoContainer.vue"; | ||||
| import leftContainer from "@/views/copilot/components/leftContainer.vue"; | ||||
| import rightContainer from "@/views/copilot/components/rightContainer.vue"; | ||||
|  | ||||
| import Container from "@/views/copilot/components/Container.vue"; | ||||
| import StdOutput from "./components/StdOutput.vue"; | ||||
| import ChipOutput from "./components/ChipOutput.vue"; | ||||
| import FtoInvest from "./components/FtoInvest.vue"; | ||||
| @@ -44,9 +41,7 @@ import ChipInvest from "./components/ChipInvest.vue"; | ||||
| export default { | ||||
|   name: "YieldCopilot", | ||||
|   components: { | ||||
|     DbContainer: twoContainer, | ||||
|     leftContainer, | ||||
|     rightContainer, | ||||
|     DbContainer: Container, | ||||
|     StdOutput, | ||||
|     ChipOutput, | ||||
|     BipvOutput, | ||||
|   | ||||
| @@ -17,12 +17,12 @@ export default ({ | ||||
|   tooltip: {}, | ||||
|   title: { | ||||
|     text: titleValue, | ||||
|     left: "48.5%", | ||||
|     left: "44%", | ||||
|     top: "37%", | ||||
|     textAlign: "center", | ||||
|     textStyle: { | ||||
|       fontWeight: 600, | ||||
|       fontSize: 26, | ||||
|       fontSize: 32, | ||||
|       color: "#fffd", | ||||
|     }, | ||||
|     subtext: `\u2002${subtitle}\u2002`, | ||||
| @@ -38,8 +38,8 @@ export default ({ | ||||
|     { | ||||
|       type: "pie", | ||||
|       name: "当前目标", | ||||
|      radius: ["80%", "90%"], | ||||
|       center: ["50%", "52%"], | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["45%", "52%"], | ||||
|       emptyCircleStyle: { | ||||
|         color: "#042c5f33", | ||||
|       }, | ||||
| @@ -47,8 +47,8 @@ export default ({ | ||||
|     // 数据 series | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["80%", "90%"], | ||||
|       center: ["50%", "52%"], | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["45%", "52%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
| @@ -61,9 +61,6 @@ export default ({ | ||||
|           value: currentSum, | ||||
|           name: currentName, | ||||
|           selected: false, | ||||
|            tooltip: { | ||||
|             formatter: `${currentName} : ${currentSum}` | ||||
|           }, | ||||
|           itemStyle: { | ||||
|             borderJoin: "round", | ||||
|             borderCap: "round", | ||||
| @@ -83,11 +80,16 @@ export default ({ | ||||
|           }, | ||||
|         }, | ||||
|         { | ||||
|           value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), | ||||
|           name: currentName, | ||||
|           tooltip: { | ||||
|             formatter: `${currentName} : ${currentSum}` | ||||
|           }, | ||||
|           value: | ||||
|             targetSum > currentSum | ||||
|               ? targetSum - currentSum | ||||
|               : targetSum == 0 | ||||
|               ? currentSum == 0 | ||||
|                 ? 1 | ||||
|                 : 0 | ||||
|               : 0, | ||||
|  | ||||
|           name: "未达成累计", | ||||
|           itemStyle: { color: "transparent" }, | ||||
|           label: { show: false }, | ||||
|         }, | ||||
| @@ -96,8 +98,8 @@ export default ({ | ||||
|     // 数据 series2 - 2023累计 | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["70%", "80%"], | ||||
|       center: ["50%", "52%"], | ||||
|       radius: ["55%", "70%"], | ||||
|       center: ["45%", "52%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
| @@ -110,9 +112,6 @@ export default ({ | ||||
|           value: previousSum, | ||||
|           name: preName, | ||||
|           selected: false, | ||||
|           tooltip: { | ||||
|             formatter: `${preName} : ${previousSum}` | ||||
|           }, | ||||
|           itemStyle: { | ||||
|             borderJoin: "round", | ||||
|             borderCap: "round", | ||||
| @@ -132,12 +131,13 @@ export default ({ | ||||
|           }, | ||||
|         }, | ||||
|         { | ||||
|  | ||||
|           value:previousSum === 0 ? 1 : 0, | ||||
|           name: preName, | ||||
|            tooltip: { | ||||
|             formatter: `${preName} : ${previousSum}` | ||||
|           }, | ||||
|           value: | ||||
|             targetSum > previousSum | ||||
|               ? targetSum - previousSum | ||||
|               : previousSum == 0 | ||||
|               ? 1 | ||||
|               : 0, | ||||
|           name: "-", | ||||
|           itemStyle: { color: "transparent" }, | ||||
|           label: { show: false }, | ||||
|         }, | ||||
|   | ||||
| @@ -1,9 +1,8 @@ | ||||
| <!--  | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-06-03 08:55:42 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
|     filename: Bipv.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 15:39:54 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -25,10 +24,7 @@ export default { | ||||
|   data() { | ||||
|     const year = new Date().getFullYear(); | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = [ "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|  | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       legend: [ | ||||
|         { label: `${year}年目标值`, color: "#f3c000" }, | ||||
| @@ -74,15 +70,15 @@ export default { | ||||
|       return [ | ||||
|         { | ||||
|           name: `${new Date().getFullYear()}年目标值`, | ||||
|           data: bipvOutput.target.splice(0, 1), | ||||
|           data: bipvOutput.target, | ||||
|         }, | ||||
|         { | ||||
|           name: `${new Date().getFullYear() - 1}年`, | ||||
|           data: bipvOutput.previous.splice(0, 1) | ||||
|           data: bipvOutput.previous, | ||||
|         }, | ||||
|         { | ||||
|           name: `${new Date().getFullYear()}年`, | ||||
|           data: bipvOutput.current.splice(0, 1), | ||||
|           data: bipvOutput.current, | ||||
|         }, | ||||
|       ]; | ||||
|     }, | ||||
|   | ||||
| @@ -1,9 +1,8 @@ | ||||
| <!--  | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-06-21 15:06:39 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
|     filename: chip-invest.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -24,9 +23,7 @@ export default { | ||||
|   data() { | ||||
|     const year = new Date().getFullYear(); | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       legend: [ | ||||
|         { label: `${year - 1}年`, color: "#12f7f1" }, | ||||
| @@ -35,7 +32,6 @@ export default { | ||||
|       xAxis: cities, | ||||
|     }; | ||||
|   }, | ||||
|  | ||||
|   computed: { | ||||
|     series() { | ||||
|       const chipInvest = this.$store.getters.home.chipInvest; | ||||
|   | ||||
| @@ -11,24 +11,24 @@ | ||||
|     <section class="right-part"> | ||||
|       <div class="yield-location"> | ||||
|         <section class="btn-group"> | ||||
|           <!-- <button | ||||
|           <button | ||||
|             @click="activeLoc = '1'" | ||||
|             :class="activeLoc === '1' ? 'active' : ''" | ||||
|           > | ||||
|             成都 | ||||
|           </button> --> | ||||
|           </button> | ||||
|           <button | ||||
|             @click="activeLoc = '2'" | ||||
|             :class="activeLoc === '2' ? 'active' : ''" | ||||
|           > | ||||
|             邯郸 | ||||
|           </button> | ||||
|           <!-- <button | ||||
|           <button | ||||
|             @click="activeLoc = '3'" | ||||
|             :class="activeLoc === '3' ? 'active' : ''" | ||||
|           > | ||||
|             株洲 | ||||
|           </button> --> | ||||
|           </button> | ||||
|           <button | ||||
|             @click="activeLoc = '4'" | ||||
|             :class="activeLoc === '4' ? 'active' : ''" | ||||
| @@ -37,7 +37,7 @@ | ||||
|           </button> | ||||
|         </section> | ||||
|         <section class="btn-group"> | ||||
|           <!-- <button | ||||
|           <button | ||||
|             @click="activeLoc = '5'" | ||||
|             :class="activeLoc === '5' ? 'active' : ''" | ||||
|             class="fixwidth" | ||||
| @@ -55,7 +55,7 @@ | ||||
|             :class="activeLoc === '7' ? 'active' : ''" | ||||
|           > | ||||
|             蚌埠兴科 | ||||
|           </button> --> | ||||
|           </button> | ||||
|         </section> | ||||
|       </div> | ||||
|       <div class="yield-summary"> | ||||
| @@ -85,14 +85,13 @@ export default { | ||||
|   props: {}, | ||||
|   data() { | ||||
|     return { | ||||
|       activeLoc: "2", | ||||
|       activeLoc: "1", | ||||
|     }; | ||||
|   }, | ||||
|   computed: { | ||||
|     output() { | ||||
|       // ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"] | ||||
|       const chipOutput = this.$store.getters.home.chipOutput; | ||||
|       console.log('chipOutput', chipOutput); | ||||
|       if ( | ||||
|         !chipOutput || | ||||
|         !chipOutput.target || | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-06-14 09:03:26 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!--  | ||||
|     filename: ChipYield.vue | ||||
|     author: liubin | ||||
| @@ -98,12 +91,9 @@ export default { | ||||
|             }, | ||||
|             data: [ | ||||
|               { | ||||
|                 value: 0, | ||||
|                 value: 90, | ||||
|                 name: `${year}累计产出`, | ||||
|                 selected: false, | ||||
|                 tooltip: { | ||||
|                   formatter: null, | ||||
|                 }, | ||||
|                 itemStyle: { | ||||
|                   borderJoin: "round", | ||||
|                   borderCap: "round", | ||||
| @@ -123,11 +113,8 @@ export default { | ||||
|                 }, | ||||
|               }, | ||||
|               { | ||||
|                 value: 0, | ||||
|                 name: `${year}目标`, | ||||
|                 tooltip: { | ||||
|                   formatter: null, | ||||
|                 }, | ||||
|                 value: 20, | ||||
|                 name: "-", | ||||
|                 itemStyle: { color: "transparent" }, | ||||
|                 label: { show: false }, | ||||
|               }, | ||||
| @@ -147,12 +134,9 @@ export default { | ||||
|             }, | ||||
|             data: [ | ||||
|               { | ||||
|                 value: 0, | ||||
|                 value: 90, | ||||
|                 name: `${year - 1}累计产出`, | ||||
|                 selected: false, | ||||
|                 tooltip: { | ||||
|                   formatter: null, | ||||
|                 }, | ||||
|                 itemStyle: { | ||||
|                   borderJoin: "round", | ||||
|                   borderCap: "round", | ||||
| @@ -173,10 +157,7 @@ export default { | ||||
|               }, | ||||
|               { | ||||
|                 value: 0, | ||||
|                 name: `${year - 1}累计产出`, | ||||
|                 tooltip: { | ||||
|                   formatter:null, | ||||
|                 }, | ||||
|                 name: "-", | ||||
|                 itemStyle: { color: "transparent" }, | ||||
|                 label: { show: false }, | ||||
|               }, | ||||
| @@ -221,44 +202,32 @@ export default { | ||||
|       }; | ||||
|     }, | ||||
|     actualOptions() { | ||||
|       console.log('this.output.current / this.output.target', this.output.current/this.output.target); | ||||
|       const year = new Date().getFullYear() | ||||
|       const options = JSON.parse(JSON.stringify(this.options)); | ||||
|       // console.log('options', options); | ||||
|       // 标题 | ||||
|       if (!this.output.target) options.title.text = "0%"; | ||||
|       else | ||||
|         options.title.text = | ||||
|           ((this.output.current / this.output.target).toFixed(2)) * 100 + "%"; | ||||
|           (this.output.current / this.output.target) * 100 + "%"; | ||||
|       // 外环 | ||||
|       if ( | ||||
|         this.output.current == this.output.target && | ||||
|         this.output.current == 0 | ||||
|       ) { | ||||
|         options.series[1].data[0].value = 0; | ||||
|         options.series[1].data[1].value = 1; | ||||
|         options.series[1].data[0].tooltip.formatter = year + '累计完成:0'; | ||||
|         options.series[1].data[1].tooltip.formatter = year + '累计完成:0'; | ||||
|         options.series[1].data[1].value = 100; | ||||
|       } else { | ||||
|         options.series[1].data[0].value = this.output.current; | ||||
|         options.series[1].data[1].value = | ||||
|           this.output.target - this.output.current; | ||||
|         options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current; | ||||
|         options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current; | ||||
|       } | ||||
|       // 内环 | ||||
|       if (this.output.previous == 0) { | ||||
|         options.series[2].data[0].value = 0; | ||||
|         options.series[2].data[1].value = 1; | ||||
|         options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0; | ||||
|         options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0; | ||||
|         options.series[2].data[1].value = 100; | ||||
|       } else { | ||||
|         options.series[2].data[0].value = this.output.previous; | ||||
|         options.series[2].data[1].value = 0; | ||||
|         options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; | ||||
|         options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; | ||||
|       } | ||||
|       console.log('options', options); | ||||
|       return options; | ||||
|     }, | ||||
|   }, | ||||
|   | ||||
| @@ -1,9 +1,8 @@ | ||||
| <!--  | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-06-27 16:30:58 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
|     filename: fto.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -24,9 +23,7 @@ export default { | ||||
|   data() { | ||||
|     const year = new Date().getFullYear(); | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       legend: [ | ||||
|         { label: `${year - 1}年`, color: "#12f7f1" }, | ||||
|   | ||||
| @@ -12,7 +12,7 @@ | ||||
|         v-for="item in legend" | ||||
|         :key="item.label" | ||||
|         class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | ||||
|         >{{ item.label }}</span | ||||
|       > | ||||
|     </div> | ||||
| @@ -59,42 +59,13 @@ export default { | ||||
|       actualOptions: null, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "5%", | ||||
|           left: "3%", | ||||
|           right: "4%", | ||||
|           bottom: "0", | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           // backgroundColor: '#000000', | ||||
|           // textStyle: { | ||||
|           //   color: '#ffff' | ||||
|           // } | ||||
|           formatter: params => { | ||||
|             // console.log(params); | ||||
|             // 获取xAxis data中的数据 | ||||
|             let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>` | ||||
|             params.forEach(item => { | ||||
|               let color = item.color.colorStops ? item.color.colorStops[0].color : '' | ||||
|               console.log(item.color, color); | ||||
|               dataStr += `<div> | ||||
|           <div style="margin: 0 8px;"> | ||||
|             <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span> | ||||
|             <span>${item.seriesName}</span> | ||||
|             <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span> | ||||
|           </div> | ||||
|         </div>` | ||||
|             }) | ||||
|             return dataStr | ||||
|           } | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -106,24 +77,22 @@ export default { | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 14, | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           position:'left', | ||||
|           nameTextStyle: { | ||||
|             color: "#fff", | ||||
|             fontSize: 14, | ||||
|             align:'right' | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 14, | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -142,15 +111,6 @@ export default { | ||||
|             name: '', // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             label: { | ||||
|               show: true, //开启显示 | ||||
|               align: 'right', //在上方显示 | ||||
|               position: 'top', //在上方显示 | ||||
|               textStyle: { //数值样式 | ||||
|                 color: '#DFF1FE', | ||||
|                 fontSize: 14 | ||||
|               } | ||||
|             }, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -186,20 +146,13 @@ export default { | ||||
|             name: '', // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 12, | ||||
|             label: { | ||||
|               show: true, //开启显示 | ||||
|               align: 'left', //在上方显示 | ||||
|               position: 'top', //在上方显示 | ||||
|               textStyle: { //数值样式 | ||||
|                 color: '#DFF1FE', | ||||
|                 fontSize: 14 | ||||
|               } | ||||
|             }, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
|             //   }, | ||||
|             // }, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               // normal: { | ||||
|  | ||||
|               // }, | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
| @@ -231,9 +184,9 @@ export default { | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14; | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.initOptions(this.actualOptions); | ||||
|     }, | ||||
|     series(val) { | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-06-28 09:28:56 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!--  | ||||
|     filename: right-chart-base | ||||
|     author: liubin | ||||
| @@ -19,7 +12,7 @@ | ||||
|         v-for="item in legend" | ||||
|         :key="item.label" | ||||
|         class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | ||||
|         >{{ item.label }}</span | ||||
|       > | ||||
|     </div> | ||||
| @@ -65,37 +58,13 @@ export default { | ||||
|       isFullscreen: false, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "5%", | ||||
|           left: "3%", | ||||
|           right: "4%", | ||||
|           bottom: "0", | ||||
|           top: "18%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           formatter: params => { | ||||
|             // 获取xAxis data中的数据 | ||||
|             let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>` | ||||
|             params.forEach(item => { | ||||
|               let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : '' | ||||
|               console.log(item.color, color); | ||||
|               dataStr += `<div> | ||||
|           <div style="margin: 0 8px;"> | ||||
|             <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span> | ||||
|             <span>${item.seriesName}</span> | ||||
|             <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span> | ||||
|           </div> | ||||
|         </div>` | ||||
|             }) | ||||
|             return dataStr | ||||
|           } | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -107,24 +76,22 @@ export default { | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 14, | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           position: 'left', | ||||
|           nameTextStyle: { | ||||
|             color: "#fff", | ||||
|             fontSize: 14, | ||||
|             align: 'right' | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "#fff", | ||||
|             fontSize: 14, | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -148,30 +115,30 @@ export default { | ||||
|             itemStyle: { | ||||
|               color: "#f3c000", | ||||
|             }, | ||||
|             // areaStyle: { | ||||
|             //   color: { | ||||
|             //     type: "linear", | ||||
|             //     x: 0, | ||||
|             //     y: 0, | ||||
|             //     x2: 0, | ||||
|             //     y2: 1, | ||||
|             //     colorStops: [ | ||||
|             //       { | ||||
|             //         offset: 0, | ||||
|             //         color: "#f3c000", // 0% 处的颜色 | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 0.55, | ||||
|             //         color: "#f3c00033", | ||||
|             //       }, | ||||
|             //       { | ||||
|             //         offset: 1, | ||||
|             //         color: "transparent", // 100% 处的颜色 | ||||
|             //       }, | ||||
|             //     ], | ||||
|             //     global: false, // 缺省为 false | ||||
|             //   }, | ||||
|             // }, | ||||
|             areaStyle: { | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
|                 y: 0, | ||||
|                 x2: 0, | ||||
|                 y2: 1, | ||||
|                 colorStops: [ | ||||
|                   { | ||||
|                     offset: 0, | ||||
|                     color: "#f3c000", // 0% 处的颜色 | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 0.55, | ||||
|                     color: "#f3c00033", | ||||
|                   }, | ||||
|                   { | ||||
|                     offset: 1, | ||||
|                     color: "transparent", // 100% 处的颜色 | ||||
|                   }, | ||||
|                 ], | ||||
|                 global: false, // 缺省为 false | ||||
|               }, | ||||
|             }, | ||||
|             data: [], // this.series[0].data, | ||||
|           }, | ||||
|           { | ||||
| @@ -252,9 +219,9 @@ export default { | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14; | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||
|       this.initOptions(this.actualOptions); | ||||
|     }, | ||||
|     series(val) { | ||||
|   | ||||
| @@ -25,9 +25,7 @@ export default { | ||||
|   data() { | ||||
|     const year = new Date().getFullYear(); | ||||
|     // 城市数组的顺序必须是固定的 | ||||
|     const cities = ["瑞昌", "邯郸", | ||||
|       // "株洲", "佳木斯", "成都", "凯盛", "蚌埠" | ||||
|     ]; | ||||
|     const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"]; | ||||
|     return { | ||||
|       legend: [ | ||||
|         { label: `${year}年目标值`, color: "#f3c000" }, | ||||
|   | ||||
| @@ -83,7 +83,7 @@ export default { | ||||
|   // backdrop-filter: blur(2px); | ||||
|   // border-radius: 4px; | ||||
|   transform: translate(-50%, -100%); | ||||
|   // box-shadow: inset 0 0 12px 2px #fff3; | ||||
|   box-shadow: inset 0 0 12px 2px #fff3; | ||||
|   background: url(../../../assets/images/homeindex/info.png) no-repeat 0 0 / 100% 100%; | ||||
|     // background: radial-gradient(circle farthest-corner at bottom center,rgba(255,239,162,.7)  10%, #021842 30%); | ||||
|   // 在这里设置一个总的字体大小 不失为一个好的选择 | ||||
|   | ||||
| @@ -38,7 +38,7 @@ | ||||
|       class="container-head" | ||||
|       :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']" | ||||
|     > | ||||
|       <Icon style="margin-left: 16px;" :icon="icon"></Icon> | ||||
|       <Icon :icon="icon"></Icon> | ||||
|       <h2 class="container-title">{{ title }}</h2> | ||||
|     </div> | ||||
|     <div | ||||
| @@ -105,7 +105,7 @@ export default { | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height:4vh; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|   | ||||
| @@ -1,18 +1,18 @@ | ||||
| <template> | ||||
|   <div class="dashboard-factory-all"> | ||||
|     <div id="map-container"> | ||||
|       <!-- <div v-if="visible" class="cdLine"></div> --> | ||||
|       <!-- <div v-if="visible" class="zzLine"></div> --> | ||||
|       <!-- <div v-if="visible" class="rcLine"></div> --> | ||||
|       <!-- <div v-if="visible" class="rcLineTwo"></div> --> | ||||
|       <!-- <div v-if="visible" class="hdLine"></div> --> | ||||
|       <!-- <div v-if="visible" class="hdLineTwo"></div> --> | ||||
|       <!-- <div v-if="visible" class="ksLine"></div> --> | ||||
|       <!-- <div v-if="visible" class="bbLine"></div> --> | ||||
|       <!-- <div v-if="visible" class="bbLineTwo"></div> --> | ||||
|       <!-- <div v-if="visible" class="bbLineThree"></div> --> | ||||
|       <!-- <div v-if="visible" class="jmsLine"></div> --> | ||||
|       <!-- <div v-if="visible" class="jmsLineTwo"></div> --> | ||||
|       <div v-if="visible" class="cdLine"></div> | ||||
|       <div v-if="visible" class="zzLine"></div> | ||||
|       <div v-if="visible" class="rcLine"></div> | ||||
|       <div v-if="visible" class="rcLineTwo"></div> | ||||
|       <div v-if="visible" class="hdLine"></div> | ||||
|       <div v-if="visible" class="hdLineTwo"></div> | ||||
|       <div v-if="visible" class="ksLine"></div> | ||||
|       <div v-if="visible" class="bbLine"></div> | ||||
|       <div v-if="visible" class="bbLineTwo"></div> | ||||
|       <div v-if="visible" class="bbLineThree"></div> | ||||
|       <div v-if="visible" class="jmsLine"></div> | ||||
|       <div v-if="visible" class="jmsLineTwo"></div> | ||||
|       <div class="databoard"> | ||||
|         <db-header class="db-header"></db-header> | ||||
|         <div class="db-body"> | ||||
| @@ -39,12 +39,12 @@ | ||||
|       </div> | ||||
|     </div> | ||||
|     <company-info v-if="visible" :info="info" :position="rcHintPosition" /> | ||||
|     <!-- <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" /> --> | ||||
|     <!-- <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" /> --> | ||||
|     <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" /> | ||||
|     <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" /> | ||||
|     <hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" /> | ||||
|     <!-- <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" /> --> | ||||
|     <!-- <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" /> --> | ||||
|     <!-- <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" /> --> | ||||
|     <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" /> | ||||
|     <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" /> | ||||
|     <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" /> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| @@ -61,25 +61,21 @@ import StdChart from "./dashboard/charts/StdChart.vue"; | ||||
|  | ||||
| const LOCATIONS = [ | ||||
|   // 佳木斯 | ||||
|   // { x: 67, y: 20, tx: 60, ty: 29, path: 'factoryData/jmsIndex' }, | ||||
|   { x: 67, y: 20, tx: 60, ty: 29,  path: 'copilot/jmsIndex' }, | ||||
|   // 成都 | ||||
|   // { x: 46, y: 56, tx: 46, ty: 93, path: 'factoryData/cdIndex' }, | ||||
|   { x: 46, y: 56,tx:46,ty:93, path: 'copilot/cdIndex' }, | ||||
|   // 蚌埠1 | ||||
|   // { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'factoryData/bbIndex' }, | ||||
|   { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'copilot/bbIndex' }, | ||||
|   // 蚌埠2 | ||||
|   // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' }, | ||||
|   { x: 61, y: 53,tx:39,ty:68, path: 'copilot/ksIndex' }, | ||||
|   // 江西 瑞昌 | ||||
|   { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' }, | ||||
|   { x: 60, y: 58, tx: 68, ty: 52, path: 'copilot/factory-data' }, | ||||
|   // 湖南 株洲 | ||||
|   // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' }, | ||||
|   { x: 56, y: 60, tx: 60, ty: 95, path: 'copilot/zzIndex' }, | ||||
|   // 邯郸 | ||||
|   { x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' }, | ||||
|   { x: 58, y: 45, tx: 47, ty: 34, path: 'copilot/hdIndex' }, | ||||
| ]; | ||||
| // rcLine.style.left = `66.8%`; | ||||
| // rcLine.style.top = `52%`; | ||||
| // rcLineTwo.className = "rcLineTwo"; | ||||
| // rcLineTwo.style.left = `58.7%`; | ||||
| // rcLineTwo.style.top = `34%`; | ||||
|  | ||||
| export default { | ||||
|   name: "Index", | ||||
|   components: { | ||||
| @@ -217,51 +213,39 @@ export default { | ||||
|           { label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) }, | ||||
|         ], | ||||
|       }; | ||||
|       if | ||||
|         // (position === LOCATIONS[0]) { | ||||
|         // templateInfo.companyName = "佳木斯中建材"; | ||||
|         // this.jmsHintPosition = position; | ||||
|         // templateInfo.items[0].value = this.homeStore.ftoInvest.current[3]; | ||||
|         // templateInfo.items[2].value = this.homeStore.chipInvest.current[3]; | ||||
|         // templateInfo.items[1].value = this.homeStore.chipOutput.current[3]; | ||||
|         // templateInfo.items[3].value = this.homeStore.stdOutput.current[3]; | ||||
|         // this.jmsInfo = templateInfo; | ||||
|       // } else if (position === LOCATIONS[1]) { | ||||
|         // this.cdHintPosition = position; | ||||
|         // templateInfo.companyName = "成都中建材"; | ||||
|         // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4]; | ||||
|         // templateInfo.items[2].value = this.homeStore.chipInvest.current[4]; | ||||
|         // templateInfo.items[1].value = this.homeStore.chipOutput.current[4]; | ||||
|         // templateInfo.items[3].value = this.homeStore.stdOutput.current[4]; | ||||
|         // this.cdInfo = templateInfo; | ||||
|       // } else if (position === LOCATIONS[2]) { | ||||
|         // this.bbHintPosition = position; | ||||
|         // templateInfo.companyName = "蚌埠兴科"; | ||||
|         // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6]; | ||||
|         // templateInfo.items[2].value = this.homeStore.chipInvest.current[6]; | ||||
|         // templateInfo.items[1].value = this.homeStore.chipOutput?.current[6]; | ||||
|         // templateInfo.items[3].value = this.homeStore.stdOutput.current[6]; | ||||
|         // this.bbInfo = templateInfo; | ||||
|       // } else if (position === LOCATIONS[3]) { | ||||
|         // this.ksHintPosition = position; | ||||
|         // templateInfo.companyName = "凯盛光伏"; | ||||
|         // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5]; | ||||
|         // templateInfo.items[2].value = this.homeStore.chipInvest.current[5]; | ||||
|         // templateInfo.items[1].value = this.homeStore.chipOutput.current[5]; | ||||
|         // templateInfo.items[3].value = this.homeStore.stdOutput.current[5]; | ||||
|         // this.ksInfo = templateInfo; | ||||
|       // } | ||||
|         (position === LOCATIONS[0]) { | ||||
|         const rcLine = document.createElement("div"); | ||||
|         const rcLineTwo = document.createElement("div"); | ||||
|         rcLine.className = "rcLine"; | ||||
|         rcLine.style.left = `${position.lx}%`; | ||||
|         rcLine.style.top = `${position.ly}%`; | ||||
|         rcLineTwo.className = "rcLineTwo"; | ||||
|         rcLineTwo.style.left = `${position.ltx}%`; | ||||
|         rcLineTwo.style.top = `${position.lty}%`; | ||||
|         document.getElementById("map-container").appendChild(rcLine); | ||||
|         document.getElementById("map-container").appendChild(rcLineTwo); | ||||
|       if (position === LOCATIONS[0]) { | ||||
|         templateInfo.companyName = "佳木斯中建材"; | ||||
|         this.jmsHintPosition = position; | ||||
|         templateInfo.items[0].value = this.homeStore.ftoInvest.current[3]; | ||||
|         templateInfo.items[2].value = this.homeStore.chipInvest.current[3]; | ||||
|         templateInfo.items[1].value = this.homeStore.chipOutput.current[3]; | ||||
|         templateInfo.items[3].value = this.homeStore.stdOutput.current[3]; | ||||
|         this.jmsInfo = templateInfo; | ||||
|       } else if (position === LOCATIONS[1]) { | ||||
|         this.cdHintPosition = position; | ||||
|         templateInfo.companyName = "成都中建材"; | ||||
|         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4]; | ||||
|         templateInfo.items[2].value = this.homeStore.chipInvest.current[4]; | ||||
|         templateInfo.items[1].value = this.homeStore.chipOutput.current[4]; | ||||
|         templateInfo.items[3].value = this.homeStore.stdOutput.current[4]; | ||||
|         this.cdInfo = templateInfo; | ||||
|       } else if (position === LOCATIONS[2]) { | ||||
|         this.bbHintPosition = position; | ||||
|         templateInfo.companyName = "蚌埠兴科"; | ||||
|         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6]; | ||||
|         templateInfo.items[2].value = this.homeStore.chipInvest.current[6]; | ||||
|         templateInfo.items[1].value = this.homeStore.chipOutput?.current[6]; | ||||
|         templateInfo.items[3].value = this.homeStore.stdOutput.current[6]; | ||||
|         this.bbInfo = templateInfo; | ||||
|       } else if (position === LOCATIONS[3]) { | ||||
|         this.ksHintPosition = position; | ||||
|         templateInfo.companyName = "凯盛光伏"; | ||||
|         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5]; | ||||
|         templateInfo.items[2].value = this.homeStore.chipInvest.current[5]; | ||||
|         templateInfo.items[1].value = this.homeStore.chipOutput.current[5]; | ||||
|         templateInfo.items[3].value = this.homeStore.stdOutput.current[5]; | ||||
|         this.ksInfo = templateInfo; | ||||
|       } else if (position === LOCATIONS[4]) { | ||||
|         this.rcHintPosition = position; | ||||
|         templateInfo.companyName = "瑞昌中建材"; | ||||
|         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0]; | ||||
| @@ -269,25 +253,15 @@ export default { | ||||
|         templateInfo.items[1].value = this.homeStore.chipOutput.current[0]; | ||||
|         templateInfo.items[3].value = this.homeStore.stdOutput.current[0]; | ||||
|         this.info = templateInfo; | ||||
|       // } else if (position === LOCATIONS[5]) { | ||||
|         // this.zzHintPosition = position; | ||||
|         // templateInfo.companyName = "株洲中建材"; | ||||
|         // templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2]; | ||||
|         // templateInfo.items[2].value = this.homeStore.chipInvest.current[2]; | ||||
|         // templateInfo.items[1].value = this.homeStore.chipOutput.current[2]; | ||||
|         // templateInfo.items[3].value = this.homeStore.stdOutput.current[2]; | ||||
|         // this.zzInfo = templateInfo; | ||||
|       } else if (position === LOCATIONS[1]) { | ||||
|         const hdLine = document.createElement("div"); | ||||
|         const hdLineTwo = document.createElement("div"); | ||||
|         hdLine.className = "hdLine"; | ||||
|         hdLine.style.left = `${position.lx}%`; | ||||
|         hdLine.style.top = `${position.ly}%`; | ||||
|         hdLineTwo.className = "hdLineTwo"; | ||||
|         hdLineTwo.style.left = `${position.ltx}%`; | ||||
|         hdLineTwo.style.top = `${position.lty}%`; | ||||
|         document.getElementById("map-container").appendChild(hdLine); | ||||
|         document.getElementById("map-container").appendChild(hdLineTwo); | ||||
|       } else if (position === LOCATIONS[5]) { | ||||
|         this.zzHintPosition = position; | ||||
|         templateInfo.companyName = "株洲中建材"; | ||||
|         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2]; | ||||
|         templateInfo.items[2].value = this.homeStore.chipInvest.current[2]; | ||||
|         templateInfo.items[1].value = this.homeStore.chipOutput.current[2]; | ||||
|         templateInfo.items[3].value = this.homeStore.stdOutput.current[2]; | ||||
|         this.zzInfo = templateInfo; | ||||
|       } else if (position === LOCATIONS[6]) { | ||||
|         this.hdHintPosition = position; | ||||
|         templateInfo.companyName = "邯郸中建材"; | ||||
|         templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1]; | ||||
| @@ -374,40 +348,40 @@ export default { | ||||
| .rcLine { | ||||
|   display: inline-block; | ||||
|   position: absolute; | ||||
|   /* left: 61%; */ | ||||
|   width: 7.9vw; | ||||
|   /* top: 61.5%; */ | ||||
|   left: 61%; | ||||
|   width: 100px; | ||||
|   top: 61.5%; | ||||
|   /* x: 60, y: 58, */ | ||||
|   height: 1px; | ||||
|     height: 1px; | ||||
|   border: 2px dashed #FFCF00; | ||||
| } | ||||
|  | ||||
| .rcLineTwo { | ||||
|   position: absolute; | ||||
|   /* left: 66.8%; */ | ||||
|   left: 66.8%; | ||||
|   width: 1px; | ||||
|   /* top: 52%; */ | ||||
|   top: 52%; | ||||
|   display: inline-block; | ||||
|   /* // x: 60, y: 58, */ | ||||
|   height: 5vw; | ||||
|   height: 90px; | ||||
|   border: 2px dashed #FFCF00; | ||||
| } | ||||
|  | ||||
| .hdLine { | ||||
|   position: absolute; | ||||
|   /* left: 58.7%; */ | ||||
|   left: 58.7%; | ||||
|   width: 1px; | ||||
|   /* top: 34%; */ | ||||
|   top: 34%; | ||||
|   display: inline-block; | ||||
|   /* // x: 60, y: 58, */ | ||||
|   height: 6vw; | ||||
|   height: 100px; | ||||
|   border: 2px dashed #FFCF00; | ||||
| } | ||||
| .hdLineTwo { | ||||
|   position: absolute; | ||||
|   /* left: 53%; */ | ||||
|   width: 5vw; | ||||
|   /* top: 34%; */ | ||||
|   left: 53%; | ||||
|   width: 90px; | ||||
|   top: 34%; | ||||
|   display: inline-block; | ||||
|   /* // x: 60, y: 58, */ | ||||
|   height: 1px; | ||||
|   | ||||
| @@ -10,7 +10,7 @@ | ||||
|           style=" | ||||
|             position: absolute; | ||||
|             top: 12%; | ||||
|             left: 15%; | ||||
|             left: 20%; | ||||
|             user-select: none; | ||||
|             display: flex; | ||||
|             flex-direction: column; | ||||
| @@ -31,7 +31,7 @@ | ||||
|           <p | ||||
|             style=" | ||||
|               margin: 0; | ||||
|               font-size: 24px; | ||||
|               font-size: 26px; | ||||
|               letter-spacing: 1px; | ||||
|               color: #26b9de; | ||||
|               opacity: 75%; | ||||
| @@ -52,8 +52,8 @@ | ||||
|           </p> | ||||
|         </div> | ||||
|         <img | ||||
|           src="../assets/images/map.png" | ||||
|           style="position: absolute; top: 00%; left: 11%; width: 50vw" | ||||
|           src="../assets/images/login.png" | ||||
|           style="position: absolute; top: 30%; left: 15%; width: 40vw" | ||||
|           alt="" | ||||
|         /> | ||||
|       </div> | ||||
| @@ -218,7 +218,7 @@ export default { | ||||
|   data() { | ||||
|     return { | ||||
|       codeUrl: "", | ||||
|       captchaEnable: false, | ||||
|       captchaEnable: true, | ||||
|       tenantEnable: true, | ||||
|       mobileCodeTimer: 0, | ||||
|       loginForm: { | ||||
|   | ||||
| @@ -1,12 +1,12 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2023-11-06 15:15:30 | ||||
|  * @LastEditTime: 2024-06-26 13:39:22 | ||||
|  * @LastEditTime: 2024-05-20 18:02:10 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <el-drawer class="drawer" :visible.sync="visible" size="65%" @closed="$emit('destroy')"> | ||||
|   <el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')"> | ||||
|     <small-title slot="title" :no-padding="true"> | ||||
|       {{ '碲化镉工厂生产数据详情' }} | ||||
|     </small-title> | ||||
| @@ -14,160 +14,142 @@ | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">工厂名称</p> | ||||
|           <p class="text">{{ factoryList[dataForm.factory] }}</p> | ||||
|           <p class="text">{{ dataForm.factory }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间维度</p> | ||||
|           <p class="text">{{ ['日', '周', '月', '年'][date] }}</p> | ||||
|           <p class="text">{{ date }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间</p> | ||||
|           <p class="text">{{ dataForm.datestr }}</p> | ||||
|           <p class="text">{{ dataForm.reportDate.length > 0 ? dataForm.reportDate[0] + '年' + dataForm.reportDate[1] + '月' + dataForm.reportDate[2] + '日' : '' }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-divider></el-divider> | ||||
|       <div v-if="glass === 0"> | ||||
|         <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|           {{ '芯片' }} | ||||
|         </small-title> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片产量(片)</p> | ||||
|             <p class="text">{{ dataForm.chipYieldSum }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片良率(%)</p> | ||||
|             <p class="text">{{ dataForm.chipYieldRate }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片BOM</p> | ||||
|             <p class="text">{{ dataForm.chipBom }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片总功率(MW)</p> | ||||
|             <p class="text">{{ dataForm.chipTotalPower }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">FTO投入量(片)</p> | ||||
|             <p class="text">{{ dataForm.ftoInput }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">CSS稼动率(%)</p> | ||||
|             <p class="text">{{ dataForm.chipCssMarriageRate }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片段OEE(%)</p> | ||||
|             <p class="text">{{ dataForm.chipOee }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片平均功率(W)</p> | ||||
|             <p class="text">{{ dataForm.chipAveragePower }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片人均产量(片/人)</p> | ||||
|             <p class="text">{{ dataForm.chipAnnualAverageProduction }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片产能利用率(%)</p> | ||||
|             <p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|       </div> | ||||
|       <div v-if="glass === 1"> | ||||
|         <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|           {{ '标准组件' }} | ||||
|         </small-title> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">封装BOM</p> | ||||
|             <p class="text">{{ dataForm.componentBom }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">封装线OEE(%)</p> | ||||
|             <p class="text">{{ dataForm.componentOee }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">标准组件良率(%)</p> | ||||
|             <p class="text">{{ dataForm.componentYieldRate }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">标准组件产量(片)</p> | ||||
|             <p class="text">{{ dataForm.componentYield }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">标准组件总功率(MW)</p> | ||||
|             <p class="text">{{ dataForm.componentTotalPower }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">封装产能利用率(%)</p> | ||||
|             <p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">标准组件人均产量(片/人)</p> | ||||
|             <p class="text">{{ dataForm.componentAnnualAverageProduction }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">标准组件平均功率(W)</p> | ||||
|             <p class="text">{{ dataForm.componentAveragePower }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">标准组件转化效率</p> | ||||
|             <p class="text">{{ dataForm.componentTransRate }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片投入</p> | ||||
|             <p class="text">{{ dataForm.chipInput }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|       </div> | ||||
|       <div v-if="glass === 2"> | ||||
|         <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|           {{ 'BIPV产品' }} | ||||
|         </small-title> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">产品产量(㎡)</p> | ||||
|             <p class="text">{{ dataForm.bipvProductOutput }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">人均产量(㎡/人)</p> | ||||
|             <p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片使用量(片)</p> | ||||
|             <p class="text">{{ dataForm.bipvChipUsage }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">芯片利用率(%)</p> | ||||
|             <p class="text">{{ dataForm.bipvChipUtilizationRate }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24"> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">内部材料成本(元/㎡)</p> | ||||
|             <p class="text">{{ dataForm.bipvInsideMaterialCost }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">OEM及委外材料成本(元/㎡)</p> | ||||
|             <p class="text">{{ dataForm.code }}</p> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <p class="title">综合材料成本(元/㎡)</p> | ||||
|             <p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|       </div> | ||||
|       <div v-if="glass === 4"> | ||||
|         <!-- 铜铟镓硒待完成 --> | ||||
|       </div> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ '芯片' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片良率</p> | ||||
|           <p class="text">{{ dataForm.yieldRate }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片BOM</p> | ||||
|           <p class="text">{{ dataForm.bom }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片总功率</p> | ||||
|           <p class="text">{{ dataForm.totalPower }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">FTO投入量</p> | ||||
|           <p class="text">{{ dataForm.chipInput }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">CSS稼动率</p> | ||||
|           <p class="text">{{ dataForm.marriageRate }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片段OEE</p> | ||||
|           <p class="text">{{ dataForm.oee }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片平均功率</p> | ||||
|           <p class="text">{{ dataForm.averagePower }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片人均产量</p> | ||||
|           <p class="text">{{ dataForm.annualAverageProduction }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产能利用率</p> | ||||
|           <p class="text">{{ dataForm.capacityUtilizationRate }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ '标准组件' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装BOM</p> | ||||
|           <!-- 没参数 --> | ||||
|           <!-- <p class="text">{{ dataForm.bom }}</p> --> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装线OEE</p> | ||||
|           <!-- <p class="text">{{ dataForm.code }}</p> --> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件良率</p> | ||||
|           <!-- <p class="text">{{ dataForm.productName }}</p> --> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件产量</p> | ||||
|           <!-- <p class="text">{{ dataForm.productName }}</p> --> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件总功率</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装产能利用率</p> | ||||
|           <!-- <p class="text">{{ dataForm.code }}</p> --> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件人均产量</p> | ||||
|           <!-- <p class="text">{{ dataForm.productName }}</p> --> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件平均功率</p> | ||||
|           <!-- <p class="text">{{ dataForm.productName }}</p> --> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ 'BIPV产品' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">产品产量</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">人均产量</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片使用量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片使用量</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ dataForm.code }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ dataForm.productName }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|     </div> | ||||
|   </el-drawer> | ||||
|  | ||||
| @@ -175,18 +157,24 @@ | ||||
|  | ||||
| <script> | ||||
| // import basicAdd from './basic-add'; | ||||
| import { getProduceDataDetail } from "@/api/produceData"; | ||||
| import { | ||||
|   getProduceDataDetail | ||||
| } from "@/api/produceData"; | ||||
| // import { getList, } from "@/api/base/qualityScrapType"; | ||||
| import SmallTitle from './SmallTitle'; | ||||
| import { factoryList } from "@/utils/constants"; | ||||
|  | ||||
| export default { | ||||
|   components: { | ||||
|     SmallTitle, | ||||
|   }, | ||||
|   // mixins: [basicAdd], | ||||
|   props: { | ||||
|     date: { | ||||
|       type: Number, | ||||
|       default: 0 | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       factoryList, | ||||
|       urlOptions: { | ||||
|         isGetCode: false, | ||||
|         // codeURL: getCode, | ||||
| @@ -210,8 +198,6 @@ export default { | ||||
|         } | ||||
|       ], | ||||
|       sectionList: [], | ||||
|       glass: 0, | ||||
|       date: 0, | ||||
|       visible: false, | ||||
|       dataForm: { | ||||
|         id: undefined, | ||||
| @@ -243,16 +229,11 @@ export default { | ||||
|     // this.getCurrentTime() | ||||
|   }, | ||||
|   methods: { | ||||
|     init(id, type, glass) { | ||||
|     init(id) { | ||||
|       this.visible = true | ||||
|       this.glass = glass | ||||
|       this.date = type | ||||
|       console.log('打印', id, glass) | ||||
|       console.log('打印', id) | ||||
|       if (id) { | ||||
|         getProduceDataDetail({ | ||||
|           id: id, | ||||
|           type: type | ||||
|         }).then(res => { | ||||
|         getProduceDataDetail(id).then(res => { | ||||
|           this.dataForm = res.data | ||||
|           console.log('你好', res.data) | ||||
|         }) | ||||
| @@ -369,6 +350,7 @@ export default { | ||||
|   margin: 0; | ||||
|   padding: 32px 32px 24px; | ||||
|   border-bottom: 1px solid #dcdfe6; | ||||
|   margin-bottom: 30px; | ||||
| } | ||||
| .detailBox p { | ||||
|   margin: 0; | ||||
| @@ -392,9 +374,5 @@ export default { | ||||
|   color: rgba(102,102,102,0.75); | ||||
|   padding-bottom: 20px; | ||||
| } | ||||
| .detailBox { | ||||
|   width: 98%; | ||||
|   padding-top: 30px; | ||||
| } | ||||
|  | ||||
| </style> | ||||
|   | ||||
| @@ -1,26 +1,26 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-06-27 14:56:20 | ||||
|  * @LastEditTime: 2024-05-22 15:25:11 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 200px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;"> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;"> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item label="时间维度" prop="type"> | ||||
|           <el-select v-model="listQuery.type" size="small" clearable placeholder="请选择"> | ||||
|         <el-form-item label="时间维度" prop="date"> | ||||
|           <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime"> | ||||
|         <el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至" | ||||
|             start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|             start-placeholder="开始日期" value-format="timestamp" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime"> | ||||
|         <el-form-item v-show="listQuery.date === 1" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
| @@ -28,27 +28,27 @@ | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           <!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px"> | ||||
|           <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px"> | ||||
|             {{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | ||||
|           </span> --> | ||||
|           </span> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.type === 2" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="yyyy-MM-dd" range-separator="至" | ||||
|         <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至" | ||||
|             start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year" | ||||
|         <el-form-item v-show="listQuery.date === 3" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.start" format="yyyy-MM-dd" value-format="timestamp" type="year" | ||||
|             placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间" | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.end" format="yyyy-MM-dd" value-format="timestamp" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="工厂名称" prop="factory"> | ||||
|           <el-select size="small" clearable v-model="listQuery.factory" placeholder="请选择工厂名称" multiple > | ||||
|             <el-option v-for="item in factoryArray" :key="item.id" :label="item.name" :value="item.id"> | ||||
|         <el-form-item label="工厂名称" prop="factorys"> | ||||
|           <el-select size="small" clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple > | ||||
|             <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
| @@ -58,8 +58,8 @@ | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item label="玻璃类型" prop="glass"> | ||||
|           <el-select size="small" clearable v-model="listQuery.glass" multiple placeholder="请选择玻璃类型"> | ||||
|         <el-form-item label="玻璃类型" prop="type"> | ||||
|           <el-select size="small" clearable v-model="listQuery.type" placeholder="请选择玻璃类型"> | ||||
|             <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
| @@ -74,7 +74,7 @@ | ||||
|       <!-- <el-row :gutter="24"> --> | ||||
|       <!-- <el-col :span="12" v-for="item in  dataList" :key="item.id"> --> | ||||
|       <search-bar :formConfigs="formConfig1" ref="searchBarForm1" style="margin-bottom: 0" /> | ||||
|       <line-chart ref="lineChart" class="yearChart" style="height: 45vh;width: 100%"></line-chart> | ||||
|       <line-chart class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
|       <!-- </el-col> --> | ||||
|       <!-- <el-col :span="12"> | ||||
|             <line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart> | ||||
| @@ -82,19 +82,19 @@ | ||||
|     </div> | ||||
|     <div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto; padding: 16px;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" style="margin-bottom: 0" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData" :max-height="tableH"> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size" | ||||
|         :table-data="tableData"> | ||||
|         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" | ||||
|           :method-list="tableBtn" @clickBtn="handleClick" /> | ||||
|       </base-table> | ||||
|       <pagination | ||||
|         :limit.sync="listQuery.pageSize" | ||||
|         :page.sync="listQuery.pageNo" | ||||
|         :limit.sync="listQuery.size" | ||||
|         :page.sync="listQuery.current" | ||||
|         :total="listQuery.total" | ||||
|         @pagination="getDataList" | ||||
|       /> | ||||
|     </div> | ||||
|     <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> | ||||
|     <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> | ||||
|     <!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all" | ||||
|       :type="listQuery.reportType" @refreshDataList="getDataList" /> --> | ||||
|     <!-- <pagination | ||||
| @@ -106,38 +106,35 @@ | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from "@/utils/ruoyi"; | ||||
| import tableHeightMixin from "@/mixins/tableHeightMixin"; | ||||
| import { getProduceDataPage, getproddata, exportOutPutExcel } from '@/api/produceData'; | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| import { getProduceDataPage, exportOutPutExcel } from '@/api/produceData'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| import ButtonNav from '@/components/ButtonNav' | ||||
| import basicPage from '@/mixins/basic-page' | ||||
| import AddOrUpdate from './add-or-updata' | ||||
| import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants"; | ||||
| import AddOrUpdate from './add-or-updata'; | ||||
|  | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart, ButtonNav, AddOrUpdate }, | ||||
|   mixins: [basicPage, tableHeightMixin], | ||||
|   mixins: [basicPage], | ||||
| 	data() { | ||||
|     return { | ||||
|       factoryList, | ||||
|       factoryArray, | ||||
|       factoryArray1, | ||||
|       listQuery: { | ||||
|         pageSize: 20, | ||||
|         pageNo: 1, | ||||
|         factory: undefined, | ||||
|         size: 20, | ||||
|         current: 1, | ||||
|         factorys: [], | ||||
|         total: 0, | ||||
|         type: 0, // 时间维度 | ||||
|         glass: undefined, // 玻璃类型 | ||||
|         date: 1, | ||||
|         type:undefined, | ||||
|         // reportType: 2, | ||||
|         startDate: undefined, | ||||
|         endDate:undefined, | ||||
|         reportTime: null, | ||||
|         start: null, | ||||
|         end: null | ||||
|         beginTime: undefined, | ||||
|         endTime:undefined, | ||||
|         reportTime: [], | ||||
|         start: undefined, | ||||
|         end: undefined | ||||
|       }, | ||||
|       detailOrUpdateVisible:false, | ||||
|       date1: undefined, | ||||
| @@ -154,7 +151,7 @@ export default { | ||||
|       ].filter((v) => v), | ||||
|       typeList: [ | ||||
|         { | ||||
|           name: '玻璃芯片', | ||||
|           name: '芯片', | ||||
|           id: 0, | ||||
|         }, | ||||
|         { | ||||
| @@ -165,11 +162,32 @@ export default { | ||||
|           name: 'BIPV产品', | ||||
|           id: 2, | ||||
|         }, | ||||
|         // { | ||||
|         //   name: '定制组件', | ||||
|         //   id: 3, | ||||
|         // }, | ||||
|       ], | ||||
|       // weekNum: undefined, | ||||
|       dataList: [ | ||||
|         { | ||||
|           id:'first', | ||||
|         }, | ||||
|          { | ||||
|           id: 'second', | ||||
|         }, | ||||
|          { | ||||
|           id: 'third', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fourth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'fifth', | ||||
|         }, | ||||
|          { | ||||
|           id: 'sixth', | ||||
|         }, | ||||
|       ], | ||||
| 			urlOptions: { | ||||
| 				// getDataListURL: getGlassPage, | ||||
| 				// exportURL: exportGlasscExcel | ||||
|       }, | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: 'title', | ||||
| @@ -200,18 +218,48 @@ export default { | ||||
|           label: '年' | ||||
|         } | ||||
|       ], | ||||
|       factoryList: [ | ||||
|         { | ||||
|           name: '瑞昌中建材光电材料有限公司', | ||||
|           id: 0 | ||||
|         }, | ||||
|         { | ||||
|           name: '邯郸中建材光电材料有限公司', | ||||
|           id: 1 | ||||
|         }, | ||||
|         { | ||||
|           name: '中建材株洲光电材料有限公司', | ||||
|           id: 2 | ||||
|         }, | ||||
|         { | ||||
|           name:  '佳木斯中建材光电材料有限公司', | ||||
|           id: 3 | ||||
|         }, | ||||
|         { | ||||
|           name:  '成都中建材光电材料有限公司', | ||||
|           id: 4 | ||||
|         }, | ||||
|         { | ||||
|           name:  '凯盛光伏材料有限公司', | ||||
|           id: 5 | ||||
|         }, | ||||
|         { | ||||
|           name:  '蚌埠兴科玻璃有限公司', | ||||
|           id: 6 | ||||
|         } | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         { | ||||
|           prop: 'datestr', | ||||
|           prop: 'tableTime', | ||||
|           label: '日期', | ||||
|           minWidth: 120, | ||||
|           minWidth: 100, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'factory', | ||||
|           label: '工厂名称', | ||||
|           filter: (val) =>  factoryList[val], | ||||
|           minWidth: 180, | ||||
|           filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val], | ||||
|           minWidth: 200, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
| @@ -220,54 +268,47 @@ export default { | ||||
|           filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val] | ||||
|         }, | ||||
|         { | ||||
|           prop: 'inputNum', | ||||
|           prop: 'inputNumber', | ||||
|           label: '投入数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'outputNum', | ||||
|           prop: 'outputNumber', | ||||
|           label: '产出数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'goodNum', | ||||
|           prop: 'goodNumber', | ||||
|           label: '良品数量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'goodRatio', | ||||
|           prop: 'yieldRate', | ||||
|           label: '良品率%', | ||||
|           filter: (val) => val + '%' | ||||
|         }, | ||||
|       ], | ||||
|       tableData: [], | ||||
|       lineData: [], | ||||
|       chart: null, | ||||
|       seriesList: [], | ||||
|       colorList: ['#7164FF',  '#63BDFF', '#8EF0AB', '#FFCE6A'] | ||||
|       xAxis: [] | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
|   }, | ||||
|   // computed: { | ||||
|   //   weekNum() { | ||||
|   //     return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|   //   }, | ||||
|   // }, | ||||
|   created() { | ||||
|     const today = new Date() | ||||
|     const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000)) | ||||
|     this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD') | ||||
|     this.listQuery.endDate = moment(today).format('yyyy-MM-DD') | ||||
|     this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate] | ||||
| 	}, | ||||
|   computed: { | ||||
|     weekNum() { | ||||
|       return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|     }, | ||||
|   }, | ||||
| 	mounted() { | ||||
|     this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     otherMethods(val) { | ||||
|       this.detailOrUpdateVisible = true; | ||||
|       this.addOrEditTitle = "详情"; | ||||
|       this.$nextTick(() => { | ||||
|         this.$refs.detailOrUpdate.init(val.data.id, this.listQuery.type, val.data.glassType); | ||||
|         this.$refs.detailOrUpdate.init(val.data.id); | ||||
|       }); | ||||
|     }, | ||||
|     // buttonClick() { | ||||
|  | ||||
|     // }, | ||||
|     getYear(e) { | ||||
|       if (this.listQuery.end - this.listQuery.start > 10*365*24*60*60*1000) { | ||||
|         this.$message({ | ||||
| @@ -279,16 +320,13 @@ export default { | ||||
|         this.listQuery.end = undefined | ||||
|         // console.log(); | ||||
|       } else { | ||||
|         this.listQuery.startDate = this.listQuery.start | ||||
|         this.listQuery.endDate = this.listQuery.end | ||||
|       } | ||||
|       if (!this.listQuery.start && !this.listQuery.end) { | ||||
|         this.listQuery.startDate = undefined | ||||
|         this.listQuery.endDate = undefined | ||||
|         this.listQuery.beginTime = this.listQuery.start | ||||
|         this.listQuery.endTime = this.listQuery.end | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     onValueChange(picker, k) { // 选中近k周后触发的操作 | ||||
|       // console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1]) | ||||
|       if (this.listQuery.start && this.listQuery.end) { | ||||
|         console.log(this.listQuery.reportTime) | ||||
|         this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
| @@ -301,14 +339,10 @@ export default { | ||||
|             type: 'warning' | ||||
|           }); | ||||
|         } else { | ||||
|           this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD') | ||||
|           this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD') | ||||
|           this.listQuery.beginTime = this.listQuery.start.getTime() - 24 * 60 * 60 * 1000 | ||||
|           this.listQuery.endTime = this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000 | ||||
|         } | ||||
|       } | ||||
|       if (!this.listQuery.start && !this.listQuery.end) { | ||||
|         this.listQuery.startDate = undefined | ||||
|         this.listQuery.endDate = undefined | ||||
|       } | ||||
|     }, | ||||
|     changeDayTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
| @@ -323,12 +357,10 @@ export default { | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.startDate = this.listQuery.reportTime[0] | ||||
|           this.listQuery.endDate = this.listQuery.reportTime[1] | ||||
|           this.listQuery.beginTime = this.listQuery.reportTime[0] | ||||
|           this.listQuery.endTime = this.listQuery.reportTime[1] | ||||
|         } | ||||
|       } else { | ||||
|         this.listQuery.startDate = undefined | ||||
|         this.listQuery.endDate = undefined | ||||
|       } | ||||
|     }, | ||||
|     changeTime(value) { | ||||
| @@ -341,142 +373,89 @@ export default { | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.startDate = this.listQuery.reportTime[0] | ||||
|           this.listQuery.endDate = this.listQuery.reportTime[1] | ||||
|           this.listQuery.beginTime = this.listQuery.reportTime[0] | ||||
|           this.listQuery.endTime = this.listQuery.reportTime[1] | ||||
|         } | ||||
|       } else { | ||||
|         this.listQuery.startDate = undefined | ||||
|         this.listQuery.endDate = undefined | ||||
|         console.log(this.listQuery.reportTime[0]) | ||||
|       } | ||||
|     }, | ||||
|     // async getDict() { | ||||
| 			// 产线列表 | ||||
| 			// const res = await getCorePLList(); | ||||
| 			// this.proLineList = res.data; | ||||
| 		// }, | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|       if (this.listQuery.type === '') { | ||||
|         this.$message.warning('请选择时间维度!') | ||||
|         return | ||||
|       } | ||||
|       if (this.listQuery.startDate === undefined) { | ||||
|         this.$message.warning('请选择时间范围!') | ||||
|       } else { | ||||
|         await getProduceDataPage(this.listQuery).then(res => { | ||||
|           console.log(res) | ||||
|           if (res.code === 0) { | ||||
|             this.tableData = res.data.records | ||||
|             this.listQuery.total = res.data.total | ||||
|           } | ||||
|         }) | ||||
|  | ||||
|         // 图表 | ||||
|         await getproddata(this.listQuery).then(resp => { | ||||
|           if (resp.data?.length > 0) { | ||||
|             const chartData = Object.groupBy(resp.data, (member) => member.datestr) | ||||
|             this.buildChart(chartData, resp.data) | ||||
|           } else { | ||||
|             this.$refs.lineChart.initChart([], []) | ||||
|           } | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
|     buildChart(data, dataList) { | ||||
|       let xAxisData = [] | ||||
|       this.seriesList = [] | ||||
|       // x轴数据 | ||||
|       xAxisData = Object.keys(data) | ||||
|  | ||||
|       // y轴数据 | ||||
|       this.factoryArray.forEach(fac => { | ||||
|         let i =  0 | ||||
|         while ( i < 3) { | ||||
|           // 下标 | ||||
|           const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i] | ||||
|           // let oneChart = {} | ||||
|           xAxisData.forEach((x, index) => { | ||||
|             if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) { | ||||
|               let series = { | ||||
|                 name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id, | ||||
|                 type: 'bar', | ||||
|                 stack: String(fac.id), | ||||
|                 data: Array(xAxisData.length).fill(0), | ||||
|                 barWidth: 20, | ||||
|                 itemStyle: { | ||||
|                   color: this.colorList[i] | ||||
|                 }, | ||||
|                 label: { | ||||
|                   show: i === 2 ? true : false, | ||||
|                   position: 'top', | ||||
|                   formatter(params) { | ||||
|                     return fac.name.substring(0, 2) | ||||
|                   } | ||||
|                 } | ||||
|               } | ||||
|               dataList.forEach(item => { | ||||
|                 if (fac.id === item.factory && item.datestr === x) { | ||||
|                   series.data[index] = item[index1] | ||||
|                 } | ||||
|               }) | ||||
|               this.seriesList.push(series) | ||||
|             } else { | ||||
|               this.listQuery.glass.forEach(gl => { | ||||
|                 if (gl === i) { | ||||
|                   let series = { | ||||
|                     name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id, | ||||
|                     type: 'bar', | ||||
|                     stack: String(fac.id), | ||||
|                     data: Array(xAxisData.length).fill(0), | ||||
|                     barWidth: 20, | ||||
|                     itemStyle: { | ||||
|                       color: this.colorList[i] | ||||
|                     }, | ||||
|                     label: { | ||||
|                       show: true, | ||||
|                       position: 'top', | ||||
|                       formatter(params) { | ||||
|                         if (params.value === 0) { | ||||
|                           return '' | ||||
|                         } else { | ||||
|                           // return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]] | ||||
|                           return fac.name.substring(0, 2) | ||||
|                         } | ||||
|                       } | ||||
|                     } | ||||
|                   } | ||||
|                   dataList.forEach(item => { | ||||
|                     if (fac.id === item.factory && item.datestr === x) { | ||||
|                       series.data[index] = item[index1] | ||||
|                     } | ||||
|                   }) | ||||
|                   this.seriesList.push(series) | ||||
|                 } | ||||
|               }) | ||||
|             } | ||||
|             // let series = { | ||||
|             //   name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id, | ||||
|             //   type: 'bar', | ||||
|             //   stack: String(fac.id), | ||||
|             //   data: Array(xAxisData.length).fill(0), | ||||
|             //   barWidth: 20, | ||||
|             //   itemStyle: { | ||||
|             //     color: this.colorList[i] | ||||
|             //   } | ||||
|             // } | ||||
|             // dataList.forEach(item => { | ||||
|             //   if (fac.id === item.factory && item.datestr === x) { | ||||
|             //     series.data[index] = item[index1] | ||||
|             //   } | ||||
|             // }) | ||||
|             // this.seriesList.push(series) | ||||
|           }) | ||||
|           i ++ | ||||
|         } | ||||
|       const res = await getProduceDataPage(this.listQuery) | ||||
|       console.log(res) | ||||
|       this.tableData = res.data.records | ||||
|       this.tableData.forEach(item => { | ||||
|         item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '-' + item.reportDate[1] + '-' + item.reportDate[2] : '--' | ||||
|       }) | ||||
|       console.log('你好', this.seriesList) | ||||
|       this.$refs.lineChart.initChart(xAxisData, this.seriesList) | ||||
|       this.listQuery.total = res.data.total | ||||
|       this.buildChart(this.tableData) | ||||
|     }, | ||||
|     buildChart(list) { | ||||
|       const chartList = Object.groupBy(list, (item) => item.tableTime) | ||||
|       this.xAxis = [] | ||||
|       this.seriesList = [] | ||||
|       for (const keyIndex in chartList) { | ||||
|         // X坐标轴数据 | ||||
|         this.xAxis.push(keyIndex) | ||||
|       } | ||||
|       // y轴数据 | ||||
|       for (const y of this.factoryList) { | ||||
|         // y: {name: , id: } | ||||
|         const seriesItem = { | ||||
|           name: y.name, | ||||
|             type: 'bar', | ||||
|             emphasis: { | ||||
|               focus: 'series' | ||||
|             }, | ||||
|           data: Array(this.xAxis.length).fill(0) | ||||
|         } | ||||
|         for (const a in chartList) { | ||||
|           for (const z of chartList[a]) { | ||||
|             this.xAxis.forEach((item, index) => { | ||||
|               if (z.factory === y.id && a === item) { | ||||
|                 seriesItem.data[index] = z.goodNumber | ||||
|               } | ||||
|             }) | ||||
|           } | ||||
|         } | ||||
|         this.seriesList.push(seriesItem) | ||||
|       } | ||||
|       this.$refs.lineChart.initChart(this.xAxis, this.seriesList) | ||||
|     }, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined; | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 20; | ||||
| 					this.listQuery.current = 1; | ||||
| 					this.listQuery.size = 20; | ||||
| 					this.getDataList(); | ||||
| 					break; | ||||
| 				case 'export': | ||||
| @@ -491,8 +470,8 @@ export default { | ||||
|       this.$modal.confirm('是否确认导出生产数据?').then(() => { | ||||
|         // 处理查询参数 | ||||
|         let params = {...this.listQuery}; | ||||
|         params.pageNo = 1; | ||||
|         params.pageSize = 999; | ||||
|         params.current = 1; | ||||
|         params.size = 999; | ||||
|         this.exportLoading = true; | ||||
|         return exportOutPutExcel(params); | ||||
|       }).then(response => { | ||||
|   | ||||
| @@ -2,7 +2,7 @@ | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2024-06-24 11:13:48 | ||||
|  * @LastEditTime: 2024-05-22 13:48:58 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| @@ -16,8 +16,6 @@ | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| import resize from '@/mixins/resize' | ||||
| import { factoryListabbr } from "@/utils/constants"; | ||||
|  | ||||
| export default { | ||||
|   name: 'OverviewBar', | ||||
|   mixins: [resize], | ||||
| @@ -40,7 +38,7 @@ export default { | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '35vh' | ||||
|       default: '30vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
| @@ -74,105 +72,63 @@ export default { | ||||
|   }, | ||||
|   methods: { | ||||
|     initChart(xAxis, seriesList) { | ||||
|       console.log('2', xAxis, seriesList) | ||||
|       if (xAxis.length === 0) { | ||||
|         this.chart.clear() | ||||
|       } | ||||
|       else { | ||||
|         this.chart = echarts.init(document.getElementById(this.id)) | ||||
|         console.log(this.$parent); | ||||
|         this.chart.setOption({ | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       console.log(this.$parent); | ||||
|       this.chart.setOption({ | ||||
|         title: { | ||||
|           text: '', | ||||
|           // subtext: 'Fake Data' | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         legend: { | ||||
|           // data: ['工厂1', '工厂2'], | ||||
|           right: '90px', | ||||
|           top: '0%', | ||||
|           icon: 'rect', | ||||
|           itemWidth: 10, | ||||
|           itemHeight: 10, | ||||
|           itemGap: 40, | ||||
|           formatter(name) { | ||||
|             return name.split('-')[0] | ||||
|           }, | ||||
|           data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0'] | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'axis', | ||||
|           formatter: function(params) { | ||||
|             let result = ` | ||||
|             <div style="width: 270px; display: flex"> | ||||
|               <div style="width: 150px">${params[0].name}</div> | ||||
|               <div style="width: 60px">${factoryListabbr[0]}</div> | ||||
|               <div style="width: 60px">${factoryListabbr[1]}</div> | ||||
|             </div>` | ||||
|             const newArray = params.map(p => { | ||||
|               return { | ||||
|                 glass: p.seriesName.split('-')[0], // 玻璃类型 | ||||
|                 factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称 | ||||
|                 value: p.value, | ||||
|                 name: p.name, | ||||
|                 marker: p.marker | ||||
|               } | ||||
|             }) | ||||
|             const analyzeList = Object.groupBy(newArray, (member) => member.glass) | ||||
|             for (let g in analyzeList) { | ||||
|               // date => 玻璃类型 | ||||
|               let oneData = `<div style="width: 270px; display: flex"> | ||||
|               <div style="width: 150px">${analyzeList[g][0].marker} ${g}</div>` | ||||
|               for (let fac of factoryListabbr) { | ||||
|                 let goodNum = 0 | ||||
|                 for (let ana of analyzeList[g]) { | ||||
|                   if (ana.factoryName === fac && ana.value !== 0) { | ||||
|                     goodNum = ana.value | ||||
|                   } | ||||
|                 } | ||||
|                 oneData += `<div style="width: 60px">${goodNum}</div>` | ||||
|               } | ||||
|               result = result + oneData + '</div>' | ||||
|             } | ||||
|             return result | ||||
|           } | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         // toolbox: { | ||||
|         //   show: true, | ||||
|         //   feature: { | ||||
|         //     dataView: { show: true, readOnly: false }, | ||||
|         //     magicType: { show: true, type: ['line', 'bar'] }, | ||||
|         //     restore: { show: true }, | ||||
|         //     saveAsImage: { show: true } | ||||
|         //   } | ||||
|         // }, | ||||
|         calculable: true, | ||||
|         xAxis: [ | ||||
|           { | ||||
|             type: 'category', | ||||
|             name: '日期', | ||||
|             data: xAxis, | ||||
|             axisLabel: { | ||||
|               rotate: 25 | ||||
|             } | ||||
|             // prettier-ignore | ||||
|             data: xAxis | ||||
|           } | ||||
|         ], | ||||
|         yAxis: [ | ||||
|           { | ||||
|             type: 'value', | ||||
|             name: '单位:个' | ||||
|             type: 'value' | ||||
|           } | ||||
|         ], | ||||
|         grid: { | ||||
|           top: '10%', | ||||
|           top: '20%', | ||||
|           left: "1%", | ||||
|           right: "5%", | ||||
|           bottom: "0%", | ||||
|           right: "3%", | ||||
|           bottom: "1%", | ||||
|           containLabel: true | ||||
|         }, | ||||
|         series: seriesList | ||||
|       }, true) | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .chartTooltipSpan { | ||||
|   width: 50px; | ||||
|   background: #787878; | ||||
| } | ||||
| /* .reportChart { | ||||
|   position: absolute; | ||||
|   height: 100%; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-17 16:31:51 | ||||
|  * @LastEditTime: 2024-06-24 15:43:50 | ||||
|  * @LastEditTime: 2024-05-20 18:09:09 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -11,7 +11,7 @@ | ||||
|       {{ dataForm.id ? '编辑' : '新增' }} | ||||
|     </small-title> | ||||
|     <div class="detailBox"> | ||||
|       <el-form ref="form" :model="dataForm" label-width="80px" :rules="dataRule" label-position="top"> | ||||
|       <el-form ref="form" :model="dataForm" label-width="80px" label-position="top"> | ||||
|         <el-row :gutter="24" style="padding: 0 32px;"> | ||||
|           <el-col :span="8"> | ||||
|             <el-form-item v-if="ftype === 0" label="工厂名称" prop="factory"> | ||||
| @@ -31,28 +31,18 @@ | ||||
|             <el-form-item label="时间维度" prop="targetType"> | ||||
|               <el-select v-model="dataForm.targetType" placeholder="请选择时间维度" clearable @change="clearTime"> | ||||
|                 <!-- <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> --> | ||||
|                 <el-option label="日" :value="0" /> | ||||
|                 <el-option label="周" :value="1" /> | ||||
|                 <el-option label="月" :value="2" /> | ||||
|                 <el-option label="年" :value="3" /> | ||||
|                 <el-option label="月" :value="0" /> | ||||
|                 <el-option label="年" :value="1" /> | ||||
|               </el-select> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="8"> | ||||
|             <el-form-item v-show="dataForm.targetType === 0 || dataForm.targetType === ''" label="时间" prop="reportTime"> | ||||
|               <el-date-picker v-model="dataForm.reportTime" value-format="yyyyMMdd" type="date" placeholder="选择日"> | ||||
|             <el-form-item v-show="dataForm.targetType !== 1" label="时间" prop="reportTime"> | ||||
|               <el-date-picker v-model="dataForm.reportTime" value-format="yyyy-MM" type="month" placeholder="选择月份"> | ||||
|               </el-date-picker> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-show="dataForm.targetType === 1" label="时间" prop="reportTime"> | ||||
|               <el-date-picker v-model="week" type="week" format="yyyy 第 WW 周" placeholder="选择周" @change="setReportTime"> | ||||
|               </el-date-picker> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-show="dataForm.targetType === 2" label="时间" prop="reportTime"> | ||||
|               <el-date-picker v-model="dataForm.reportTime" value-format="yyyyMM" type="month" placeholder="选择月份"> | ||||
|               </el-date-picker> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-show="dataForm.targetType === 3" label="时间" prop="reportTime"> | ||||
|               <el-date-picker clearable v-model="dataForm.reportTime" value-format="yyyy" type="year" placeholder="开始时间"> | ||||
|             <el-form-item v-show="dataForm.targetType === 1" label="时间" prop="targetYear"> | ||||
|               <el-date-picker clearable v-model="dataForm.showYear" value-format="yyyy" type="year" placeholder="开始时间"> | ||||
|               </el-date-picker> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
| @@ -63,12 +53,12 @@ | ||||
|         </small-title> | ||||
|         <el-row :gutter="24" style="padding: 0 32px;"> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片产量(片)" prop="chipYield"> | ||||
|             <el-form-item label="芯片产量" prop="chipYield"> | ||||
|               <el-input-number v-model="dataForm.chipYield" :precision="0" controls-position="right" placeholder="请输入芯片产量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片良率(%)" prop="chipYieldRate"> | ||||
|             <el-form-item label="芯片良率" prop="chipYieldRate"> | ||||
|               <el-input-number v-model="dataForm.chipYieldRate" :precision="2" :max="100" controls-position="right" placeholder="请输入芯片良率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
| @@ -78,47 +68,47 @@ | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片总功率(MW)" prop="chipTotalPower"> | ||||
|             <el-form-item label="芯片总功率" prop="chipTotalPower"> | ||||
|               <el-input-number v-model="dataForm.chipTotalPower" :precision="2" controls-position="right" placeholder="请输入芯片总功率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24" style="padding: 0 32px;"> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item v-if="ftype === 0" label="FTO投入量(片)" prop="ftoInput"> | ||||
|             <el-form-item v-if="ftype === 0" label="FTO投入量" prop="ftoInput"> | ||||
|               <el-input-number v-model="dataForm.ftoInput" :precision="0" controls-position="right" placeholder="请输入FTO投入量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-else label="钼电极投入量(片)" prop="molybdenumElectrodeInput"> | ||||
|             <el-form-item v-else label="钼电极投入量" prop="molybdenumElectrodeInput"> | ||||
|               <el-input-number v-model="dataForm.molybdenumElectrodeInput" :precision="0" controls-position="right" placeholder="请输入钼电极投入量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item v-if="ftype === 0" label="CSS稼动率(%)" prop="chipCssMarriageRate"> | ||||
|             <el-form-item v-if="ftype === 0" label="CSS稼动率" prop="chipCssMarriageRate"> | ||||
|               <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入CSS稼动率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|             <el-form-item v-else label="PID6稼动率(%)" prop="chipCssMarriageRate"> | ||||
|             <el-form-item v-else label="PID6稼动率" prop="chipCssMarriageRate"> | ||||
|               <el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入PID6稼动率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片段OEE(%)" prop="chipOee"> | ||||
|             <el-form-item label="芯片段OEE" prop="chipOee"> | ||||
|               <el-input-number v-model="dataForm.chipOee" :precision="2" controls-position="right" placeholder="请输入芯片段OEE" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片平均功率(W)" prop="chipAveragePower"> | ||||
|             <el-form-item label="芯片平均功率" prop="chipAveragePower"> | ||||
|               <el-input-number v-model="dataForm.chipAveragePower" :precision="2" controls-position="right" placeholder="请输入芯片平均功率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24" style="padding: 0 32px;"> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片人均产量(片/人)" prop="chipAnnualAverageProduction"> | ||||
|             <el-form-item label="芯片人均产量" prop="chipAnnualAverageProduction"> | ||||
|               <el-input-number v-model="dataForm.chipAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入芯片人均产量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片产能利用率(%)" prop="chipCapacityUtilizationRate"> | ||||
|             <el-form-item label="芯片产能利用率" prop="chipCapacityUtilizationRate"> | ||||
|               <el-input-number v-model="dataForm.chipCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片产能利用率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
| @@ -134,47 +124,42 @@ | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="封装线OEE(%)" prop="componentOee"> | ||||
|             <el-form-item label="封装线OEE" prop="componentOee"> | ||||
|               <el-input-number v-model="dataForm.componentOee" :precision="2" controls-position="right" placeholder="请输入封装线OEE" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="标准组件良率(%)" prop="componentYieldRate"> | ||||
|             <el-form-item label="标准组件良率" prop="componentYieldRate"> | ||||
|               <el-input-number v-model="dataForm.componentYieldRate" :precision="2" controls-position="right" placeholder="请输入标准组件良率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="标准组件产量(片)" prop="componentYield"> | ||||
|             <el-form-item label="标准组件产量" prop="componentYield"> | ||||
|               <el-input-number v-model="dataForm.componentYield" :precision="0" controls-position="right" placeholder="请输入标准组件产量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24" style="padding: 0 32px;"> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="标准组件总功率(MW)" prop="componentTotalPower"> | ||||
|             <el-form-item label="标准组件总功率" prop="componentTotalPower"> | ||||
|               <el-input-number v-model="dataForm.componentTotalPower" :precision="2" controls-position="right" placeholder="请输入标准组件总功率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="封装产能利用率(%)" prop="componentCapacityUtilizationRate"> | ||||
|             <el-form-item label="封装产能利用率" prop="componentCapacityUtilizationRate"> | ||||
|               <el-input-number v-model="dataForm.componentCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入封装产能利用率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="标准组件人均产量(片/人)" prop="componentAnnualAverageProduction"> | ||||
|             <el-form-item label="标准组件人均产量" prop="componentAnnualAverageProduction"> | ||||
|               <el-input-number v-model="dataForm.componentAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入标准组件人均产量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="标准组件平均功率(W)" prop="componentAveragePower"> | ||||
|             <el-form-item label="标准组件平均功率" prop="componentAveragePower"> | ||||
|               <el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="标准组件转化效率" prop="componentConversionEfficiency"> | ||||
|               <el-input-number v-model="dataForm.componentConversionEfficiency" :precision="2" controls-position="right" placeholder="请输入标准组件转化效率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-divider></el-divider> | ||||
|  | ||||
| @@ -183,39 +168,39 @@ | ||||
|         </small-title> | ||||
|         <el-row :gutter="24" style="padding: 0 32px;"> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="产品产量(㎡)" prop="bipvProductOutput"> | ||||
|             <el-form-item label="产品产量" prop="bipvProductOutput"> | ||||
|               <el-input-number v-model="dataForm.bipvProductOutput" :precision="0" controls-position="right" placeholder="请输入产品产量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="人均产量(㎡/人)" prop="bipvAnnualAverageProduction"> | ||||
|             <el-form-item label="人均产量" prop="bipvAnnualAverageProduction"> | ||||
|               <el-input-number v-model="dataForm.bipvAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入人均产量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片使用量(片)" prop="bipvChipUsage"> | ||||
|             <el-form-item label="芯片使用量" prop="bipvChipUsage"> | ||||
|               <el-input-number v-model="dataForm.bipvChipUsage" :precision="0" controls-position="right" placeholder="请输入芯片使用量" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="芯片利用率(%)" prop="bipvChipUtilizationRate"> | ||||
|             <el-form-item label="芯片利用率" prop="bipvChipUtilizationRate"> | ||||
|               <el-input-number v-model="dataForm.bipvChipUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片利用率" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|         </el-row> | ||||
|         <el-row :gutter="24" style="padding: 0 32px;"> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="内部材料成本(元/㎡)" prop="bipvInsideMaterialCost"> | ||||
|             <el-form-item label="内部材料成本" prop="bipvInsideMaterialCost"> | ||||
|               <el-input-number v-model="dataForm.bipvInsideMaterialCost" :precision="2" controls-position="right" placeholder="请输入内部材料成本" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="OEM及委外材料成本(元/㎡)" prop="bipvOeeMaterialCost"> | ||||
|             <el-form-item label="OEM及委外材料成本" prop="bipvOeeMaterialCost"> | ||||
|               <el-input-number v-model="dataForm.bipvOeeMaterialCost" :precision="2" controls-position="right" placeholder="请输入OEM及委外材料成本" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
|           <el-col :span="6"> | ||||
|             <el-form-item label="综合材料成本(元/㎡)" prop="bipvComprehensiveMaterialCost"> | ||||
|             <el-form-item label="综合材料成本" prop="bipvComprehensiveMaterialCost"> | ||||
|               <el-input-number v-model="dataForm.bipvComprehensiveMaterialCost" :precision="2" controls-position="right" placeholder="请输入综合材料成本" style="width: 100%" /> | ||||
|             </el-form-item> | ||||
|           </el-col> | ||||
| @@ -240,7 +225,6 @@ | ||||
| import SmallTitle from './SmallTitle'; | ||||
| import { createProduce, getProduceTargetDetail, updateProduceTarget } from '@/api/produceData'; | ||||
| import { factoryList, tyjxfactoryList, dhgfactoryList } from "@/utils/constants"; | ||||
| import moment from 'moment' | ||||
|  | ||||
| export default { | ||||
|   components: { | ||||
| @@ -263,17 +247,57 @@ export default { | ||||
|       workOrderList: [], | ||||
|       detList: [], | ||||
|       teamList: [], | ||||
|       sourceList: [ | ||||
|         { | ||||
|           id: 1, | ||||
|           name: '手动', | ||||
|         }, | ||||
|         { | ||||
|           id: 2, | ||||
|           name: '自动', | ||||
|         } | ||||
|       ], | ||||
|       // factoryList: [ | ||||
|       //   { | ||||
|       //     name: '瑞昌中建材光电材料有限公司', | ||||
|       //     id: 0 | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '邯郸中建材光电材料有限公司', | ||||
|       //     id: 1 | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '中建材株洲光电材料有限公司', | ||||
|       //     id: 2 | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '佳木斯中建材光电材料有限公司', | ||||
|       //     id: 3 | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '成都中建材光电材料有限公司', | ||||
|       //     id: 4 | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '凯盛光伏材料有限公司', | ||||
|       //     id: 5 | ||||
|       //   }, | ||||
|       //   { | ||||
|       //     name: '蚌埠兴科玻璃有限公司', | ||||
|       //     id: 6 | ||||
|       //   } | ||||
|       // ], | ||||
|       sectionList: [], | ||||
|       visible: false, | ||||
|       // reportTime: undefined, | ||||
|       week: undefined, | ||||
|       dataForm: { | ||||
|         reportTime: undefined, | ||||
|         factoryType: 0, | ||||
|         id: undefined, | ||||
|         reportTime: undefined, // 月时间 | ||||
|         factory: undefined, | ||||
|         targetTime: undefined, | ||||
|         targetType: 0, | ||||
|         targetType: undefined, | ||||
|         targetYear: undefined, | ||||
|         showYear: undefined, | ||||
|         targetMonth: undefined, | ||||
|         chipYield: undefined, | ||||
|         chipYieldRate: undefined, | ||||
|         chipBom: undefined, | ||||
| @@ -299,14 +323,13 @@ export default { | ||||
|         bipvInsideMaterialCost: undefined, | ||||
|         bipvOeeMaterialCost: undefined, | ||||
|         bipvComprehensiveMaterialCost: undefined, | ||||
|         molybdenumElectrodeInput: undefined, | ||||
|         componentConversionEfficiency: undefined | ||||
|         molybdenumElectrodeInput: undefined | ||||
|       }, | ||||
|       // materialList: [], | ||||
|       dataRule: { | ||||
|         factory: [{ required: true, message: "工厂名称不能为空", trigger: "chnage" }], | ||||
|         reportTime: [{ required: true, message: "时间不能为空", trigger: "change" }], | ||||
|         targetType: [{ required: true, message: "时间维度不能为空", trigger: "change" }] | ||||
|         // materialId: [{ required: true, message: "", trigger: "blur" }], | ||||
|         // workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }], | ||||
|         // num: [{ required: true, message: "数量不能为空", trigger: "blur" }], | ||||
|         // detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }], | ||||
|  | ||||
|         // logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }], | ||||
| @@ -317,57 +340,57 @@ export default { | ||||
|     // this.getCurrentTime() | ||||
|   }, | ||||
|   methods: { | ||||
|     setReportTime() { | ||||
|       this.dataForm.reportTime = this.week | ||||
|     }, | ||||
|     clearTime() { | ||||
|       this.week = undefined | ||||
|       this.dataForm.reportTime = undefined | ||||
|     }, | ||||
|     formClear() { | ||||
|       if (this.$refs.dataForm !== undefined) { | ||||
|         this.$refs.dataForm.resetFields() | ||||
|       } | ||||
|     }, | ||||
|     // clearTime() { | ||||
|     //   this.dataForm.targetTime = undefined | ||||
|     // },  | ||||
|     clearTime() { | ||||
|       this.dataForm.targetYear = undefined | ||||
|       this.dataForm.targetMonth = undefined | ||||
|     }, | ||||
|     handleClose() { | ||||
|       this.$refs["form"].validate(valid => { | ||||
|         if (valid) { | ||||
|           // 新增 | ||||
|           if (this.dataForm.targetType === 1) { | ||||
|             this.dataForm.targetTime = this.week ? Number(moment(this.week.getTime()).format('YYYYWW')) : '' | ||||
|           } else { | ||||
|             this.dataForm.targetTime = this.dataForm.reportTime ? Number(this.dataForm.reportTime) : '' | ||||
|       // 新增 | ||||
|       if (this.dataForm.targetType === 0) { | ||||
|         const timeArray = this.dataForm.reportTime.split('-') | ||||
|         this.dataForm.targetYear = Number(timeArray[0]) | ||||
|         this.dataForm.targetMonth = Number(timeArray[1]) | ||||
|       } | ||||
|       if (this.dataForm.targetType === 1) { | ||||
|         this.dataForm.targetYear = Number(this.dataForm.showYear) | ||||
|       } | ||||
|       // if (this.dataForm.factory === 5) { | ||||
|       //   this.dataForm.factoryType = 1 | ||||
|       // } else { | ||||
|       //   this.dataForm.factoryType = 0 | ||||
|       // } | ||||
|       if (this.dataForm.id) { | ||||
|         // 修改 | ||||
|         updateProduceTarget({ | ||||
|           ...this.dataForm, | ||||
|           showYear: undefined, | ||||
|           reportTime: undefined | ||||
|         }).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.$message.success('修改成功!') | ||||
|             this.visible = false | ||||
|             this.$emit('refreshDataList') | ||||
|           } | ||||
|           if (this.dataForm.id) { | ||||
|             // 修改 | ||||
|             updateProduceTarget({ | ||||
|               ...this.dataForm, | ||||
|               reportTime: undefined | ||||
|             }).then(res => { | ||||
|               if (res.code === 0) { | ||||
|                 this.$message.success('修改成功!') | ||||
|                 this.visible = false | ||||
|                 this.$emit('refreshDataList') | ||||
|               } | ||||
|             }) | ||||
|           } else { | ||||
|             // 新增 | ||||
|             createProduce({ | ||||
|               ...this.dataForm, | ||||
|               reportTime: undefined | ||||
|             }).then(res => { | ||||
|               if (res.code === 0) { | ||||
|                 this.$message.success('新增成功!') | ||||
|                 this.visible = false | ||||
|                 this.$emit('refreshDataList') | ||||
|               } | ||||
|             }) | ||||
|         }) | ||||
|       } else { | ||||
|         // 新增 | ||||
|         createProduce({ | ||||
|           ...this.dataForm, | ||||
|           showYear: undefined, | ||||
|           reportTime: undefined | ||||
|         }).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.$message.success('新增成功!') | ||||
|             this.visible = false | ||||
|             this.$emit('refreshDataList') | ||||
|           } | ||||
|         } | ||||
|       }) | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
|     init(id) { | ||||
|       this.dataForm.id = id || undefined | ||||
| @@ -375,24 +398,20 @@ export default { | ||||
|       this.visible = true | ||||
|       if (this.dataForm.id) { | ||||
|         getProduceTargetDetail(this.dataForm.id).then(res => { | ||||
|           // this.dataForm = res.data | ||||
|           for (const i in res.data) { | ||||
|             if (res.data[i] !== null) { | ||||
|               this.dataForm[i] = res.data[i] | ||||
|           this.dataForm = res.data | ||||
|           if (this.dataForm.targetType === 1) { | ||||
|             if (this.dataForm.targetYear) { | ||||
|               this.$set(this.dataForm, 'showYear', String(this.dataForm.targetYear)) | ||||
|             } | ||||
|           } | ||||
|           if (this.dataForm.targetType === 0 || this.dataForm.targetType === 2 || this.dataForm.targetType === 3) { | ||||
|             // this.dataForm.reportTime = String(this.dataForm.targetTime) | ||||
|             this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetTime)) | ||||
|           } | ||||
|           if (this.dataForm.targetType === 1) { | ||||
|             const date = new Date() | ||||
|             date.setFullYear(String(this.dataForm.targetTime).slice(0, 4)) | ||||
|             date.setMonth(0) | ||||
|             date.setDate((Number(String(this.dataForm.targetTime).slice(4)) - 1)* 7 + 1) | ||||
|             // console.log('你好', date, moment(date).format('yyyyWW'), String(this.dataForm.targetTime).slice(4)) | ||||
|             this.week = date | ||||
|             this.$set(this.dataForm, 'reportTime', date) | ||||
|           if (this.dataForm.targetType === 0) { | ||||
|             if (this.dataForm.targetYear && this.dataForm.targetMonth !== null) { | ||||
|               if (this.dataForm.targetMonth < 10) { | ||||
|                 this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-0' + String(this.dataForm.targetMonth)) | ||||
|               } else { | ||||
|                 this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-' + String(this.dataForm.targetMonth)) | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         }) | ||||
|       } | ||||
| @@ -405,7 +424,6 @@ export default { | ||||
|   position: absolute; | ||||
|   bottom: 1%; | ||||
|   right: 2%; | ||||
|   z-index: 999; | ||||
| } | ||||
| .drawer-footer { | ||||
|   width: 100%; | ||||
|   | ||||
| @@ -1,15 +1,14 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2023-11-06 15:15:30 | ||||
|  * @LastEditTime: 2024-06-14 10:41:23 | ||||
|  * @LastEditTime: 2024-05-22 15:29:18 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <el-drawer class="drawer" :visible.sync="visible" size="70%" @closed="$emit('destroy')"> | ||||
|   <el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')"> | ||||
|     <small-title slot="title" :no-padding="true"> | ||||
|       <!-- {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }} --> | ||||
|       生产目标详情 | ||||
|       {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }} | ||||
|     </small-title> | ||||
|     <div class="detailBox"> | ||||
|       <el-row :gutter="24"> | ||||
| @@ -19,11 +18,11 @@ | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间维度</p> | ||||
|           <p class="text">{{ ['日', '周', '月', '年'][dataForm.targetType] }}</p> | ||||
|           <p class="text">{{ dataForm.targetType === 0 ? '月' : '年' }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="8"> | ||||
|           <p class="title">时间</p> | ||||
|           <p class="text">{{ dataForm.targetTime}}</p> | ||||
|           <p class="text">{{ dataForm.targetType === 1 ? dataForm.targetYear + '年' : dataForm.targetYear + '年' + dataForm.targetMonth + '月'}}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-divider></el-divider> | ||||
| @@ -32,11 +31,11 @@ | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产量(片)</p> | ||||
|           <p class="title">芯片产量</p> | ||||
|           <p class="text">{{ dataForm.chipYield }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片良率(%)</p> | ||||
|           <p class="title">芯片良率</p> | ||||
|           <p class="text">{{ dataForm.chipYieldRate }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
| @@ -44,35 +43,35 @@ | ||||
|           <p class="text">{{ dataForm.chipBom }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片总功率(MW)</p> | ||||
|           <p class="title">芯片总功率</p> | ||||
|           <p class="text">{{ dataForm.chipTotalPower }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">{{ ['FTO投入量(片)', '钼电极投入量(片)'][ftype] }}</p> | ||||
|           <p class="text">{{ [dataForm.ftoInput, dataForm.molybdenumElectrodeInput][ftype] }}</p> | ||||
|           <p class="title">{{ ftype === 0 ? 'FTO投入量' : '钼电极投入量' }}</p> | ||||
|           <p class="text">{{ ftype === 0 ? dataForm.ftoInput : dataForm.molybdenumElectrodeInput }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">{{ ['CSS稼动率(%)', 'PID6稼动率(%)'][ftype] }}</p> | ||||
|           <p class="title">{{ ftype === 0 ? 'CSS稼动率' : 'PID6稼动率' }}</p> | ||||
|           <p class="text">{{ dataForm.chipCssMarriageRate }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片段OEE(%)</p> | ||||
|           <p class="title">芯片段OEE</p> | ||||
|           <p class="text">{{ dataForm.chipOee }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片平均功率(W)</p> | ||||
|           <p class="title">芯片平均功率</p> | ||||
|           <p class="text">{{ dataForm.chipAveragePower }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片人均产量(片/人)</p> | ||||
|           <p class="title">芯片人均产量</p> | ||||
|           <p class="text">{{ dataForm.chipAnnualAverageProduction }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片产能利用率(%)</p> | ||||
|           <p class="title">芯片产能利用率</p> | ||||
|           <p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
| @@ -85,72 +84,68 @@ | ||||
|           <p class="text">{{ dataForm.componentBom }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装线OEE(%)</p> | ||||
|           <p class="title">封装线OEE</p> | ||||
|           <p class="text">{{ dataForm.componentOee }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件良率(%)</p> | ||||
|           <p class="title">标准组件良率</p> | ||||
|           <p class="text">{{ dataForm.componentYieldRate }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件产量(片)</p> | ||||
|           <p class="title">标准组件产量</p> | ||||
|           <p class="text">{{ dataForm.componentYield }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件总功率(MW)</p> | ||||
|           <p class="title">标准组件总功率</p> | ||||
|           <p class="text">{{ dataForm.componentTotalPower }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">封装产能利用率(%)</p> | ||||
|           <p class="title">封装产能利用率</p> | ||||
|           <p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件人均产量(片/人)</p> | ||||
|           <p class="title">标准组件人均产量</p> | ||||
|           <p class="text">{{ dataForm.componentAnnualAverageProduction }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件平均功率(W)</p> | ||||
|           <p class="title">标准组件平均功率</p> | ||||
|           <p class="text">{{ dataForm.componentAveragePower }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">标准组件转化效率</p> | ||||
|           <p class="text">{{ dataForm.componentConversionEfficiency }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false"> | ||||
|         {{ 'BIPV产品' }} | ||||
|       </small-title> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">产品产量(㎡)</p> | ||||
|           <p class="title">产品产量</p> | ||||
|           <p class="text">{{ dataForm.bipvProductOutput }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">人均产量(㎡/人)</p> | ||||
|           <p class="title">人均产量</p> | ||||
|           <p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片使用量(片)</p> | ||||
|           <p class="title">芯片使用量</p> | ||||
|           <p class="text">{{ dataForm.bipvChipUsage }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">芯片利用率(%)</p> | ||||
|           <p class="title">芯片利用率</p> | ||||
|           <p class="text">{{ dataForm.bipvChipUtilizationRate }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="24"> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">内部材料成本(元/㎡)</p> | ||||
|           <p class="title">内部材料成本</p> | ||||
|           <p class="text">{{ dataForm.bipvInsideMaterialCost }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">OEM及委外材料成本(元/㎡)</p> | ||||
|           <p class="title">OEM及委外材料成本</p> | ||||
|           <p class="text">{{ dataForm.bipvOeeMaterialCost }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="6"> | ||||
|           <p class="title">综合材料成本(元/㎡)</p> | ||||
|           <p class="title">综合材料成本</p> | ||||
|           <p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
| @@ -202,9 +197,35 @@ export default { | ||||
|       ], | ||||
|       sectionList: [], | ||||
|       visible: false, | ||||
|       dataForm: {} | ||||
|       dataForm: { | ||||
|         id: undefined, | ||||
|         logTime: undefined, | ||||
|         source: 1, | ||||
|         detId: undefined, | ||||
|         workOrderId: null, | ||||
|         teamId: undefined, | ||||
|         num: undefined, | ||||
|         lineId: undefined, | ||||
|         description: undefined, | ||||
|         // description: undefined, | ||||
|         remark: undefined, | ||||
|       }, | ||||
|       // materialList: [], | ||||
|       dataRule: { | ||||
|         // materialId: [{ required: true, message: "", trigger: "blur" }], | ||||
|         workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }], | ||||
|         num: [{ required: true, message: "数量不能为空", trigger: "blur" }], | ||||
|         detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }], | ||||
|  | ||||
|         logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }], | ||||
|       } | ||||
|     }; | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.getDict() | ||||
|     console.log('我看看', this.dataForm) | ||||
|     // this.getCurrentTime() | ||||
|   }, | ||||
|   methods: { | ||||
|     init(id) { | ||||
|       this.visible = true | ||||
| @@ -214,7 +235,102 @@ export default { | ||||
|           this.dataForm = res.data | ||||
|         }) | ||||
|       } | ||||
|     } | ||||
|     }, | ||||
|     // getCurrentTime() { | ||||
|     //   // new Date().Format("yyyy-MM-dd HH:mm:ss") | ||||
|     //   this.dataForm.logTime = new Date() | ||||
|     //   // this.dataForm.logTime = year + "-" + month + "-" + day; | ||||
|     //   console.log(this.dataForm.logTime); | ||||
|     // }, | ||||
|     async getDict() { | ||||
|     //   // 物料列表 | ||||
|     //   const res = await getList() | ||||
|     //   this.typeList = res.data | ||||
|     //   getWorkOrderList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.workOrderList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getLineList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.lineList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getDetList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.detList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.content, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     //   getTeamList().then((res) => { | ||||
|     //     console.log(res); | ||||
|     //     // console.log(response); | ||||
|     //     this.teamList = res.data.map((item) => { | ||||
|     //       return { | ||||
|     //         name: item.name, | ||||
|     //         id: item.id | ||||
|     //       } | ||||
|     //     }) | ||||
|     //     // console.log(this.formConfig[0].selectOptions); | ||||
|     //     // this.listQuery.total = response.data.total; | ||||
|     //   }) | ||||
|     // }, | ||||
|     // async getWorksectionById(lineId) { | ||||
|     //   if (lineId) { | ||||
|     //     const { code, data } = await this.$axios({ | ||||
|     //       url: '/base/core-workshop-section/listByParentId', | ||||
|     //       method: 'get', | ||||
|     //       params: { | ||||
|     //         id: lineId, | ||||
|     //       }, | ||||
|     //     }); | ||||
|     //     if (code == 0) { | ||||
|     //       console.log(data) | ||||
|     //       this.sectionList = data.map((item) => { | ||||
|     //         return { | ||||
|     //           name: item.name, | ||||
|     //           id: item.id, | ||||
|     //         }; | ||||
|     //       }); | ||||
|     //     } | ||||
|     //   } else { | ||||
|     //     this.$axios({ | ||||
|     //       url: '/base/core-workshop-section/listAll', | ||||
|     //       method: 'get', | ||||
|     //       // params: { | ||||
|     //       //   id: lineId, | ||||
|     //       // }, | ||||
|     //     }).then((res) => { | ||||
|     //       // console.log(data) | ||||
|     //       this.sectionList = res.data.map((item) => { | ||||
|     //         return { | ||||
|     //           name: item.name, | ||||
|     //           id: item.id, | ||||
|     //         }; | ||||
|     //       }); | ||||
|     //     }) | ||||
|     //   } | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
| @@ -255,8 +371,5 @@ export default { | ||||
|   color: rgba(102,102,102,0.75); | ||||
|   padding-bottom: 20px; | ||||
| } | ||||
| .detailBox { | ||||
|   width: 98%; | ||||
| } | ||||
|  | ||||
| </style> | ||||
|   | ||||
| @@ -1,15 +1,15 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-06-20 16:41:48 | ||||
|  * @LastEditTime: 2024-05-22 16:22:57 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 32px)"> | ||||
|     <ButtonNav v-show="false" :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px"> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)"> | ||||
|     <ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px"> | ||||
|     </ButtonNav> | ||||
|     <div class="app-container" style="height: auto; flex-grow: 1;"> | ||||
|     <div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;"> | ||||
|       <el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip"> | ||||
|         <el-form-item v-if="facType === 0" label="工厂名称" prop="factorys"> | ||||
|           <el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable> | ||||
| @@ -24,39 +24,39 @@ | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item label="时间维度" prop="date"> | ||||
|           <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择" @change="clearTime"> | ||||
|           <el-select size="small" clearable v-model="listQuery.date" placeholder="请选择"> | ||||
|             <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value"> | ||||
|             </el-option> | ||||
|           </el-select> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至" | ||||
|             start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|         <!-- <el-form-item v-show="timeSelect === 'day'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker v-model="listQuery.reportTime" type="datetimerange" range-separator="至" | ||||
|             start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|         </el-form-item> --> | ||||
|         <!-- <el-form-item v-show="timeSelect === 'week'" label="时间范围" prop="reportTime"> | ||||
|           <el-date-picker v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           至 | ||||
|           <el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周"  placeholder="选择周" | ||||
|           <el-date-picker v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周" | ||||
|             style="width: 180px" @change="onValueChange"> | ||||
|           </el-date-picker> | ||||
|           <!-- <span v-if="start && end" style="margin-left: 10px"> | ||||
|           <span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px"> | ||||
|             {{ date1 }} 至 {{ date2 }},共 {{ weekNum }} 周 | ||||
|           </span> --> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime"> | ||||
|           <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM" range-separator="至" start-placeholder="开始月份" | ||||
|           </span> | ||||
|         </el-form-item> --> | ||||
|         <el-form-item v-show="listQuery.date !== 4" label="时间值" prop="reportTime"> | ||||
|           <el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至" start-placeholder="开始月份" | ||||
|             end-placeholder="结束月份" @change="changeTime"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
|         <el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime"> | ||||
|           <el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" | ||||
|           <el-date-picker size="small" clearable v-model="start" value-format="timestamp" type="year" | ||||
|             placeholder="开始时间"> | ||||
|           </el-date-picker> | ||||
|           ~ | ||||
|           <el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间" | ||||
|           <el-date-picker size="small" clearable v-model="end" value-format="timestamp" type="year" placeholder="结束时间" | ||||
|             @change="getYear"> | ||||
|           </el-date-picker> | ||||
|         </el-form-item> | ||||
| @@ -144,6 +144,7 @@ | ||||
| import { parseTime } from '@/utils/ruoyi'; | ||||
| import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget, importToTarget, importDiTarget } from '@/api/produceData'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| import ButtonNav from '@/components/ButtonNav' | ||||
| import basicPage from '@/mixins/basic-page' | ||||
| @@ -156,7 +157,7 @@ import {getBaseHeader} from "@/utils/request"; | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { ButtonNav, detailOrUpdate, addOrUpdate }, | ||||
|   components: { lineChart, ButtonNav, detailOrUpdate, addOrUpdate }, | ||||
|   mixins: [basicPage], | ||||
| 	data() { | ||||
|     return { | ||||
| @@ -172,7 +173,7 @@ export default { | ||||
|         current: 1, | ||||
|         factorys: null, | ||||
|         total: 0, | ||||
|         date: 3, | ||||
|         date: undefined, | ||||
|         beginTime: undefined, | ||||
|         endTime: undefined, | ||||
|         reportTime: [] | ||||
| @@ -313,17 +314,9 @@ export default { | ||||
|         }, | ||||
|       ], | ||||
|       timeList: [ | ||||
|         { | ||||
|           value: 1, | ||||
|           label: '日' | ||||
|         }, | ||||
|         { | ||||
|           value: 2, | ||||
|           label: '周' | ||||
|         }, | ||||
|         { | ||||
|           value: 3, | ||||
|           label: '月' | ||||
|           label:'月' | ||||
|         }, | ||||
|         { | ||||
|           value: 4, | ||||
| @@ -339,13 +332,13 @@ export default { | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'targetTime', | ||||
|           prop: 'tagertTime', | ||||
|           label: '目标时间', | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'updateTime', | ||||
|           prop: 'createTime', | ||||
|           label: '提交时间', | ||||
|           filter: parseTime, | ||||
|           minWidth: 150, | ||||
| @@ -413,23 +406,23 @@ export default { | ||||
|         }, | ||||
|       ], | ||||
|       // timeSelect:'month', | ||||
|       // startTimeStamp:null, //开始时间 | ||||
|       // endTimeStamp:null, //结束时间 | ||||
|       startTimeStamp:null, //开始时间 | ||||
|       endTimeStamp:null, //结束时间 | ||||
|       // date:'凯盛玻璃控股成员企业2024生产数据', | ||||
| 			// reportTime: '', | ||||
| 			// startTimeStamp: '', | ||||
| 			// endTimeStamp: '', | ||||
| 			startTimeStamp: '', | ||||
| 			endTimeStamp: '', | ||||
|       tableData: [], | ||||
|       facType: 0 | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
|   }, | ||||
|   computed: { | ||||
|     weekNum() { | ||||
|       return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|     }, | ||||
|   }, | ||||
|   // computed: { | ||||
|   //   weekNum() { | ||||
|   //     return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1 | ||||
|   //   }, | ||||
|   // }, | ||||
|   watch: { | ||||
|     facType(value) { | ||||
|       if (value === 0) { | ||||
| @@ -449,21 +442,15 @@ export default { | ||||
|         }) | ||||
|         this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel' | ||||
|       } | ||||
|       console.log(112, this.tableProps) | ||||
|     } | ||||
|   }, | ||||
| 	created() { | ||||
|     const currentMonth = new Date() | ||||
|     this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')] | ||||
|     this.changeTime() | ||||
| 	mounted() { | ||||
|     // this.getDict() | ||||
|     // this.getCurrentYearFirst() | ||||
|     this.getDataList() | ||||
| 	}, | ||||
|   methods: { | ||||
|     clearTime() { | ||||
|       this.listQuery.beginTime = undefined | ||||
|       this.listQuery.endTime = undefined | ||||
|       this.listQuery.reportTime = [] | ||||
|       this.start = undefined | ||||
|       this.end = undefined | ||||
|     }, | ||||
|     handleImport() { | ||||
|       this.upload.title = "生产目标导入"; | ||||
|       this.upload.open = true; | ||||
| @@ -473,6 +460,42 @@ export default { | ||||
|     handleFileUploadProgress(event, file, fileList) { | ||||
|       this.upload.isUploading = true; | ||||
|     }, | ||||
|     // 文件上传成功处理 | ||||
|     // handleFileSuccess(param, type) { | ||||
|     //   console.log('带的', param.file) | ||||
|     //   const formData = new FormData() | ||||
|     //   formData.append('multipartFile', param.file) | ||||
|     //   console.log('送送', param) | ||||
|     //   importDiTarget(formData).then(res => { | ||||
|     //     console.log(res) | ||||
|     //     if (res.code !== 0) { | ||||
|     //       this.$modal.msgError(response.msg) | ||||
|     //       return; | ||||
|     //     } | ||||
|     //     this.upload.open = false; | ||||
|     //     this.upload.isUploading = false; | ||||
|     //     this.$refs.upload.clearFiles(); | ||||
|     //   }).catch(() => { | ||||
|     //     this.upload.open = false | ||||
|     //     this.upload.isUploading = false | ||||
|     //   }) | ||||
|     //   // 拼接提示语 | ||||
|     //   // let data = response.data; | ||||
|     //   // let text = '创建成功数量:' + data.createUsernames.length; | ||||
|     //   // for (const username of data.createUsernames) { | ||||
|     //   //   text += '<br />    ' + username; | ||||
|     //   // } | ||||
|     //   // text += '<br />更新成功数量:' + data.updateUsernames.length; | ||||
|     //   // for (const username of data.updateUsernames) { | ||||
|     //   //   text += '<br />    ' + username; | ||||
|     //   // } | ||||
|     //   // text += '<br />更新失败数量:' + Object.keys(data.failureUsernames).length; | ||||
|     //   // for (const username in data.failureUsernames) { | ||||
|     //   //   text += '<br />    ' + username + ':' + data.failureUsernames[username]; | ||||
|     //   // } | ||||
|     //   this.$message.success('导入成功!'); | ||||
|     //   this.getDataList(); | ||||
|     // }, | ||||
|         // 文件上传成功处理 | ||||
|     handleFileSuccess(response, file, fileList) { | ||||
|       if (response.code !== 0) { | ||||
| @@ -498,6 +521,11 @@ export default { | ||||
|     changeFactory($event) { | ||||
|       this.currentMenu = $event | ||||
|       this.facType = this.currentMenu === '碲化镉工厂' ? 0 : 1 | ||||
|       // if (this.facType === 0) { | ||||
|       //   this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel' | ||||
|       // } else { | ||||
|       //   this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel' | ||||
|       // } | ||||
|       this.getDataList() | ||||
|     }, | ||||
|     handleClick(val) { | ||||
| @@ -508,6 +536,7 @@ export default { | ||||
|           this.$refs.addOrUpdate.init(val.data.id); | ||||
|         }); | ||||
|       } else if (val.type === "delete") { | ||||
|         console.log('啊啊', val) | ||||
|         this.deleteHandle(val.data.id, val.data.factory, val.data._pageIndex) | ||||
|       } else { | ||||
|         this.otherMethods(val) | ||||
| @@ -540,98 +569,84 @@ export default { | ||||
|       this.$nextTick(() => { | ||||
|         this.$refs.detailOrUpdate.init(val.data.id); | ||||
|       }); | ||||
|     }, | ||||
|     buttonClick() { | ||||
|  | ||||
|     }, | ||||
|     getYear(e) { | ||||
|       if (this.end && Number(this.end) - Number(this.start) > 10) { | ||||
|       if (this.end && e - this.start > 10 * 365*24*60*60*1000) { | ||||
|         this.$message({ | ||||
|           message: '年份起止时间不能超过十年', | ||||
|           type: 'warning' | ||||
|         }); | ||||
|         this.start = undefined | ||||
|         this.end = undefined | ||||
|         // console.log(); | ||||
|       } else { | ||||
|         if (Number(this.end) < Number(this.start)) { | ||||
|         if (this.end < this.start) { | ||||
|           this.$message({ | ||||
|             message: '结束年份不能小于开始年份', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.start = undefined | ||||
|           this.end = undefined | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(this.start) | ||||
|           this.listQuery.endTime = Number(this.end) | ||||
|         } | ||||
|       } | ||||
|       if (!this.start && !this.end) { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|       } | ||||
|       // console.log(e); | ||||
|     }, | ||||
|     changeTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4)) | ||||
|         const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4)) | ||||
|         if (years * 12 + months > 24) { | ||||
|         const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0] | ||||
|         if (numDays > 2*365*24*60*60*1000) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过24个月', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | ||||
|           this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | ||||
|         } | ||||
|       } else { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|       } | ||||
|     }, | ||||
|     onValueChange(picker, k) { // 选中近k周后触发的操作 | ||||
|       if (this.start && this.end) { | ||||
|         this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss') | ||||
|         const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000); | ||||
|         if (numDays > 168) { | ||||
|           console.log(numDays) | ||||
|           this.$message({ | ||||
|             message: '周范围不能超过24周', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW')) | ||||
|           this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW')) | ||||
|     // 获取数据列表 | ||||
|     multipliedByHundred(str) { | ||||
|       console.log(str); | ||||
|       // console.log(str) | ||||
|       if ( str != 0) { | ||||
|         let floatVal = parseFloat(str); | ||||
|         if (isNaN(floatVal)) { | ||||
|           return 0; | ||||
|         } | ||||
|       } | ||||
|       if (!this.start && !this.end) { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|       } | ||||
|     }, | ||||
|     changeDayTime() { | ||||
|       if (this.listQuery.reportTime) { | ||||
|         const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0]) | ||||
|         if (numDays > 30) { | ||||
|           this.$message({ | ||||
|             message: '时间范围不能超过30天', | ||||
|             type: 'warning' | ||||
|           }); | ||||
|           this.listQuery.reportTime = []; | ||||
|         } else { | ||||
|           this.listQuery.beginTime = Number(this.listQuery.reportTime[0]) | ||||
|           this.listQuery.endTime = Number(this.listQuery.reportTime[1]) | ||||
|         floatVal = Math.round(str * 10000) / 100; | ||||
|         let strVal = floatVal.toString(); | ||||
|         let searchVal = strVal.indexOf('.'); | ||||
|         if (searchVal < 0) { | ||||
|           searchVal = strVal.length; | ||||
|           strVal += '.'; | ||||
|         } | ||||
|       } else { | ||||
|         this.listQuery.beginTime = undefined | ||||
|         this.listQuery.endTime = undefined | ||||
|         while (strVal.length <= searchVal + 2) { | ||||
|           strVal += '0'; | ||||
|         } | ||||
|         return parseFloat(strVal); | ||||
|       } | ||||
|  | ||||
|     }, | ||||
|     async getDataList() { | ||||
|       if (this.listQuery.date === 3) { | ||||
|         if (this.listQuery.reportTime?.length > 0) { | ||||
|           this.listQuery.beginTime = this.listQuery.reportTime[0] ? this.listQuery.reportTime[0] : undefined | ||||
|           this.listQuery.endTime = this.listQuery.reportTime[1] ? this.listQuery.reportTime[1] : undefined | ||||
|         } | ||||
|       } | ||||
|       if (this.listQuery.date === 4) { | ||||
|         if (this.listQuery.reportTime?.length > 0) { | ||||
|           this.listQuery.beginTime = this.start ? this.start : undefined | ||||
|           this.listQuery.endTime = this.end ? this.end : undefined | ||||
|         } | ||||
|       } | ||||
|       if (this.currentMenu === '碲化镉工厂') { | ||||
|         await prodTargetDiPage(this.listQuery).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.tableData = res.data.records | ||||
|             this.tableData.forEach(item => { | ||||
|                 const year = item.targetYear ? item.targetYear + '年' : '' | ||||
|                 const month = item.targetMonth ? item.targetMonth + '月' : '' | ||||
|                 item.tagertTime = year + month | ||||
|             }) | ||||
|             this.listQuery.total = res.data.total | ||||
|           } | ||||
|         }) | ||||
|   | ||||
| @@ -1,65 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2023-08-01 15:27:31 | ||||
|  * @LastEditors: zwq | ||||
|  * @LastEditTime: 2023-08-01 16:25:54 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
| 	<div :class="[className, { 'p-0': noPadding }]"> | ||||
| 		<slot /> | ||||
| 	</div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| export default { | ||||
| 	props: { | ||||
| 		size: { | ||||
| 			// 取值范围:  xl lg md sm | ||||
| 			type: String, | ||||
| 			default: 'de', | ||||
| 			validator: function (val) { | ||||
| 				return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1; | ||||
| 			}, | ||||
| 		}, | ||||
| 		noPadding: { | ||||
| 			type: Boolean, | ||||
| 			default: false, | ||||
| 		}, | ||||
| 	}, | ||||
| 	computed: { | ||||
| 		className: function () { | ||||
| 			return `${this.size}-title`; | ||||
| 		}, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| $pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px); | ||||
| $mgr: 8px; | ||||
| @each $size, $height in $pxls { | ||||
| 	.#{$size}-title { | ||||
| 		font-size: 18px; | ||||
| 		line-height: $height; | ||||
| 		color: #000; | ||||
| 		font-weight: 500; | ||||
| 		font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif; | ||||
|  | ||||
| 		&::before { | ||||
| 			content: ''; | ||||
| 			display: inline-block; | ||||
| 			vertical-align: top; | ||||
| 			width: 4px; | ||||
| 			height: $height + 2px; | ||||
| 			border-radius: 1px; | ||||
| 			margin-right: $mgr; | ||||
| 			background-color: #0b58ff; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  | ||||
| .p-0 { | ||||
| 	padding: 0; | ||||
| } | ||||
| </style> | ||||
| @@ -1,490 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2023-11-06 15:15:30 | ||||
|  * @LastEditTime: 2024-06-27 14:50:21 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')"> | ||||
|     <small-title slot="title" :no-padding="true"> | ||||
|       {{ '详情' }} | ||||
|       <el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button> | ||||
|     </small-title> | ||||
|     <div ref="detail" class="detailBox"> | ||||
|       <el-row :gutter="20"> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">工单号</p> | ||||
|           <p class="text">{{ dataForm.workOrderNumber }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">订单号</p> | ||||
|           <p class="text">{{ dataForm.orderNumber }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">工单类型</p> | ||||
|           <p class="text">{{ ['', '芯片工单', '组件类型', 'bipv类型'][dataForm.workOrderType] }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">工单来源</p> | ||||
|           <p class="text">{{ ['', '手动', 'ERP'][dataForm.source] }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">工艺流程</p> | ||||
|           <p class="text">{{ dataForm.process }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">BOM</p> | ||||
|           <p class="text">{{ dataForm.bom }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">工单状态</p> | ||||
|           <p class="text">{{ ['', '未开始', '生产中', '已完成'][dataForm.orderStatus] }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">投入状态</p> | ||||
|           <p class="text">{{ getDictDataLabel('work_order_in_status', dataForm.inStatus) }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <el-row :gutter="20"> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">计划投入量</p> | ||||
|           <p class="text">{{ dataForm.plannedInvestment }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">目标产量</p> | ||||
|           <p class="text">{{ dataForm.targetProduction }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">实际投入</p> | ||||
|           <p class="text">{{ dataForm.actualInvestment }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">实际产出</p> | ||||
|           <p class="text">{{ dataForm.actualProduction }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">创建时间</p> | ||||
|           <p class="text">{{ parseTime(dataForm.createTime) }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">开始时间</p> | ||||
|           <p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p> | ||||
|         </el-col> | ||||
|         <el-col :span="3"> | ||||
|           <p class="title">完成时间</p> | ||||
|           <p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div> | ||||
|       <el-row :gutter="0" style="margin: 20px 32px"> | ||||
|         <el-col :span="8"> | ||||
|           <div> | ||||
|             <small-title slot="title" :no-padding="true"> | ||||
|               产品良率 | ||||
|             </small-title> | ||||
|             <div ref="pie" :style="{ height: '40vh', width: '100%' }" /> | ||||
|           </div> | ||||
|         </el-col> | ||||
|         <el-col :span="16"> | ||||
|           <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px"> | ||||
|             <small-title slot="title" :no-padding="true"> | ||||
|               历史趋势 | ||||
|             </small-title> | ||||
|             <div ref="line" v-show="dataForm.orderStatus === 2" :style="{ height: '40vh', width: '50vw' }" /> | ||||
|           </div> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|       <div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div> | ||||
|       <el-row :gutter="0" style="margin: 20px 32px"> | ||||
|         <el-col :span="8"> | ||||
|           <div> | ||||
|             <small-title slot="title" :no-padding="true"> | ||||
|               生产明细 | ||||
|             </small-title> | ||||
|             <div ref="bar" :style="{ height: '40vh', width: '100%' }" /> | ||||
|           </div> | ||||
|         </el-col> | ||||
|         <el-col :span="16"> | ||||
|           <div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px"> | ||||
|             <small-title slot="title" :no-padding="true"> | ||||
|               待制品分布 | ||||
|             </small-title> | ||||
|             <div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" /> | ||||
|           </div> | ||||
|         </el-col> | ||||
|       </el-row> | ||||
|     </div> | ||||
|   </el-drawer> | ||||
|  | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import basicAdd from './basic-add'; | ||||
| import * as echarts from 'echarts' | ||||
| import resize from '@/mixins/resize' | ||||
| import { getWorkOrderDetail } from '@/api/produceData/order'; | ||||
| import SmallTitle from './SmallTitle'; | ||||
| import jsPDF from 'jspdf'; | ||||
| import html2canvas from 'html2canvas'; | ||||
| import { getDictDataLabel } from "@/utils/dict"; | ||||
|  | ||||
| export default { | ||||
|   components: { | ||||
|     SmallTitle, | ||||
|   }, | ||||
|   mixins: [resize], | ||||
|   props: { | ||||
|     date: { | ||||
|       type: Number, | ||||
|       default: 0 | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       lineChart: null, | ||||
|       pieChart: null, | ||||
|       barChart: null, | ||||
|       equipmentLineChart: null, | ||||
|       visible: false, | ||||
|       dataForm: {}, | ||||
|       colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色 | ||||
|     } | ||||
|   }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   mounted() { | ||||
|     // this.getCurrentTime() | ||||
|   }, | ||||
|   methods: { | ||||
|     exportDetail() { | ||||
|       // 导出 | ||||
|       const pdf = new jsPDF('l', 'pt', 'a4'); | ||||
|  | ||||
|       const canvas = document.createElement('canvas') | ||||
|        | ||||
|       const element = this.$refs['detail']; | ||||
|       const width = pdf.internal.pageSize.getWidth() | ||||
|       const height = pdf.internal.pageSize.getHeight() | ||||
|        | ||||
|       canvas.width = width * 2 | ||||
|       canvas.height = height * 2 | ||||
|  | ||||
|       canvas.style.width = width + 'px' | ||||
|       canvas.style.height = height + 'px' | ||||
|        | ||||
|       const options = { | ||||
|         // scale: 2, | ||||
|         dpi: 300, | ||||
|         canvas: canvas, | ||||
|         useCORS: true | ||||
|       }; | ||||
|  | ||||
|       html2canvas(element, options).then((canvas) => { | ||||
|         const imgData = canvas.toDataURL('image/png', 1.0); | ||||
|         pdf.addImage(imgData, 'PNG', 0, 0, width, height); | ||||
|         pdf.save(this.dataForm.workOrderNumber + '详情.pdf'); | ||||
|       }); | ||||
|     }, | ||||
|     init(id) { | ||||
|       this.visible = true | ||||
|       this.$nextTick(() => { | ||||
|         this.initLineChart() | ||||
|       }) | ||||
|       if (id) { | ||||
|         getWorkOrderDetail(id).then(res => { | ||||
|           if (res.code === 0) { | ||||
|             this.dataForm = res.data.prodWorkOrderDO | ||||
|             this.buildChart(this.dataForm) | ||||
|             // 在制品 | ||||
|             const xAxisList = Object.keys(res.data.inProcessDis) | ||||
|             const yAxisList = Object.values(res.data.inProcessDis) | ||||
|             this.initEqLineChart(xAxisList, yAxisList) | ||||
|             // 趋势图 | ||||
|             const seriesList = [] | ||||
|             const dateList = [] | ||||
|             res.data.his.forEach(element => { | ||||
|               seriesList.push(element.actualProduction) | ||||
|               dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2]) | ||||
|             }) | ||||
|             this.initLineChart(dateList, seriesList) | ||||
|           } | ||||
|           // if (this.dataForm.orderStatus === 1) { | ||||
|           //   this.trend() | ||||
|           // } | ||||
|         }) | ||||
|         // getEqNum(id).then(response => { | ||||
|         //   if (response.code === 0) { | ||||
|         //     const xAxisList = Object.keys(response.data) | ||||
|         //     const yAxisList = Object.values(response.data) | ||||
|         //     this.initEqLineChart(xAxisList, yAxisList) | ||||
|         //   } | ||||
|         // }) | ||||
|          | ||||
|       } | ||||
|     }, | ||||
|     trend() { | ||||
|       // 趋势图 | ||||
|       getDailyTrend({ factory: this.dataForm.id }).then(trendRes => { | ||||
|         if (trendRes?.data.length > 0) { | ||||
|           const seriesList = [] | ||||
|           const dateList = [] | ||||
|           trendRes.data.forEach(element => { | ||||
|             seriesList.push(element.actualProduction) | ||||
|             dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2]) | ||||
|           }) | ||||
|           this.initLineChart(dateList, seriesList) | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     buildChart(data) { | ||||
|       // 生产明细 | ||||
|       const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum] | ||||
|       this.initChart(barList) | ||||
|       // 良品率 | ||||
|       const pieList = [ | ||||
|         { value: data.actualProduction, name: '实际产出' }, | ||||
|         { value: data.wasteNum, name: '废品数量' }, | ||||
|         { value: data.reworkNum, name: '待再加工数量' } | ||||
|       ] | ||||
|       this.initPieChart(pieList) | ||||
|     }, | ||||
|     initChart(barData) { | ||||
|       this.barChart = echarts.init(this.$refs['bar']) | ||||
|       this.barChart.setOption({ | ||||
|         // title: { | ||||
|         //   text: '生产明细', | ||||
|         //   left: 'center' | ||||
|         //   // subtext: 'Fake Data' | ||||
|         // }, | ||||
|         color: ['#3E8EF7'], | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         calculable: true, | ||||
|         grid: { | ||||
|           top: '15%', | ||||
|           left: 0, | ||||
|           right: '10%', | ||||
|           bottom: 0, | ||||
|           containLabel: true | ||||
|         }, | ||||
|         xAxis: { | ||||
|           type: 'category', | ||||
|           data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'], | ||||
|           axisLabel: { | ||||
|             rotate: 25 | ||||
|           } | ||||
|         }, | ||||
|         yAxis: { | ||||
|           type: 'value', | ||||
|           name: '单位/片', | ||||
|           axisLine: { | ||||
|             show: true | ||||
|           } | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             data: barData, | ||||
|             type: 'bar', | ||||
|             barWidth: '40%', | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: 'top' | ||||
|             } | ||||
|           } | ||||
|         ] | ||||
|       }, true) | ||||
|     }, | ||||
|     initPieChart(pieData) { | ||||
|       this.pieChart = echarts.init(this.$refs['pie']) | ||||
|       this.pieChart.setOption({ | ||||
|         color: ['#3E8EF7', '#69E6D8', '#F7C739'], | ||||
|         title: { | ||||
|           // text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -', | ||||
|           left: 'center' | ||||
|           // subtext: 'Fake Data' | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'item' | ||||
|         }, | ||||
|         legend: { | ||||
|           bottom: 0, | ||||
|           left: 'center' | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             // name: 'Access From', | ||||
|             type: 'pie', | ||||
|             radius: ['50%', '70%'], | ||||
|             avoidLabelOverlap: false, | ||||
|             data: pieData, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: 'outside', | ||||
|               formatter: '{d|{d}%} \n {b|{b}}', | ||||
|               rich: { | ||||
|                 d: { | ||||
|                   color: 'inherit', // 系列色 | ||||
|                   verticalAlign: 'top' | ||||
|                 }, | ||||
|                 b: { | ||||
|                   color: '#8C8C8C', | ||||
|                   verticalAlign: 'top' | ||||
|                 } | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         ] | ||||
|       }, true) | ||||
|     }, | ||||
|     initEqLineChart(xAxisList, yAxisList) { | ||||
|       this.equipmentLineChart = echarts.init(this.$refs['equipmentLine']) | ||||
|       this.equipmentLineChart.setOption({ | ||||
|         // title: { | ||||
|         //   text: '待制品分布', | ||||
|         //   left: 'center' | ||||
|         //   // subtext: 'Fake Data' | ||||
|         // }, | ||||
|         color: ['#3E8EF7'], | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         calculable: true, | ||||
|         grid: { | ||||
|           top: '15%', | ||||
|           left: 0, | ||||
|           right: 0, | ||||
|           bottom: 0, | ||||
|           containLabel: true | ||||
|         }, | ||||
|         xAxis: { | ||||
|           type: 'category', | ||||
|           data: xAxisList, | ||||
|           axisLabel: { | ||||
|             rotate: 25 | ||||
|             // width: '10%' | ||||
|           } | ||||
|         }, | ||||
|         yAxis: { | ||||
|           type: 'value', | ||||
|           name: '单位/片', | ||||
|           axisLine: { | ||||
|             show: true | ||||
|           } | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             data: yAxisList, | ||||
|             type: 'bar', | ||||
|             barWidth: '50%', | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: 'top' | ||||
|             } | ||||
|           } | ||||
|         ] | ||||
|       }, true) | ||||
|     }, | ||||
|     initLineChart(xAxisList, seriesList) { | ||||
|       this.lineChart = echarts.init(this.$refs['line']) | ||||
|       this.lineChart.setOption({ | ||||
|         color: ['#3E8EF7'], | ||||
|         tooltip: { | ||||
|           trigger: 'item' | ||||
|         }, | ||||
|         grid: { | ||||
|           top: '15%', | ||||
|           left: 0, | ||||
|           right: 0, | ||||
|           bottom: 0, | ||||
|           containLabel: true | ||||
|         }, | ||||
|         xAxis: { | ||||
|           type: 'category', | ||||
|           data: xAxisList, | ||||
|           axisLabel: { | ||||
|             rotate: 25 | ||||
|           } | ||||
|         }, | ||||
|         yAxis: { | ||||
|           type: 'value', | ||||
|           name: '单位/片', | ||||
|           axisLine: { | ||||
|             show: true | ||||
|           } | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             data: seriesList, | ||||
|             type: 'line', | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: 'top' | ||||
|             } | ||||
|           } | ||||
|         ] | ||||
|       }, true) | ||||
|     } | ||||
|     // getCurrentTime() { | ||||
|     //   // new Date().Format("yyyy-MM-dd HH:mm:ss") | ||||
|     //   this.dataForm.logTime = new Date() | ||||
|     //   // this.dataForm.logTime = year + "-" + month + "-" + day; | ||||
|     //   console.log(this.dataForm.logTime); | ||||
|     // }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
|   .drawer >>> .el-drawer { | ||||
|   border-radius: 8px 0 0 8px; | ||||
| } | ||||
|  | ||||
| .drawer >>> .el-form-item__label { | ||||
|   padding: 0; | ||||
| } | ||||
|  | ||||
| .drawer >>> .el-drawer__header { | ||||
|   margin: 0; | ||||
|   padding: 32px 32px 24px; | ||||
|   border-bottom: 1px solid #dcdfe6; | ||||
|   /* margin-bottom: 30px; */ | ||||
| } | ||||
| .detailBox p { | ||||
|   margin: 0; | ||||
|   padding-left: 32px; | ||||
|   /* padding: 0 32px; */ | ||||
| } | ||||
| .detailBox .title { | ||||
|   /* width: 56px; */ | ||||
|   /* height: 14px; */ | ||||
|   font-family: Source Han Sans CN, Source Han Sans CN; | ||||
|   font-weight: 400; | ||||
|   font-size: 14px; | ||||
|   color: rgba(0, 0, 0, 0.85); | ||||
|   line-height: 16px; | ||||
|   text-align: left; | ||||
|   font-style: normal; | ||||
|   text-transform: none; | ||||
| } | ||||
| .detailBox .text { | ||||
|   font-size: 14px; | ||||
|   font-weight: 400; | ||||
|   color: rgba(102,102,102,0.75); | ||||
|   padding-bottom: 20px; | ||||
| } | ||||
| .detailBox { | ||||
|   padding-top: 30px; | ||||
|   overflow-x: hidden; | ||||
|   overflow-y: auto; | ||||
|   /* width: 99%; */ | ||||
| } | ||||
| </style> | ||||
| @@ -1,403 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-15 10:49:13 | ||||
|  * @LastEditTime: 2024-06-24 15:08:34 | ||||
|  * @LastEditors: DY | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)"> | ||||
|     <el-row :gutter="10"> | ||||
|       <el-col :span="4"> | ||||
|         <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;"> | ||||
|         <!-- <p style="margin-bottom: 0">数据概览</p> --> | ||||
|           <div class="view"> | ||||
|             <div style="padding: 10px 0; width: 100%"> | ||||
|               <div class="topDiv"> | ||||
|                 <div style="width: 4px; height: 52px; background: #71CC8C; border-radius: 2px;"></div> | ||||
|                 <div class="centerDiv"> | ||||
|                   <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ inputNum }}</span> | ||||
|                   <span style="font-size: 14px; color: rgba(0,0,0,0.85);">在制工单数量</span> | ||||
|                 </div> | ||||
|                 <svg-icon icon-class="workProcess" style="width: 26px; height: 26px" /> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|       </el-col> | ||||
|       <el-col :span="20"> | ||||
|         <div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;"> | ||||
|         <!-- <p style="margin-bottom: 0">数据概览</p> --> | ||||
|           <div class="view"> | ||||
|             <div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index"> | ||||
|               <div class="topDiv"> | ||||
|                 <div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div> | ||||
|                 <div class="centerDiv"> | ||||
|                   <span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span> | ||||
|                   <span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span> | ||||
|                 </div> | ||||
|                 <svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" /> | ||||
|               </div> | ||||
|             </div> | ||||
|           </div> | ||||
|         </div> | ||||
|       </el-col> | ||||
|     </el-row> | ||||
|     <!-- <div class="app-container" style="margin-top: 8px; height: auto;"> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|     </div> --> | ||||
|     <div class="app-container" style="margin-top: 8px;flex-grow: 1;"> | ||||
|       <!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> --> | ||||
|       <search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" /> | ||||
|       <base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize" | ||||
|         :table-data="tableData" :max-height="tableH"> | ||||
|         <method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right" | ||||
|           :method-list="tableBtn" @clickBtn="handleClick" /> | ||||
|       </base-table> | ||||
|       <pagination | ||||
|         :limit.sync="listQuery.pageSize" | ||||
|         :page.sync="listQuery.pageNo" | ||||
|         :total="listQuery.total" | ||||
|         @pagination="getDataList" | ||||
|       /> | ||||
|     </div> | ||||
|     <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| // import { parseTime } from '../../core/mixins/code-filter'; | ||||
| import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order'; | ||||
| // import inputTable from './inputTable.vue'; | ||||
| import lineChart from './lineChart'; | ||||
| import moment from 'moment' | ||||
| import tableHeightMixin from "@/mixins/tableHeightMixin"; | ||||
| // import ButtonNav from '@/components/ButtonNav' | ||||
| import basicPage from '@/mixins/basic-page' | ||||
| import AddOrUpdate from './add-or-updata'; | ||||
| import { factoryList, factoryArray } from "@/utils/constants"; | ||||
| // import { publicFormatter } from "@/utils/dict"; | ||||
| import statusChart from "./statusChart.vue"; | ||||
|  | ||||
| // import FileSaver from 'file-saver' | ||||
| // import * as XLSX from 'xlsx' | ||||
| export default { | ||||
|   components: { lineChart, AddOrUpdate }, | ||||
|   mixins: [basicPage, tableHeightMixin], | ||||
| 	data() { | ||||
|     return { | ||||
|       factorys: ['瑞昌中建材', '邯郸中建材', '株洲中建材', '佳木斯中建材', '成都中建材', '凯盛光伏', '蚌埠兴科'], | ||||
|       factoryNum: [0, 0, 0, 0, 0, 0, 0], | ||||
|       inputNum: 0, | ||||
|       heightNum: 180, | ||||
|       factoryList, | ||||
|       factoryArray, | ||||
|       listQuery: { | ||||
|         pageSize: 20, | ||||
|         pageNo: 1, | ||||
|         factorys: undefined, | ||||
|         total: 0, | ||||
|         time: undefined, | ||||
|         orderStatus:undefined | ||||
|       }, | ||||
|       detailOrUpdateVisible:false, | ||||
|       tableBtn: [ | ||||
|           { | ||||
|             type: 'detail', | ||||
|             btnName: '详情', | ||||
|         }, | ||||
|         // { | ||||
|         //     type: 'delete', | ||||
|         //     btnName: '删除', | ||||
|         //   }, | ||||
|       ].filter((v) => v), | ||||
|       typeList: [ | ||||
|         { | ||||
|           name: '芯片', | ||||
|           id: 0, | ||||
|         }, | ||||
|         { | ||||
|           name: '标准组件', | ||||
|           id: 1, | ||||
|         }, | ||||
|         { | ||||
|           name: 'BIPV产品', | ||||
|           id: 2, | ||||
|         }, | ||||
|       ], | ||||
|       formConfig: [ | ||||
|         { | ||||
|           type: "select", | ||||
|           label: "工厂名称", | ||||
|           selectOptions: factoryArray, | ||||
|           labelField: 'name', | ||||
|           valueField: 'id', | ||||
|           param: "factory", | ||||
|           multiple: true, | ||||
| 					filterable: true | ||||
|         }, | ||||
|         { | ||||
|           type: "select", | ||||
|           label: "工单状态", | ||||
|           selectOptions: [ | ||||
|             { | ||||
|               label: '未开始', | ||||
|               value: 1 | ||||
|             }, | ||||
|             { | ||||
|               label: '生产中', | ||||
|               value: 2 | ||||
|             }, | ||||
|             { | ||||
|               label: '已完成', | ||||
|               value: 3 | ||||
|             } | ||||
|           ], | ||||
|           labelField: "label", | ||||
|           valueField: "value", | ||||
|           param: "orderStatus", | ||||
|           multiple: true, | ||||
| 					filterable: true | ||||
|         }, | ||||
|         { | ||||
|           type: "datePicker", | ||||
|           label: "时间段", | ||||
|           dateType: "daterange", | ||||
|           format: "yyyy-MM-dd", | ||||
|           valueFormat: "yyyy-MM-dd", | ||||
|           rangeSeparator: "-", | ||||
|           startPlaceholder: "开始日期", | ||||
|           endPlaceholder: "结束日期", | ||||
|           param: "timeSlot", | ||||
|           defaultSelect: [], | ||||
|           defaultTime: ["00:00:00", "23:59:59"], | ||||
|           width: 250, | ||||
|         }, | ||||
|         { | ||||
|           type: "button", | ||||
|           btnName: "查询", | ||||
|           name: "search", | ||||
|           color: "primary", | ||||
|         }, | ||||
|         { | ||||
|           type: "separate", | ||||
|         }, | ||||
|         { | ||||
|           type: "button", | ||||
|           btnName: "导出", | ||||
|           name: "export", | ||||
|           color: "primary", | ||||
|           plain: true | ||||
|         }, | ||||
|       ], | ||||
|       formConfig2: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '工厂信息', | ||||
|         }, | ||||
|       ], | ||||
|       formConfig1: [ | ||||
|         { | ||||
|           type: 'title', | ||||
|           label: '良品数量', | ||||
|         }, | ||||
|       ], | ||||
|       tableProps: [ | ||||
|         { | ||||
|           prop: 'factory', | ||||
|           label: '工厂名称', | ||||
|           filter: (val) => factoryList[val], | ||||
|           minWidth: 220, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'workOrderNumber', | ||||
|           label: '工单号', | ||||
|           minWidth: 130, | ||||
|           showOverflowtooltip: true | ||||
|           // filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val] | ||||
|         }, | ||||
|         { | ||||
|           prop: 'workOrderType', | ||||
|           label: '工单类型', | ||||
|           // filter: publicFormatter('workorder_status') | ||||
|           filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val], | ||||
|         }, | ||||
|         { | ||||
|           prop: 'plannedInvestment', | ||||
|           label: '计划投入', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'actualInvestment', | ||||
|           label: '实际投入', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'targetProduction', | ||||
|           label: '目标产量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'actualProduction', | ||||
|           label: '实际产量', | ||||
|         }, | ||||
|         { | ||||
|           prop: 'productionProgress', | ||||
|           label: '生产进度', | ||||
|           filter: (val) => (val * 100) + '%' | ||||
|         }, | ||||
|         { | ||||
|           prop: 'orderStatus', | ||||
|           label: '工单状态', | ||||
|           subcomponent: statusChart | ||||
|           // filter: (val) => ['', '未开始', '生产中', '已完成'][val], | ||||
|         }, | ||||
|         { | ||||
|           prop: 'startTime', | ||||
|           label: '开始时间', | ||||
|           minWidth: 100, | ||||
|           showOverflowtooltip: true | ||||
|         }, | ||||
|         { | ||||
|           prop: 'endTime', | ||||
|           label: '完成时间', | ||||
|           minWidth: 100, | ||||
|           showOverflowtooltip: true | ||||
|         } | ||||
|       ], | ||||
|       tableData: [], | ||||
|       xAxis: [], | ||||
|       lineData: {} | ||||
|       // data: {} | ||||
| 			// proLineList: [], | ||||
| 			// all: {} | ||||
| 		}; | ||||
|   }, | ||||
| 	created() { | ||||
|     const today = new Date() | ||||
|     const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000)) | ||||
|     this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')] | ||||
|     this.formConfig[2].defaultSelect = this.listQuery.time | ||||
| 	}, | ||||
|   mounted() { | ||||
|     this.getOverView() | ||||
|   }, | ||||
|   methods: { | ||||
|     getOverView() { | ||||
|       getOverView().then(res => { | ||||
|         // this.data = res.data | ||||
|         if (res.code === 0) { | ||||
|           for(const i in res.data) { | ||||
|             if (i === '在制工单数量') { | ||||
|               this.inputNum = res.data[i] | ||||
|             } else { | ||||
|               const index = this.factorys.indexOf(i) | ||||
|               if (index > -1) { | ||||
|                 this.factoryNum[index] = res.data[i] | ||||
|               } | ||||
|             } | ||||
|           } | ||||
|         } | ||||
|       }) | ||||
|     }, | ||||
|     otherMethods(val) { | ||||
|       this.detailOrUpdateVisible = true; | ||||
|       // this.addOrEditTitle = "详情"; | ||||
|       this.$nextTick(() => { | ||||
|         this.$refs.detailOrUpdate.init(val.data.id); | ||||
|       }); | ||||
|     }, | ||||
|     async getDataList() { | ||||
|       const res = await getWorkOrderPage(this.listQuery) | ||||
|       this.tableData = res.data.list | ||||
|       this.listQuery.total = res.data.total | ||||
|       if (this.listQuery.total > 0) { | ||||
|         this.tableData.forEach(item => { | ||||
|           item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--' | ||||
|           item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--' | ||||
|         }) | ||||
|       } | ||||
|     }, | ||||
| 		buttonClick(val) { | ||||
| 			this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined | ||||
|       this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined | ||||
|       this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined | ||||
| 			switch (val.btnName) { | ||||
| 				case 'search': | ||||
| 					this.listQuery.pageNo = 1; | ||||
| 					this.listQuery.pageSize = 20; | ||||
|           if (this.listQuery.time) { | ||||
|             this.getDataList(); | ||||
|           } else { | ||||
|             this.$message.warning('请选择时间范围!') | ||||
|           } | ||||
| 					break; | ||||
| 				case 'export': | ||||
|           if (this.listQuery.time) { | ||||
|             this.handleExport(); | ||||
|           } else { | ||||
|             this.$message.warning('请选择时间范围!') | ||||
|           } | ||||
| 					break; | ||||
| 				default: | ||||
| 					console.log(val); | ||||
| 			} | ||||
| 		}, | ||||
| 		/** 导出按钮操作 */ | ||||
|     handleExport() { | ||||
|       this.$modal.confirm('是否确认导出工单数据?').then(() => { | ||||
|         // 处理查询参数 | ||||
|         // let params = {...this.listQuery}; | ||||
|         // params.current = 1; | ||||
|         // params.size = 999; | ||||
|         this.exportLoading = true; | ||||
|         return exportExcel({ | ||||
|           factorys: this.listQuery.factorys, | ||||
|           orderStatus: this.listQuery.orderStatus, | ||||
|           time: this.listQuery.time | ||||
|         }); | ||||
|       }).then(response => { | ||||
|         this.$download.excel(response, '工单数据.xls'); | ||||
|         this.exportLoading = false; | ||||
|       }).catch(() => {}) | ||||
|     }, | ||||
| 	}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .centerDiv { | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   justify-content: flex-start; | ||||
| } | ||||
| .topDiv { | ||||
|   display: flex; | ||||
|   flex-direction: row; | ||||
|   justify-content: space-around; | ||||
|   align-items: flex-start; | ||||
|   flex: 1; | ||||
| } | ||||
| .view { | ||||
|   display: flex; | ||||
|   justify-content: space-around; | ||||
|   align-items: center; | ||||
|   flex: 1; | ||||
| } | ||||
| .blueTip::before{ | ||||
|   display: inline-block; | ||||
|   content: ''; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0B58FF; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8PX; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| .app-container { | ||||
|   margin: 0 0px 0; | ||||
|   background-color: #fff; | ||||
|   border-radius: 4px; | ||||
|   padding: 16px 16px 0; | ||||
|   height: calc(100vh - 40px); | ||||
|   overflow: auto; | ||||
| } | ||||
| </style> | ||||
| @@ -1,169 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zwq | ||||
|  * @Date: 2022-01-21 14:43:06 | ||||
|  * @LastEditors: DY | ||||
|  * @LastEditTime: 2024-05-30 09:51:16 | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <!-- <div> --> | ||||
|   <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> --> | ||||
|   <div :id="id" :class="className" :style="{ height: height, width: width }" /> | ||||
|   <!-- </div> --> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import * as echarts from 'echarts' | ||||
| import 'echarts/theme/macarons' // echarts theme | ||||
| import resize from '@/mixins/resize' | ||||
| export default { | ||||
|   name: 'LineChart', | ||||
|   mixins: [resize], | ||||
|   props: { | ||||
|     id: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     className: { | ||||
|       type: String, | ||||
|       default: 'reportChart' | ||||
|     }, | ||||
|     width: { | ||||
|       type: String, | ||||
|       default: '100%' | ||||
|     }, | ||||
|     beilv: { | ||||
|       type: Number, | ||||
|       default: 1 | ||||
|     }, | ||||
|     height: { | ||||
|       type: String, | ||||
|       default: '30vh' | ||||
|     }, | ||||
|     legendPosition: { | ||||
|       type: String, | ||||
|       default: 'center' | ||||
|     }, | ||||
|     showLegend: { | ||||
|       type: Boolean, | ||||
|       default: false | ||||
|     }, | ||||
|     legendData: { | ||||
|       type: Array, | ||||
|       default: () => [] | ||||
|     } | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       chart: null | ||||
|     } | ||||
|   }, | ||||
|   // mounted() { | ||||
|   //   this.$nextTick(() => { | ||||
|   //     this.initChart() | ||||
|   //   }) | ||||
|   // }, | ||||
|   beforeDestroy() { | ||||
|     if (!this.chart) { | ||||
|       return | ||||
|     } | ||||
|     this.chart.dispose() | ||||
|     this.chart = null | ||||
|   }, | ||||
|   methods: { | ||||
|     initChart(xAxis, seriesList) { | ||||
|       this.chart = echarts.init(document.getElementById(this.id)) | ||||
|       console.log(this.$parent); | ||||
|       this.chart.setOption({ | ||||
|         title: { | ||||
|           text: '', | ||||
|           // subtext: 'Fake Data' | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: 'axis' | ||||
|         }, | ||||
|         grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true }, | ||||
|         legend: { | ||||
|           // data: ['工厂1', '工厂2'], | ||||
|           right: '90px', | ||||
|           top: '0%', | ||||
|           icon: 'rect', | ||||
|           itemWidth: 10, | ||||
|           itemHeight: 10, | ||||
|           itemGap: 40, | ||||
|         }, | ||||
|         // toolbox: { | ||||
|         //   show: true, | ||||
|         //   feature: { | ||||
|         //     dataView: { show: true, readOnly: false }, | ||||
|         //     magicType: { show: true, type: ['line', 'bar'] }, | ||||
|         //     restore: { show: true }, | ||||
|         //     saveAsImage: { show: true } | ||||
|         //   } | ||||
|         // }, | ||||
|         calculable: true, | ||||
|         xAxis: [ | ||||
|           { | ||||
|             type: 'category', | ||||
|             // prettier-ignore | ||||
|             data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | ||||
|           } | ||||
|         ], | ||||
|         yAxis: [ | ||||
|           { | ||||
|             type: 'value' | ||||
|           } | ||||
|         ], | ||||
|         grid: { | ||||
|           top: '20%', | ||||
|           left: "1%", | ||||
|           right: "3%", | ||||
|           bottom: "1%", | ||||
|           containLabel: true | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: 'Email', | ||||
|             type: 'line', | ||||
|             stack: 'Total', | ||||
|             data: [120, 132, 101, 134, 90, 230, 210] | ||||
|           }, | ||||
|           { | ||||
|             name: 'Union Ads', | ||||
|             type: 'line', | ||||
|             stack: 'Total', | ||||
|             data: [220, 182, 191, 234, 290, 330, 310] | ||||
|           }, | ||||
|           { | ||||
|             name: 'Video Ads', | ||||
|             type: 'line', | ||||
|             stack: 'Total', | ||||
|             data: [150, 232, 201, 154, 190, 330, 410] | ||||
|           }, | ||||
|           { | ||||
|             name: 'Direct', | ||||
|             type: 'line', | ||||
|             stack: 'Total', | ||||
|             data: [320, 332, 301, 334, 390, 330, 320] | ||||
|           }, | ||||
|           { | ||||
|             name: 'Search Engine', | ||||
|             type: 'line', | ||||
|             stack: 'Total', | ||||
|             data: [820, 932, 901, 934, 1290, 1330, 1320] | ||||
|           } | ||||
|         ] | ||||
|       }, true) | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| /* .reportChart { | ||||
|   position: absolute; | ||||
|   height: 100%; | ||||
|   width: 100%; | ||||
|   top: 10px; | ||||
| } */ | ||||
| </style> | ||||
| @@ -1,51 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: Do not edit | ||||
|  * @Date: 2024-06-24 15:03:19 | ||||
|  * @LastEditTime: 2024-06-24 15:07:42 | ||||
|  * @LastEditors: DY | ||||
|  * @Description:  | ||||
| --> | ||||
| <template> | ||||
|   <div> | ||||
|     <span class="dot" :class="myClass"></span> | ||||
|     <span>{{ state }}</span> | ||||
|   </div> | ||||
| </template> | ||||
| <script> | ||||
| export default { | ||||
|   name: "statusChart", | ||||
|   props: { | ||||
|     injectData: { | ||||
|       type: Object, | ||||
|       default: () => ({}), | ||||
|     }, | ||||
|   }, | ||||
|   computed: { | ||||
|     state() { | ||||
|       return ['', '未开始', '生产中', '已完成'][this.injectData.orderStatus] | ||||
|     }, | ||||
|     myClass() { | ||||
|       return ['', 'yellow', 'blue', 'green'][this.injectData.orderStatus] | ||||
|     } | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
| <style scoped> | ||||
| .dot { | ||||
|   display: inline-block; | ||||
|   width: 6px; | ||||
|   height: 6px; | ||||
|   border-radius: 3px; | ||||
|   vertical-align: middle; | ||||
|   margin-right: 8px; | ||||
| } | ||||
| .green { | ||||
|   background: #10DC76; | ||||
| } | ||||
| .yellow { | ||||
|   background: #FFBD02; | ||||
| } | ||||
| .blue { | ||||
|   background: #3B79FF; | ||||
| } | ||||
| </style> | ||||
| @@ -1,348 +0,0 @@ | ||||
| <template> | ||||
|   <div> | ||||
|     <div class="containerTop"> | ||||
|       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | ||||
|     </div> | ||||
|     <div class="containerBottom"> | ||||
|       <div class="smallTitle">芯片OEE</div> | ||||
|       <bm-line-bar | ||||
|         :chartHeight="chartHeight" | ||||
|         :legendList="legendList" | ||||
|         :chartMsg="chartMsg" | ||||
|         :chartId="chartId" | ||||
|         :chartNum="chartNum" | ||||
|       /> | ||||
|       <base-table | ||||
|         :table-props="tableProps" | ||||
|         :page="listQuery.current" | ||||
|         :limit="listQuery.size" | ||||
|         :table-data="tableData" | ||||
|         :max-height="tableH" | ||||
|       /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import bmSearchBar from "../components/bmSearchBar.vue"; | ||||
| import BmLineBar from "../components/bmLineBar.vue"; | ||||
| import { | ||||
|   chipoeeComparePage, | ||||
|   chipoeeCompareExport, | ||||
| } from "@/api/report/benchmarking.js"; | ||||
| import moment from "moment"; | ||||
| export default { | ||||
|   name: "ChipOEEBM", | ||||
|   data() { | ||||
|     return { | ||||
|       factoryList: [ | ||||
|         { id: 0, name: "瑞昌" }, | ||||
|         { id: 1, name: "邯郸" }, | ||||
|       ], | ||||
|       tableProps: [], | ||||
|       tableProps1: [ | ||||
|         { | ||||
|           prop: "factory", | ||||
|           label: "工厂名称", | ||||
|           filter: (val) => this.factoryList[val].name, | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "item", | ||||
|           label: "科目", | ||||
|           minWidth: 120, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "unit", | ||||
|           label: "单位", | ||||
|           minWidth: 80, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|       ], | ||||
|       listQuery: { | ||||
|         current: 1, | ||||
|         size: 100, | ||||
|       }, | ||||
|       tableData: [], | ||||
|       chartHeight: this.tableHeight(269) / 2, | ||||
|       tableH: this.tableHeight(269) / 2, | ||||
|       legendList: [ | ||||
|         { id: 1, name: "", type: 2, color: "#FFCE6A" }, | ||||
|         { id: 2, name: "", type: 1, color: "#8EF0AB" }, | ||||
|         { id: 3, name: "", type: 1, color: "#288AFF" }, | ||||
|       ], | ||||
|       chartMsg: { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位/%", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [-18, -16], | ||||
|               color: "#68C483", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|       chartId: "chipOEEBMChart", | ||||
|       chartNum: 1, | ||||
|     }; | ||||
|   }, | ||||
|   components: { | ||||
|     bmSearchBar, | ||||
|     BmLineBar, | ||||
|   }, | ||||
|   computed: { | ||||
|     isOpen() { | ||||
|       return this.$store.getters.sidebar.opened; | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     // 监听左侧菜单栏是否展开 | ||||
|     isOpen(val) { | ||||
|       if (this.$route.name === "ChipOEEBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.tableH = this.tableHeight(269) / 2; | ||||
|     this.chartHeight = this.tableHeight(269) / 2; | ||||
|     window.addEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.tableProp = this.tableProp1; | ||||
|     this.listQuery.type = 2; | ||||
|     this.listQuery.startDate = moment().format("yyyy-MM-DD"); | ||||
|     this.listQuery.factory = []; | ||||
|     this.getList(); | ||||
|   }, | ||||
|   destroyed() { | ||||
|     window.removeEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   activated() { | ||||
|     // 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新 | ||||
|     if (this.$route.name === "ChipOEEBM") { | ||||
|       this.chartNum++; | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     _setTableHeight() { | ||||
|       this.tableH = this.tableHeight(269) / 2; | ||||
|       this.chartHeight = this.tableHeight(269) / 2; | ||||
|       if (this.$route.name === "ChipOEEBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|     getSearch(val) { | ||||
|       this.listQuery.type = val.type; | ||||
|       this.listQuery.startDate = val.startDate; | ||||
|       this.listQuery.factory = val.factory; | ||||
|       this.getList(); | ||||
|     }, | ||||
|     getList() { | ||||
|       this.tableProps = []; | ||||
|       chipoeeComparePage({ ...this.listQuery }).then((res) => { | ||||
|         if (res.data && res.data.records.length > 0) { | ||||
|           let msg = res.data.records[0]; | ||||
|           let arr = [ | ||||
|             { | ||||
|               prop: "yoy", | ||||
|               label: msg.yoyColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "queryValue", | ||||
|               label: msg.queryColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "target", | ||||
|               label: msg.targetColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|           ]; | ||||
|           this.tableProps = this.tableProps1.concat(arr); | ||||
|           this.tableData = res.data.records; | ||||
|           // 设置图例 | ||||
|           this.legendList[0].name = msg.targetColumn; | ||||
|           this.legendList[1].name = msg.yoyColumn; | ||||
|           this.legendList[2].name = msg.queryColumn; | ||||
|           this.chartMsg.series[0].name = msg.targetColumn; | ||||
|           this.chartMsg.series[1].name = msg.yoyColumn; | ||||
|           this.chartMsg.series[2].name = msg.queryColumn; | ||||
|           // 设置chartMsg的series的数据 | ||||
|           this.setChartMsg(res.data.records); | ||||
|         } else { | ||||
|           // 重置 | ||||
|           this.resetMsg(); | ||||
|         } | ||||
|       }); | ||||
|     }, | ||||
|     setChartMsg(val) { | ||||
|       let xData = []; | ||||
|       let lineData = []; | ||||
|       let barData1 = []; | ||||
|       let barData2 = []; | ||||
|       for (let i = 0; i < val.length; i++) { | ||||
|         this.factoryList.map((item) => { | ||||
|           if (item.id === val[i].factory) { | ||||
|             xData.push(item.name); | ||||
|           } | ||||
|         }); | ||||
|         lineData.push({ | ||||
|           name: "%", | ||||
|           value: val[i].target || 0, | ||||
|         }); | ||||
|         barData1.push({ name: "%", value: val[i].yoy || 0 }); | ||||
|         barData2.push({ | ||||
|           name: "%", | ||||
|           value: val[i].queryValue || 0, | ||||
|         }); | ||||
|       } | ||||
|       this.chartMsg.xData = xData; | ||||
|       this.chartMsg.series[0].data = lineData; | ||||
|       this.chartMsg.series[1].data = barData1; | ||||
|       this.chartMsg.series[2].data = barData2; | ||||
|       this.chartMsg.xData = xData; | ||||
|     }, | ||||
|     resetMsg() { | ||||
|       this.tableProps = this.tableProps1; | ||||
|       this.tableData = []; | ||||
|       this.chartMsg = { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位/%", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "1", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "2", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [-18, -16], | ||||
|               color: "#68C483", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "3", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }; | ||||
|     }, | ||||
|     handleExport(val) { | ||||
|       this.listQuery.type = val.type; | ||||
|       this.listQuery.startDate = val.startDate; | ||||
|       this.listQuery.factory = val.factory; | ||||
|       let fileName = "芯片OEE对标.xls"; | ||||
|       chipoeeCompareExport({ ...this.listQuery }) | ||||
|         .then((response) => { | ||||
|           this.$download.excel(response, fileName); | ||||
|           this.$message.success("导出成功"); | ||||
|         }) | ||||
|         .catch(() => {}); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .containerTop { | ||||
|   height: 64px; | ||||
| } | ||||
| .containerTop, | ||||
| .containerBottom { | ||||
|   position: relative; | ||||
|   background-color: #fff; | ||||
|   border-radius: 8px; | ||||
|   padding: 16px; | ||||
| } | ||||
| .containerBottom { | ||||
|   height: calc(100vh - 201px); | ||||
|   margin-top: 8px; | ||||
|   .smallTitle { | ||||
|     font-size: 16px; | ||||
|     color: #000; | ||||
|     margin-bottom: 15px; | ||||
|   } | ||||
|   .smallTitle::before { | ||||
|     display: inline-block; | ||||
|     width: 4px; | ||||
|     height: 16px; | ||||
|     background: #0b58ff; | ||||
|     content: ""; | ||||
|     margin-right: 8px; | ||||
|     vertical-align: -3px; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,357 +0,0 @@ | ||||
| <template> | ||||
|   <div> | ||||
|     <div class="containerTop"> | ||||
|       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | ||||
|     </div> | ||||
|     <div class="containerBottom"> | ||||
|       <div class="smallTitle">芯片产量</div> | ||||
|       <bm-line-bar | ||||
|         :chartHeight="chartHeight" | ||||
|         :legendList="legendList" | ||||
|         :chartMsg="chartMsg" | ||||
|         :chartId="chartId" | ||||
|         :chartNum="chartNum" | ||||
|       /> | ||||
|       <base-table | ||||
|         :table-props="tableProps" | ||||
|         :page="listQuery.current" | ||||
|         :limit="listQuery.size" | ||||
|         :table-data="tableData" | ||||
|         :max-height="tableH" | ||||
|       /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import bmSearchBar from "../components/bmSearchBar.vue"; | ||||
| import BmLineBar from "../components/bmLineBar.vue"; | ||||
| import { | ||||
|   cPReportByDateRangePage, | ||||
|   cPReportByDateRangeExport, | ||||
| } from "@/api/report/benchmarking.js"; | ||||
| import moment from "moment"; | ||||
| export default { | ||||
|   name: "ChipOutputBM", | ||||
|   data() { | ||||
|     return { | ||||
|       factoryList: [ | ||||
|         { id: 0, name: "瑞昌" }, | ||||
|         { id: 1, name: "邯郸" }, | ||||
|       ], | ||||
|       tableProps: [], | ||||
|       tableProps1: [ | ||||
|         { | ||||
|           prop: "factory", | ||||
|           label: "工厂名称", | ||||
|           filter: (val) => this.factoryList[val].name, | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "item", | ||||
|           label: "科目", | ||||
|           minWidth: 120, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "unit", | ||||
|           label: "单位", | ||||
|           minWidth: 80, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|       ], | ||||
|       listQuery: { | ||||
|         current: 1, | ||||
|         size: 100, | ||||
|       }, | ||||
|       tableData: [], | ||||
|       chartHeight: this.tableHeight(269) / 2, | ||||
|       tableH: this.tableHeight(269) / 2, | ||||
|       legendList: [ | ||||
|         { id: 1, name: "", type: 2, color: "#FFCE6A" }, | ||||
|         { id: 2, name: "", type: 1, color: "#8EF0AB" }, | ||||
|         { id: 3, name: "", type: 1, color: "#288AFF" }, | ||||
|       ], | ||||
|       chartMsg: { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位/片", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "1", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "2", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               // position: [-5, -16], | ||||
|               // position: [-5, -16], | ||||
|               position: [-10, -16], | ||||
|               // position: [-17, -16], | ||||
|               color: "#68C483", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "3", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|       chartId: "chipOutputBMChart", | ||||
|       chartNum: 1, | ||||
|     }; | ||||
|   }, | ||||
|   components: { | ||||
|     bmSearchBar, | ||||
|     BmLineBar, | ||||
|   }, | ||||
|   computed: { | ||||
|     isOpen() { | ||||
|       return this.$store.getters.sidebar.opened; | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     // 监听左侧菜单栏是否展开 | ||||
|     isOpen(val) { | ||||
|       if (this.$route.name === "ChipOutputBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.tableH = this.tableHeight(269) / 2; | ||||
|     this.chartHeight = this.tableHeight(269) / 2; | ||||
|     window.addEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.tableProp = this.tableProp1; | ||||
|     this.listQuery.date = 2; | ||||
|     this.listQuery.queryTime = moment().format("yyyy-MM-DD"); | ||||
|     this.listQuery.factorys = []; | ||||
|     this.getList(); | ||||
|   }, | ||||
|   destroyed() { | ||||
|     window.removeEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   activated() { | ||||
|     // 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新 | ||||
|     if (this.$route.name === "ChipOutputBM") { | ||||
|       this.chartNum++; | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     _setTableHeight() { | ||||
|       this.tableH = this.tableHeight(269) / 2; | ||||
|       this.chartHeight = this.tableHeight(269) / 2; | ||||
|       if (this.$route.name === "ChipOutputBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|     getSearch(val) { | ||||
|       this.listQuery.date = val.type; | ||||
|       this.listQuery.queryTime = val.startDate; | ||||
|       this.listQuery.factorys = val.factory; | ||||
|       this.getList(); | ||||
|     }, | ||||
|     getList() { | ||||
|       this.tableProps = []; | ||||
|       cPReportByDateRangePage({ ...this.listQuery }).then((res) => { | ||||
|         if (res.data && res.data.length > 0) { | ||||
|           // 设置表头 | ||||
|           let msg = res.data[0]; | ||||
|           let arr = [ | ||||
|             { | ||||
|               prop: "lastone", | ||||
|               label: msg.lastone.reportTime, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "currentone", | ||||
|               label: msg.currentone.reportTime, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "targetone", | ||||
|               label: msg.targetone.reportTime, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|           ]; | ||||
|           this.tableProps = this.tableProps1.concat(arr); | ||||
|           // 整理表格数据 | ||||
|           let tableArr = []; | ||||
|           res.data.forEach((item) => { | ||||
|             let obj = {}; | ||||
|             obj.factory = item.factory; | ||||
|             obj.item = "芯片产量"; | ||||
|             obj.unit = "片"; | ||||
|             obj.lastone = item.lastone.total; | ||||
|             obj.currentone = item.currentone.total; | ||||
|             obj.targetone = item.targetone.total; | ||||
|             tableArr.push(obj); | ||||
|           }); | ||||
|           this.tableData = tableArr; | ||||
|           // 设置图例 | ||||
|           this.legendList[0].name = msg.targetone.reportTime; | ||||
|           this.legendList[1].name = msg.lastone.reportTime; | ||||
|           this.legendList[2].name = msg.currentone.reportTime; | ||||
|           this.chartMsg.series[0].name = msg.targetone.reportTime; | ||||
|           this.chartMsg.series[1].name = msg.lastone.reportTime; | ||||
|           this.chartMsg.series[2].name = msg.currentone.reportTime; | ||||
|           // 设置偏移量 | ||||
|           switch (this.listQuery.type) { | ||||
|             case 0: | ||||
|               this.chartMsg.series[1].label.position = [-5, -16]; | ||||
|               break; | ||||
|             case 1: | ||||
|               this.chartMsg.series[1].label.position = [-5, -16]; | ||||
|               break; | ||||
|             case 2: | ||||
|               this.chartMsg.series[1].label.position = [-10, -16]; | ||||
|               break; | ||||
|             default: | ||||
|               this.chartMsg.series[1].label.position = [-17, -16]; | ||||
|           } | ||||
|           // 设置chartMsg的series的数据 | ||||
|           this.setChartMsg(res.data); | ||||
|         } else { | ||||
|           // 重置 | ||||
|           this.resetMsg(); | ||||
|         } | ||||
|       }); | ||||
|     }, | ||||
|     setChartMsg(val) { | ||||
|       let xData = []; | ||||
|       let lineData = []; | ||||
|       let barData1 = []; | ||||
|       let barData2 = []; | ||||
|       for (let i = 0; i < val.length; i++) { | ||||
|         this.factoryList.map((item) => { | ||||
|           if (item.id === val[i].factory) { | ||||
|             xData.push(item.name); | ||||
|           } | ||||
|         }); | ||||
|         lineData.push(val[i].targetone.total || 0); | ||||
|         barData1.push(val[i].lastone.total || 0); | ||||
|         barData2.push(val[i].currentone.total || 0); | ||||
|       } | ||||
|       this.chartMsg.xData = xData; | ||||
|       this.chartMsg.series[0].data = lineData; | ||||
|       this.chartMsg.series[1].data = barData1; | ||||
|       this.chartMsg.series[2].data = barData2; | ||||
|       this.chartMsg.xData = xData; | ||||
|     }, | ||||
|     resetMsg() { | ||||
|       this.tableProps = this.tableProps1; | ||||
|       this.tableData = []; | ||||
|       this.chartMsg = { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位/片", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "1", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "2", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               // position: [-5, -16], | ||||
|               // position: [-5, -16], | ||||
|               position: [-10, -16], | ||||
|               // position: [-17, -16], | ||||
|               color: "#68C483", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "3", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }; | ||||
|     }, | ||||
|     handleExport(val) { | ||||
|       this.listQuery.type = val.type; | ||||
|       this.listQuery.startDate = val.startDate; | ||||
|       this.listQuery.factory = val.factory; | ||||
|       let fileName = "芯片产量.xls"; | ||||
|       cPReportByDateRangeExport({ ...this.listQuery }) | ||||
|         .then((response) => { | ||||
|           this.$download.excel(response, fileName); | ||||
|           this.$message.success("导出成功"); | ||||
|         }) | ||||
|         .catch(() => {}); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .containerTop { | ||||
|   height: 64px; | ||||
| } | ||||
| .containerTop, | ||||
| .containerBottom { | ||||
|   position: relative; | ||||
|   background-color: #fff; | ||||
|   border-radius: 8px; | ||||
|   padding: 16px; | ||||
| } | ||||
| .containerBottom { | ||||
|   height: calc(100vh - 201px); | ||||
|   margin-top: 8px; | ||||
|   .smallTitle { | ||||
|     font-size: 16px; | ||||
|     color: #000; | ||||
|     margin-bottom: 15px; | ||||
|   } | ||||
|   .smallTitle::before { | ||||
|     display: inline-block; | ||||
|     width: 4px; | ||||
|     height: 16px; | ||||
|     background: #0b58ff; | ||||
|     content: ""; | ||||
|     margin-right: 8px; | ||||
|     vertical-align: -3px; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,344 +0,0 @@ | ||||
| <template> | ||||
|   <div> | ||||
|     <div class="containerTop"> | ||||
|       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | ||||
|     </div> | ||||
|     <div class="containerBottom"> | ||||
|       <div class="smallTitle">芯片人均产量</div> | ||||
|       <bm-line-bar | ||||
|         :chartHeight="chartHeight" | ||||
|         :legendList="legendList" | ||||
|         :chartMsg="chartMsg" | ||||
|         :chartId="chartId" | ||||
|         :chartNum="chartNum" | ||||
|       /> | ||||
|       <base-table | ||||
|         :table-props="tableProps" | ||||
|         :page="listQuery.current" | ||||
|         :limit="listQuery.size" | ||||
|         :table-data="tableData" | ||||
|         :max-height="tableH" | ||||
|       /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import bmSearchBar from "../components/bmSearchBar.vue"; | ||||
| import BmLineBar from "../components/bmLineBar.vue"; | ||||
| import { | ||||
|   chipAnnualAverageProductionPage, | ||||
|   chipAnnualAverageProductionExport, | ||||
| } from "@/api/report/benchmarking.js"; | ||||
| import moment from "moment"; | ||||
| export default { | ||||
|   name: "ChipPerCapitaBM", | ||||
|   data() { | ||||
|     return { | ||||
|       factoryList: [ | ||||
|         { id: 0, name: "瑞昌" }, | ||||
|         { id: 1, name: "邯郸" }, | ||||
|       ], | ||||
|       tableProps: [], | ||||
|       tableProps1: [ | ||||
|         { | ||||
|           prop: "factory", | ||||
|           label: "工厂名称", | ||||
|           filter: (val) => this.factoryList[val].name, | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "item", | ||||
|           label: "科目", | ||||
|           minWidth: 120, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "unit", | ||||
|           label: "单位", | ||||
|           minWidth: 80, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|       ], | ||||
|       listQuery: { | ||||
|         current: 1, | ||||
|         size: 100, | ||||
|       }, | ||||
|       tableData: [], | ||||
|       chartHeight: this.tableHeight(269) / 2, | ||||
|       tableH: this.tableHeight(269) / 2, | ||||
|       legendList: [ | ||||
|         { id: 1, name: "", type: 2, color: "#FFCE6A" }, | ||||
|         { id: 2, name: "", type: 1, color: "#8EF0AB" }, | ||||
|         { id: 3, name: "", type: 1, color: "#288AFF" }, | ||||
|       ], | ||||
|       chartMsg: { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位:片/人", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "1", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "2", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               // position: [-5, -16], | ||||
|               // position: [-5, -16], | ||||
|               position: [-10, -16], | ||||
|               // position: [-17, -16], | ||||
|               color: "#68C483", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "3", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|       chartId: "chipPerCapitaBMChart", | ||||
|       chartNum: 1, | ||||
|     }; | ||||
|   }, | ||||
|   components: { | ||||
|     bmSearchBar, | ||||
|     BmLineBar, | ||||
|   }, | ||||
|   computed: { | ||||
|     isOpen() { | ||||
|       return this.$store.getters.sidebar.opened; | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     // 监听左侧菜单栏是否展开 | ||||
|     isOpen(val) { | ||||
|       if (this.$route.name === "ChipPerCapitaBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.tableH = this.tableHeight(269) / 2; | ||||
|     this.chartHeight = this.tableHeight(269) / 2; | ||||
|     window.addEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.tableProp = this.tableProp1; | ||||
|     this.listQuery.type = 2; | ||||
|     this.listQuery.startDate = moment().format("yyyy-MM-DD"); | ||||
|     this.listQuery.factory = []; | ||||
|     this.getList(); | ||||
|   }, | ||||
|   destroyed() { | ||||
|     window.removeEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   activated() { | ||||
|     // 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新 | ||||
|     if (this.$route.name === "ChipPerCapitaBM") { | ||||
|       this.chartNum++; | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     _setTableHeight() { | ||||
|       this.tableH = this.tableHeight(269) / 2; | ||||
|       this.chartHeight = this.tableHeight(269) / 2; | ||||
|       if (this.$route.name === "ChipPerCapitaBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|     getSearch(val) { | ||||
|       this.listQuery.type = val.type; | ||||
|       this.listQuery.startDate = val.startDate; | ||||
|       this.listQuery.factory = val.factory; | ||||
|       this.getList(); | ||||
|     }, | ||||
|     getList() { | ||||
|       this.tableProps = []; | ||||
|       chipAnnualAverageProductionPage({ ...this.listQuery }).then((res) => { | ||||
|         if (res.data && res.data.records.length > 0) { | ||||
|           let msg = res.data.records[0]; | ||||
|           let arr = [ | ||||
|             { | ||||
|               prop: "yoy", | ||||
|               label: msg.yoyColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "queryValue", | ||||
|               label: msg.queryColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "target", | ||||
|               label: msg.targetColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|           ]; | ||||
|           this.tableProps = this.tableProps1.concat(arr); | ||||
|           this.tableData = res.data.records; | ||||
|           // 设置图例 | ||||
|           this.legendList[0].name = msg.targetColumn; | ||||
|           this.legendList[1].name = msg.yoyColumn; | ||||
|           this.legendList[2].name = msg.queryColumn; | ||||
|           this.chartMsg.series[0].name = msg.targetColumn; | ||||
|           this.chartMsg.series[1].name = msg.yoyColumn; | ||||
|           this.chartMsg.series[2].name = msg.queryColumn; | ||||
|           // 设置偏移量 | ||||
|           switch (this.listQuery.type) { | ||||
|             case 0: | ||||
|               this.chartMsg.series[1].label.position = [-5, -16]; | ||||
|               break; | ||||
|             case 1: | ||||
|               this.chartMsg.series[1].label.position = [-5, -16]; | ||||
|               break; | ||||
|             case 2: | ||||
|               this.chartMsg.series[1].label.position = [-10, -16]; | ||||
|               break; | ||||
|             default: | ||||
|               this.chartMsg.series[1].label.position = [-17, -16]; | ||||
|           } | ||||
|           // 设置chartMsg的series的数据 | ||||
|           this.setChartMsg(res.data.records); | ||||
|         } else { | ||||
|           // 重置 | ||||
|           this.resetMsg(); | ||||
|         } | ||||
|       }); | ||||
|     }, | ||||
|     setChartMsg(val) { | ||||
|       let xData = []; | ||||
|       let lineData = []; | ||||
|       let barData1 = []; | ||||
|       let barData2 = []; | ||||
|       for (let i = 0; i < val.length; i++) { | ||||
|         this.factoryList.map((item) => { | ||||
|           if (item.id === val[i].factory) { | ||||
|             xData.push(item.name); | ||||
|           } | ||||
|         }); | ||||
|         lineData.push(val[i].target || 0); | ||||
|         barData1.push(val[i].yoy || 0); | ||||
|         barData2.push(val[i].queryValue || 0); | ||||
|       } | ||||
|       this.chartMsg.xData = xData; | ||||
|       this.chartMsg.series[0].data = lineData; | ||||
|       this.chartMsg.series[1].data = barData1; | ||||
|       this.chartMsg.series[2].data = barData2; | ||||
|       this.chartMsg.xData = xData; | ||||
|     }, | ||||
|     resetMsg() { | ||||
|       this.tableProps = this.tableProps1; | ||||
|       this.tableData = []; | ||||
|       this.chartMsg = { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位/片", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "1", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "2", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               // position: [-5, -16], | ||||
|               // position: [-5, -16], | ||||
|               position: [-10, -16], | ||||
|               // position: [-17, -16], | ||||
|               color: "#68C483", | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "3", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }; | ||||
|     }, | ||||
|     handleExport(val) { | ||||
|       this.listQuery.type = val.type; | ||||
|       this.listQuery.startDate = val.startDate; | ||||
|       this.listQuery.factory = val.factory; | ||||
|       let fileName = "芯片人均产量对标.xls"; | ||||
|       chipAnnualAverageProductionExport({ ...this.listQuery }) | ||||
|         .then((response) => { | ||||
|           this.$download.excel(response, fileName); | ||||
|           this.$message.success("导出成功"); | ||||
|         }) | ||||
|         .catch(() => {}); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .containerTop { | ||||
|   height: 64px; | ||||
| } | ||||
| .containerTop, | ||||
| .containerBottom { | ||||
|   position: relative; | ||||
|   background-color: #fff; | ||||
|   border-radius: 8px; | ||||
|   padding: 16px; | ||||
| } | ||||
| .containerBottom { | ||||
|   height: calc(100vh - 201px); | ||||
|   margin-top: 8px; | ||||
|   .smallTitle { | ||||
|     font-size: 16px; | ||||
|     color: #000; | ||||
|     margin-bottom: 15px; | ||||
|   } | ||||
|   .smallTitle::before { | ||||
|     display: inline-block; | ||||
|     width: 4px; | ||||
|     height: 16px; | ||||
|     background: #0b58ff; | ||||
|     content: ""; | ||||
|     margin-right: 8px; | ||||
|     vertical-align: -3px; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,348 +0,0 @@ | ||||
| <template> | ||||
|   <div> | ||||
|     <div class="containerTop"> | ||||
|       <bmSearchBar @getSearch="getSearch" @handleExport="handleExport" /> | ||||
|     </div> | ||||
|     <div class="containerBottom"> | ||||
|       <div class="smallTitle">芯片良率</div> | ||||
|       <bm-line-bar | ||||
|         :chartHeight="chartHeight" | ||||
|         :legendList="legendList" | ||||
|         :chartMsg="chartMsg" | ||||
|         :chartId="chartId" | ||||
|         :chartNum="chartNum" | ||||
|       /> | ||||
|       <base-table | ||||
|         :table-props="tableProps" | ||||
|         :page="listQuery.current" | ||||
|         :limit="listQuery.size" | ||||
|         :table-data="tableData" | ||||
|         :max-height="tableH" | ||||
|       /> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import bmSearchBar from "../components/bmSearchBar.vue"; | ||||
| import BmLineBar from "../components/bmLineBar.vue"; | ||||
| import { | ||||
|   chipyieldRatePage, | ||||
|   chipyieldRateExport, | ||||
| } from "@/api/report/benchmarking.js"; | ||||
| import moment from "moment"; | ||||
| export default { | ||||
|   name: "ChipYieldBM", | ||||
|   data() { | ||||
|     return { | ||||
|       factoryList: [ | ||||
|         { id: 0, name: "瑞昌" }, | ||||
|         { id: 1, name: "邯郸" }, | ||||
|       ], | ||||
|       tableProps: [], | ||||
|       tableProps1: [ | ||||
|         { | ||||
|           prop: "factory", | ||||
|           label: "工厂名称", | ||||
|           filter: (val) => this.factoryList[val].name, | ||||
|           minWidth: 150, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "item", | ||||
|           label: "科目", | ||||
|           minWidth: 120, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|         { | ||||
|           prop: "unit", | ||||
|           label: "单位", | ||||
|           minWidth: 80, | ||||
|           showOverflowtooltip: true, | ||||
|         }, | ||||
|       ], | ||||
|       listQuery: { | ||||
|         current: 1, | ||||
|         size: 100, | ||||
|       }, | ||||
|       tableData: [], | ||||
|       chartHeight: this.tableHeight(269) / 2, | ||||
|       tableH: this.tableHeight(269) / 2, | ||||
|       legendList: [ | ||||
|         { id: 1, name: "", type: 2, color: "#FFCE6A" }, | ||||
|         { id: 2, name: "", type: 1, color: "#8EF0AB" }, | ||||
|         { id: 3, name: "", type: 1, color: "#288AFF" }, | ||||
|       ], | ||||
|       chartMsg: { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位/%", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "1", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "2", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [-18, -16], | ||||
|               color: "#68C483", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "3", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }, | ||||
|       chartId: "chipYieldBMChart", | ||||
|       chartNum: 1, | ||||
|     }; | ||||
|   }, | ||||
|   components: { | ||||
|     bmSearchBar, | ||||
|     BmLineBar, | ||||
|   }, | ||||
|   computed: { | ||||
|     isOpen() { | ||||
|       return this.$store.getters.sidebar.opened; | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     // 监听左侧菜单栏是否展开 | ||||
|     isOpen(val) { | ||||
|       if (this.$route.name === "ChipYieldBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     this.tableH = this.tableHeight(269) / 2; | ||||
|     this.chartHeight = this.tableHeight(269) / 2; | ||||
|     window.addEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.tableProp = this.tableProp1; | ||||
|     this.listQuery.type = 2; | ||||
|     this.listQuery.startDate = moment().format("yyyy-MM-DD"); | ||||
|     this.listQuery.factory = []; | ||||
|     this.getList(); | ||||
|   }, | ||||
|   destroyed() { | ||||
|     window.removeEventListener("resize", this._setTableHeight); | ||||
|   }, | ||||
|   activated() { | ||||
|     // 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新 | ||||
|     if (this.$route.name === "ChipYieldBM") { | ||||
|       this.chartNum++; | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     _setTableHeight() { | ||||
|       this.tableH = this.tableHeight(269) / 2; | ||||
|       this.chartHeight = this.tableHeight(269) / 2; | ||||
|       if (this.$route.name === "ChipYieldBM") { | ||||
|         this.chartNum++; | ||||
|       } | ||||
|     }, | ||||
|     getSearch(val) { | ||||
|       this.listQuery.type = val.type; | ||||
|       this.listQuery.startDate = val.startDate; | ||||
|       this.listQuery.factory = val.factory; | ||||
|       this.getList(); | ||||
|     }, | ||||
|     getList() { | ||||
|       this.tableProps = []; | ||||
|       chipyieldRatePage({ ...this.listQuery }).then((res) => { | ||||
|         if (res.data && res.data.records.length > 0) { | ||||
|           let msg = res.data.records[0]; | ||||
|           let arr = [ | ||||
|             { | ||||
|               prop: "yoy", | ||||
|               label: msg.yoyColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "queryValue", | ||||
|               label: msg.queryColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|             { | ||||
|               prop: "target", | ||||
|               label: msg.targetColumn, | ||||
|               filter: (val) => (val || val === 0 ? val : "-"), | ||||
|               minWidth: 150, | ||||
|             }, | ||||
|           ]; | ||||
|           this.tableProps = this.tableProps1.concat(arr); | ||||
|           this.tableData = res.data.records; | ||||
|           // 设置图例 | ||||
|           this.legendList[0].name = msg.targetColumn; | ||||
|           this.legendList[1].name = msg.yoyColumn; | ||||
|           this.legendList[2].name = msg.queryColumn; | ||||
|           this.chartMsg.series[0].name = msg.targetColumn; | ||||
|           this.chartMsg.series[1].name = msg.yoyColumn; | ||||
|           this.chartMsg.series[2].name = msg.queryColumn; | ||||
|           // 设置chartMsg的series的数据 | ||||
|           this.setChartMsg(res.data.records); | ||||
|         } else { | ||||
|           // 重置 | ||||
|           this.resetMsg(); | ||||
|         } | ||||
|       }); | ||||
|     }, | ||||
|     setChartMsg(val) { | ||||
|       let xData = []; | ||||
|       let lineData = []; | ||||
|       let barData1 = []; | ||||
|       let barData2 = []; | ||||
|       for (let i = 0; i < val.length; i++) { | ||||
|         this.factoryList.map((item) => { | ||||
|           if (item.id === val[i].factory) { | ||||
|             xData.push(item.name); | ||||
|           } | ||||
|         }); | ||||
|         lineData.push({ | ||||
|           name: "%", | ||||
|           value: val[i].target || 0, | ||||
|         }); | ||||
|         barData1.push({ name: "%", value: val[i].yoy || 0 }); | ||||
|         barData2.push({ | ||||
|           name: "%", | ||||
|           value: val[i].queryValue || 0, | ||||
|         }); | ||||
|       } | ||||
|       this.chartMsg.xData = xData; | ||||
|       this.chartMsg.series[0].data = lineData; | ||||
|       this.chartMsg.series[1].data = barData1; | ||||
|       this.chartMsg.series[2].data = barData2; | ||||
|       this.chartMsg.xData = xData; | ||||
|     }, | ||||
|     resetMsg() { | ||||
|       this.tableProps = this.tableProps1; | ||||
|       this.tableData = []; | ||||
|       this.chartMsg = { | ||||
|         color: ["#FFCE6A", "#8EF0AB", "#288AFF"], | ||||
|         xData: [], | ||||
|         yName: "单位/%", | ||||
|         series: [ | ||||
|           { | ||||
|             name: "1", | ||||
|             data: [], | ||||
|             type: "line", | ||||
|             symbol: "circle", | ||||
|             symbolSize: 6, | ||||
|             label: { | ||||
|               show: true, | ||||
|               color: "#FFAE17", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "2", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [-18, -16], | ||||
|               color: "#68C483", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|           { | ||||
|             name: "3", | ||||
|             data: [], | ||||
|             type: "bar", | ||||
|             barWidth: 20, | ||||
|             label: { | ||||
|               show: true, | ||||
|               position: [0, -16], | ||||
|               color: "#288AFF", | ||||
|               formatter: function (params) { | ||||
|                 return params.value.toFixed(2) + "%"; | ||||
|               }, | ||||
|             }, | ||||
|           }, | ||||
|         ], | ||||
|       }; | ||||
|     }, | ||||
|     handleExport(val) { | ||||
|       this.listQuery.type = val.type; | ||||
|       this.listQuery.startDate = val.startDate; | ||||
|       this.listQuery.factory = val.factory; | ||||
|       let fileName = "芯片良率对标.xls"; | ||||
|       chipyieldRateExport({ ...this.listQuery }) | ||||
|         .then((response) => { | ||||
|           this.$download.excel(response, fileName); | ||||
|           this.$message.success("导出成功"); | ||||
|         }) | ||||
|         .catch(() => {}); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .containerTop { | ||||
|   height: 64px; | ||||
| } | ||||
| .containerTop, | ||||
| .containerBottom { | ||||
|   position: relative; | ||||
|   background-color: #fff; | ||||
|   border-radius: 8px; | ||||
|   padding: 16px; | ||||
| } | ||||
| .containerBottom { | ||||
|   height: calc(100vh - 201px); | ||||
|   margin-top: 8px; | ||||
|   .smallTitle { | ||||
|     font-size: 16px; | ||||
|     color: #000; | ||||
|     margin-bottom: 15px; | ||||
|   } | ||||
|   .smallTitle::before { | ||||
|     display: inline-block; | ||||
|     width: 4px; | ||||
|     height: 16px; | ||||
|     background: #0b58ff; | ||||
|     content: ""; | ||||
|     margin-right: 8px; | ||||
|     vertical-align: -3px; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,157 +0,0 @@ | ||||
| <template> | ||||
|   <div | ||||
|     :id="chartId" | ||||
|     :style="{ width: '100%', height: chartHeight + 'px' }" | ||||
|   ></div> | ||||
| </template> | ||||
| <script> | ||||
| import * as echarts from "echarts"; | ||||
| import { debounce } from "@/utils/debounce"; | ||||
| export default { | ||||
|   name: "BaseChart", | ||||
|   data() { | ||||
|     return { | ||||
|       myChart: "", | ||||
|       option: { | ||||
|         color: [], | ||||
|         // color: ["#8EF0AB", "#63BDFF", "#288AFF"], | ||||
|         grid: { | ||||
|           left: 70, | ||||
|           right: 0, | ||||
|           bottom: 30, | ||||
|           top: 30, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           formatter: function (params) { | ||||
|             var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`; | ||||
|             for (var i = 0, l = params.length; i < l; i++) { | ||||
|               res += | ||||
|                 "<br/>" + | ||||
|                 `${ | ||||
|                   params[i].seriesType === "line" | ||||
|                     ? '<img width="10" height="10" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />' | ||||
|                     : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>` | ||||
|                 }` + | ||||
|                 `<span style='display:inline-block;width:180px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${ | ||||
|                   params[i].name === "%" | ||||
|                     ? (params[i].value ? params[i].value.toFixed(2) : "0.00") + | ||||
|                       params[i].name | ||||
|                     : String(params[i].value).replace( | ||||
|                         /\B(?=(\d{3})+(?!\d))/g, | ||||
|                         "," | ||||
|                       ) | ||||
|                 }</span>`; | ||||
|             } | ||||
|             return res; | ||||
|           }, | ||||
|         }, | ||||
|         xAxis: { | ||||
|           type: "category", | ||||
|           data: [], | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisPointer: { | ||||
|             type: "shadow", | ||||
|           }, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           type: "value", | ||||
|           name: "", | ||||
|           nameTextStyle: { | ||||
|             fontSize: 12, | ||||
|             align: "right", | ||||
|           }, | ||||
|           axisLabel: {}, | ||||
|         }, | ||||
|         series: [], | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   props: { | ||||
|     chartHeight: { | ||||
|       type: Number, | ||||
|       default: 300, | ||||
|     }, | ||||
|     legendList: { | ||||
|       type: Array, | ||||
|       default: () => [], | ||||
|     }, | ||||
|     chartMsg: { | ||||
|       type: Object, | ||||
|       default: () => {}, | ||||
|     }, | ||||
|     chartId: { | ||||
|       type: String, | ||||
|       default: "bmChart", | ||||
|     }, | ||||
|     chartNum: { | ||||
|       type: Number, | ||||
|       default: 1, | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     chartHeight: { | ||||
|       handler(newVal) { | ||||
|         this.chartHeight = newVal; | ||||
|       }, | ||||
|     }, | ||||
|     chartNum(val) { | ||||
|       this.canvasReset(); | ||||
|     }, | ||||
|     chartMsg: { | ||||
|       handler(newVal) { | ||||
|         this.canvasReset(); | ||||
|       }, | ||||
|       deep: true, | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.canvasReset(); | ||||
|   }, | ||||
|   methods: { | ||||
|     canvasReset() { | ||||
|       debounce(() => { | ||||
|         this.getMes(); | ||||
|       }, 500)(); | ||||
|     }, | ||||
|     getMes() { | ||||
|       if (this.myChart) { | ||||
|         this.myChart.dispose(); | ||||
|       } | ||||
|       var chartDom = document.getElementById(this.chartId); | ||||
|       this.myChart = echarts.init(chartDom); | ||||
|       this.option.color = this.chartMsg.color; | ||||
|       this.option.xAxis.data = this.chartMsg.xData; | ||||
|       this.option.yAxis.name = this.chartMsg.yName; | ||||
|       if ( | ||||
|         this.chartMsg.series.length > 0 && | ||||
|         this.chartMsg.series[0].data[0].name === "%" | ||||
|       ) { | ||||
|         this.option.yAxis.axisLabel = { | ||||
|           formatter: function (value) { | ||||
|             return value + ".00%"; | ||||
|           }, | ||||
|         }; | ||||
|       } else { | ||||
|         this.option.yAxis.axisLabel = { | ||||
|           formatter: function (value) { | ||||
|             return value; | ||||
|           }, | ||||
|         }; | ||||
|       } | ||||
|       // this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel; | ||||
|       this.option.series = this.chartMsg.series; | ||||
|       this.myChart.setOption(this.option); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
| @@ -1,156 +0,0 @@ | ||||
| <!-- 只适用于指标完成情况对标 --> | ||||
| <template> | ||||
|   <div> | ||||
|     <!-- 图例 --> | ||||
|     <div | ||||
|       class="legend" | ||||
|       v-show=" | ||||
|         this.chartMsg1.series[0].data.length > 0 || | ||||
|         this.chartMsg2.series[0].data.length > 0 | ||||
|       " | ||||
|     > | ||||
|       <span class="item" v-for="item in legendList" :key="item.id"> | ||||
|         <span | ||||
|           v-if="item.type === 1" | ||||
|           class="block" | ||||
|           :style="{ backgroundColor: item.color }" | ||||
|         ></span> | ||||
|         <span | ||||
|           v-if="item.type === 2" | ||||
|           class="line" | ||||
|           :style="{ backgroundColor: item.color }" | ||||
|         > | ||||
|           <span | ||||
|             class="line-block" | ||||
|             :style="{ backgroundColor: item.color }" | ||||
|           ></span> | ||||
|         </span> | ||||
|         {{ item.name }}</span | ||||
|       > | ||||
|     </div> | ||||
|     <!-- 图 --> | ||||
|     <div> | ||||
|       <div | ||||
|         style=" | ||||
|           display: inline-block; | ||||
|           width: 79%; | ||||
|           vertical-align: top; | ||||
|           padding-right: 20px; | ||||
|         " | ||||
|       > | ||||
|         <base-chart | ||||
|           v-show="this.chartMsg1.series[0].data.length > 0" | ||||
|           :chartHeight="chartHeight" | ||||
|           :chartWidth="chartWidth1" | ||||
|           :chartMsg="chartMsg1" | ||||
|           chartId="targetChartLeft" | ||||
|           :chartNum="chartNum" | ||||
|         /> | ||||
|         <!-- 暂无数据 --> | ||||
|         <div | ||||
|           :style="{ height: chartHeight + 'px' }" | ||||
|           v-show="this.chartMsg1.series[0].data.length === 0" | ||||
|         > | ||||
|           <div | ||||
|             class="no-data-bg" | ||||
|             style="position: relative; left: 50%; transform: translateX(-50%)" | ||||
|           ></div> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div style="display: inline-block; width: 20%; vertical-align: top"> | ||||
|         <base-chart | ||||
|           v-show="this.chartMsg2.series[0].data.length > 0" | ||||
|           :chartHeight="chartHeight" | ||||
|           :chartWidth="chartWidth2" | ||||
|           :chartMsg="chartMsg2" | ||||
|           chartId="targetChartRight" | ||||
|           :chartNum="chartNum" | ||||
|         /> | ||||
|         <!-- 暂无数据 --> | ||||
|         <div | ||||
|           :style="{ height: chartHeight + 'px' }" | ||||
|           v-show="this.chartMsg2.series[0].data.length === 0" | ||||
|         > | ||||
|           <div | ||||
|             class="no-data-bg" | ||||
|             style=" | ||||
|               position: relative; | ||||
|               left: 50%; | ||||
|               transform: translateX(-50%); | ||||
|               width: 80%; | ||||
|             " | ||||
|           ></div> | ||||
|         </div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| </template> | ||||
| <script> | ||||
| import baseChart from "./baseChart.vue"; | ||||
| export default { | ||||
|   name: "bmBarComplete", | ||||
|   data() { | ||||
|     return { | ||||
|       chartWidth1: "60%", | ||||
|       chartWidth2: "20%", | ||||
|     }; | ||||
|   }, | ||||
|   props: { | ||||
|     chartHeight: { | ||||
|       type: Number, | ||||
|       default: 300, | ||||
|     }, | ||||
|     legendList: { | ||||
|       type: Array, | ||||
|       default: () => [], | ||||
|     }, | ||||
|     chartMsg1: { | ||||
|       type: Object, | ||||
|       default: () => {}, | ||||
|     }, | ||||
|     chartMsg2: { | ||||
|       type: Object, | ||||
|       default: () => {}, | ||||
|     }, | ||||
|     chartNum: { | ||||
|       type: Number, | ||||
|       default: 1, | ||||
|     }, | ||||
|   }, | ||||
|   components: { baseChart }, | ||||
| }; | ||||
| </script> | ||||
| <style lang="scss" scoped> | ||||
| .legend { | ||||
|   position: absolute; | ||||
|   right: 10px; | ||||
|   top: 15px; | ||||
|   .item { | ||||
|     display: inline-block; | ||||
|     margin-right: 10px; | ||||
|     font-size: 14px; | ||||
|     color: #8c8c8c; | ||||
|     .block { | ||||
|       width: 10px; | ||||
|       height: 10px; | ||||
|       display: inline-block; | ||||
|       margin-right: 4px; | ||||
|     } | ||||
|     .line { | ||||
|       width: 10px; | ||||
|       height: 10px; | ||||
|       border-radius: 5px; | ||||
|       display: inline-block; | ||||
|       margin-right: 4px; | ||||
|       position: relative; | ||||
|       .line-block { | ||||
|         position: absolute; | ||||
|         width: 20px; | ||||
|         height: 2px; | ||||
|         left: -5px; | ||||
|         top: 4px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,154 +0,0 @@ | ||||
| <!-- 只使用于指标完成情况对标页面 --> | ||||
| <template> | ||||
|   <el-form :model="form" :inline="true" ref="bmSearchBarForm" class="blueTip"> | ||||
|     <el-form-item label="时间维度" prop="type"> | ||||
|       <el-select | ||||
|         size="small" | ||||
|         v-model="form.type" | ||||
|         placeholder="请选择" | ||||
|         style="width: 100px" | ||||
|       > | ||||
|         <el-option | ||||
|           v-for="item in typeList" | ||||
|           :key="item.id" | ||||
|           :label="item.name" | ||||
|           :value="item.id" | ||||
|         > | ||||
|         </el-option> | ||||
|       </el-select> | ||||
|     </el-form-item> | ||||
|     <el-form-item v-show="form.type === 0" label="时间" prop="dayTime"> | ||||
|       <el-date-picker | ||||
|         size="small" | ||||
|         :clearable="false" | ||||
|         v-model="form.dayTime" | ||||
|         type="date" | ||||
|         placeholder="选择日期" | ||||
|         value-format="yyyy-MM-dd" | ||||
|         style="width: 150px" | ||||
|         :picker-options="pickerOptions" | ||||
|       > | ||||
|       </el-date-picker> | ||||
|     </el-form-item> | ||||
|     <el-form-item v-show="form.type === 1" label="时间" prop="weekTime"> | ||||
|       <el-date-picker | ||||
|         v-model="form.weekTime" | ||||
|         :clearable="false" | ||||
|         type="week" | ||||
|         format="yyyy-MM-dd" | ||||
|         placeholder="选择周" | ||||
|         value-format="yyyy-MM-dd" | ||||
|         style="width: 150px" | ||||
|         :picker-options="pickerOptions" | ||||
|       > | ||||
|       </el-date-picker> | ||||
|     </el-form-item> | ||||
|     <el-form-item v-show="form.type === 2" label="时间" prop="monthTime"> | ||||
|       <el-date-picker | ||||
|         v-model="form.monthTime" | ||||
|         :clearable="false" | ||||
|         type="month" | ||||
|         placeholder="选择月份" | ||||
|         value-format="yyyy-MM-dd" | ||||
|         style="width: 150px" | ||||
|       > | ||||
|       </el-date-picker> | ||||
|     </el-form-item> | ||||
|     <el-form-item v-show="form.type === 3" label="时间" prop="yearTime"> | ||||
|       <el-date-picker | ||||
|         v-model="form.yearTime" | ||||
|         :clearable="false" | ||||
|         type="year" | ||||
|         placeholder="选择年份" | ||||
|         value-format="yyyy-MM-dd" | ||||
|         style="width: 150px" | ||||
|       > | ||||
|       </el-date-picker> | ||||
|     </el-form-item> | ||||
|     <el-form-item> | ||||
|       <el-button type="primary" size="small" @click="getDataList('search')" | ||||
|         >查询</el-button | ||||
|       > | ||||
|       <el-divider direction="vertical"></el-divider> | ||||
|       <el-button | ||||
|         type="primary" | ||||
|         size="small" | ||||
|         plain | ||||
|         @click="getDataList('export')" | ||||
|         >导出</el-button | ||||
|       > | ||||
|     </el-form-item> | ||||
|   </el-form> | ||||
| </template> | ||||
| <script> | ||||
| import moment from "moment"; | ||||
| export default { | ||||
|   name: "bmSearchBarComplete", | ||||
|   data() { | ||||
|     return { | ||||
|       form: { | ||||
|         type: 2, | ||||
|         dayTime: moment().format("yyyy-MM-DD"), | ||||
|         weekTime: moment().format("yyyy-MM-DD"), | ||||
|         monthTime: moment().format("yyyy-MM-DD"), | ||||
|         yearTime: moment().format("yyyy-MM-DD"), | ||||
|       }, | ||||
|       typeList: [ | ||||
|         { id: 0, name: "日" }, | ||||
|         { id: 1, name: "周" }, | ||||
|         { id: 2, name: "月" }, | ||||
|         { id: 3, name: "年" }, | ||||
|       ], | ||||
|       pickerOptions: { | ||||
|         firstDayOfWeek: 1, | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   methods: { | ||||
|     getDataList(val) { | ||||
|       let params = {}; | ||||
|       switch (this.form.type) { | ||||
|         case 0: | ||||
|           params.startDate = this.form.dayTime; | ||||
|           break; | ||||
|         case 1: | ||||
|           params.startDate = this.form.weekTime; | ||||
|           break; | ||||
|         case 2: | ||||
|           params.startDate = this.form.monthTime; | ||||
|           break; | ||||
|         case 3: | ||||
|           params.startDate = this.form.yearTime; | ||||
|           break; | ||||
|         default: | ||||
|           break; | ||||
|       } | ||||
|       params.type = this.form.type; | ||||
|       if (!params.startDate) { | ||||
|         this.$message.warning("时间不能为空"); | ||||
|         return; | ||||
|       } | ||||
|       if (val === "search") { | ||||
|         this.$emit("getSearch", params); | ||||
|       } else { | ||||
|         this.$emit("handleExport", params); | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
| <style lang="scss" scoped> | ||||
| .el-divider--vertical { | ||||
|   height: 24px; | ||||
| } | ||||
| .blueTip::before { | ||||
|   display: inline-block; | ||||
|   content: ""; | ||||
|   width: 4px; | ||||
|   height: 18px; | ||||
|   background: #0b58ff; | ||||
|   border-radius: 1px; | ||||
|   margin-right: 8px; | ||||
|   margin-top: 8px; | ||||
| } | ||||
| </style> | ||||