Compare commits
	
		
			1 Commits
		
	
	
		
			ec5e47a416
			...
			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,14 +0,0 @@ | ||||
| <?xml version="1.0" encoding="UTF-8"?> | ||||
| <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | ||||
|     <title>编组</title> | ||||
|     <g id="01数字驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | ||||
|         <g id="产量驾驶舱" transform="translate(-1438.000000, -12.000000)" fill="#FFFFFF" fill-rule="nonzero"> | ||||
|             <g id="编组-20" transform="translate(1438.000000, 8.000000)"> | ||||
|                 <g id="编组" transform="translate(0.000000, 4.000000)"> | ||||
|                     <rect id="矩形" opacity="0" x="0" y="0" width="24" height="24"></rect> | ||||
|                     <path d="M11.1710783,2.42919989 C11.7298936,2.09409047 12.4328291,2.12455473 12.9654367,2.52059014 L20.3218013,7.99000647 L20.4665209,8.10559268 C21.0744501,8.62656431 21.4302636,9.40344805 21.4302636,10.227099 L21.4302636,19.0470569 L21.4250327,19.2212289 C21.3382831,20.6611171 20.1833875,21.8011882 18.7715031,21.8011882 L5.2284969,21.8011882 L5.06035624,21.7957697 C3.67032883,21.7059084 2.56973638,20.5095861 2.56973638,19.0470569 L2.56973638,10.2273587 L2.57600507,10.0381789 C2.63012926,9.22282649 3.03207443,8.47038558 3.67819781,7.99000711 L11.034559,2.52059336 Z M12.0713092,3.55793652 C11.9772762,3.53774358 11.8769764,3.55793433 11.7954857,3.6185066 L4.43911542,9.0879271 L4.32641124,9.18150853 C4.04059293,9.44596068 3.87451485,9.82573182 3.87451485,10.2273587 L3.87451485,19.0470569 L3.880713,19.1821318 C3.94632222,19.8933667 4.52470053,20.4496068 5.2284969,20.4496068 L11.2507497,20.4487759 L11.3507364,20.3451977 L11.3512202,14.4627186 L11.3582338,14.3683764 C11.4044406,14.0603828 11.6734228,13.8227675 12,13.8227675 C12.3345637,13.8227675 12.6123182,14.0734451 12.6454705,14.3976012 L12.6489183,14.4681588 L12.6487364,20.3451881 L12.7487231,20.4487759 L18.7714898,20.4496068 L18.9018895,20.4431864 C19.5885066,20.3752237 20.1254851,19.7760987 20.1254851,19.0470569 L20.1254851,10.2273587 L20.1177907,10.0779557 C20.0769951,9.68325297 19.8759128,9.32208831 19.5608746,9.08791971 L12.2045243,3.61851399 L12.1402672,3.58065321 Z" id="形状结合" stroke="#FFFFFF" stroke-width="0.1"></path> | ||||
|                 </g> | ||||
|             </g> | ||||
|         </g> | ||||
|     </g> | ||||
| </svg> | ||||
| Before Width: | Height: | Size: 2.2 KiB | 
| @@ -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; | ||||
| } | ||||
|   | ||||
| @@ -1,13 +1,11 @@ | ||||
| <template> | ||||
|   <el-breadcrumb class="app-breadcrumb" separator="/"> | ||||
|     <transition-group name="breadcrumb"> | ||||
|       <el-breadcrumb-item v-for=" (item, index) in levelList" :key="item.path"> | ||||
|         <span :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .65)')}" | ||||
|           v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ | ||||
|           item.meta.title | ||||
|           }}</span> | ||||
|         <a :style="{ color: (changeColor == true ? 'rgba(255, 255, 255, 0.45)' :' rgba(0, 0, 0, .45)')}" v-else | ||||
|           @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | ||||
|       <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path"> | ||||
|         <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ | ||||
|         item.meta.title | ||||
|       }}</span> | ||||
|         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | ||||
|       </el-breadcrumb-item> | ||||
|     </transition-group> | ||||
|   </el-breadcrumb> | ||||
| @@ -20,29 +18,7 @@ export default { | ||||
|       levelList: null | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       // console.log(this.$route); | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     changeColor(val) { | ||||
|       if (val == true) { | ||||
|         let item = document.getElementsByClassName('el-breadcrumb__separator') | ||||
|         // let item  =document.getElementsByClassName('') | ||||
|         item[0].style.color = rgba(255, 255, 255, 0.45) | ||||
|         item[1].style.color = rgba(255, 255, 255, 0.45) | ||||
|       } else { | ||||
|         let item = document.getElementsByClassName('el-breadcrumb__separator') | ||||
|         item[0].style.color = '' | ||||
|           item[1].style.color = '' | ||||
|       } | ||||
|     }, | ||||
|     $route(route) { | ||||
|       // if you go to the redirect page, do not update the breadcrumbs | ||||
|       if (route.path.startsWith('/redirect/')) { | ||||
| @@ -94,20 +70,13 @@ export default { | ||||
|   margin-left: 8px; | ||||
|  | ||||
|   .no-redirect { | ||||
|     color: rgba(0, 0, 0, .45); | ||||
|     color: rgba(0, 0, 0, 0.65); | ||||
|     cursor: text; | ||||
|   } | ||||
| } | ||||
|  | ||||
| .app-breadcrumb .el-breadcrumb__inner a, | ||||
| .el-breadcrumb__inner.is-link { | ||||
|   color:rgba(0, 0, 0, 0.65) | ||||
|   color: rgba(0, 0, 0, 0.45); | ||||
| } | ||||
| </style> | ||||
| <!-- <style lang="scss"> | ||||
| .changeColor { | ||||
|   --theme-color: rgba(255, 255, 255, 0.45); | ||||
| } | ||||
| .el-breadcrumb__separator { | ||||
|   color:var(--theme-color); | ||||
| } | ||||
| </style> --> | ||||
|   | ||||
| @@ -1,16 +1,14 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-07-11 13:56:19 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <div style="padding: 0 15px;" @click="toggleClick"> | ||||
|     <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" | ||||
|       width="64" height="64" :fill="changeColor === true ? 'rgba(255, 255, 255, 1)' : '' "> | ||||
|       <path | ||||
|         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> | ||||
|     <svg | ||||
|       :class="{'is-active':isActive}" | ||||
|       class="hamburger" | ||||
|       viewBox="0 0 1024 1024" | ||||
|       xmlns="http://www.w3.org/2000/svg" | ||||
|       width="64" | ||||
|       height="64" | ||||
|     > | ||||
|       <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> | ||||
|     </svg> | ||||
|   </div> | ||||
| </template> | ||||
| @@ -24,15 +22,6 @@ export default { | ||||
|       default: false | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   methods: { | ||||
|     toggleClick() { | ||||
|       this.$emit('toggleClick') | ||||
|   | ||||
| @@ -1,6 +1,5 @@ | ||||
| <template> | ||||
|   <div ref="navbar" class="navbar" | ||||
|     :style="changeColor ? 'background: rgba(0, 21, 41, 1);boxShadow:0px 1px 8px 0px rgba(0,131,255,0.35)' : ''"> | ||||
|   <div class="navbar"> | ||||
|     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" | ||||
|       @toggleClick="toggleSideBar" /> | ||||
|  | ||||
| @@ -42,13 +41,6 @@ export default { | ||||
|       'nickname', | ||||
|       'device' | ||||
|     ]), | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|     setting: { | ||||
|       get() { | ||||
|         return this.$store.state.settings.showSettings | ||||
| @@ -66,23 +58,6 @@ export default { | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     // changeColor: { | ||||
|     //   handler(val){ | ||||
|     //     if (val == true) { | ||||
|     //       let svg = document.getElementsByClassName('hamburger') | ||||
|     //       console.log('svg', svg) | ||||
|     //       svg[0].style.color = 'rgba(255, 255, 255, 1)' | ||||
|     //       svg[0].setAttribute('fill', 'rgba(255, 255, 255, 1)') | ||||
|     //     } else { | ||||
|     //       let svg = document.getElementsByClassName('hamburger') | ||||
|     //       console.log('svg', svg); | ||||
|     //       svg[0].setAttribute('fill', '') | ||||
|     //     } | ||||
|     //   }, | ||||
|     //   immediate: true, //立即执行 | ||||
|     // } | ||||
|   }, | ||||
|   methods: { | ||||
|     toggleSideBar() { | ||||
|       this.$store.dispatch('app/toggleSideBar') | ||||
|   | ||||
| @@ -1,31 +1,25 @@ | ||||
| <template> | ||||
|   <div class="right-msg" :style="blackTitle ? 'color: #000' : 'color: #fff'"> | ||||
|     <div class="home-icon" v-if='blackTitle'> | ||||
|       <svg-icon :icon-class="changeColor === true ? 'darkHome' : 'home'" | ||||
|         style="font-size: 24px; cursor: pointer;color: aqua;" @click="toHome" /> | ||||
|       <svg-icon icon-class="home" style="font-size: 24px; cursor: pointer;" @click="toHome" /> | ||||
|     </div> | ||||
|     <div class="time-msg"> | ||||
|       <div class="line1" :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''">{{ timeZone | ||||
|         }}    {{ topTime }}</div> | ||||
|       <div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ topDate }}</div> | ||||
|       <div class="line1">{{ timeZone }}    {{ topTime }}</div> | ||||
|       <div class="line2">{{ topDate }}</div> | ||||
|     </div> | ||||
|     <div class="base-msg"> | ||||
|       <div class="avatar"> | ||||
|         <el-dropdown> | ||||
|           <img :src="require(`../../assets/images/choicepart/avatar.png`)" alt="" width="32" height="32" /> | ||||
|           <el-dropdown-menu slot="dropdown"> | ||||
|             <el-dropdown-item> | ||||
|               <svg-icon icon-class="helpbtn" />帮助文档 | ||||
|             </el-dropdown-item> | ||||
|             <el-dropdown-item @click.native="logout"> | ||||
|               <svg-icon icon-class="exitbtn" />退出登录 | ||||
|             </el-dropdown-item> | ||||
|             <el-dropdown-item><svg-icon icon-class="helpbtn" />帮助文档</el-dropdown-item> | ||||
|             <el-dropdown-item @click.native="logout"><svg-icon icon-class="exitbtn" />退出登录</el-dropdown-item> | ||||
|           </el-dropdown-menu> | ||||
|         </el-dropdown> | ||||
|       </div> | ||||
|       <div class="use-msg"> | ||||
|         <div :style="changeColor === true ? 'color:rgba(255, 255, 255, 1)' : ''" class="line1">{{ nickname }}</div> | ||||
|         <div :style="changeColor === true ? 'color:rgba(255, 255, 255, .65)' : ''" class="line2">{{ dept }}</div> | ||||
|         <div class="line1">{{ nickname }}</div> | ||||
|         <div class="line2">{{ dept }}</div> | ||||
|       </div> | ||||
|     </div> | ||||
|   </div> | ||||
| @@ -54,15 +48,6 @@ export default { | ||||
|       } | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
|   created() { | ||||
|     // this.getUserMsg() | ||||
|     this.getTime() | ||||
| @@ -139,4 +124,4 @@ export default { | ||||
|     opacity: 0.65; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| </style> | ||||
| @@ -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; | ||||
|     } | ||||
|   | ||||
| @@ -1,10 +1,3 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-07-04 10:44:35 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <template> | ||||
|   <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll"> | ||||
|     <slot /> | ||||
| @@ -24,9 +17,7 @@ export default { | ||||
|   computed: { | ||||
|     scrollWrapper() { | ||||
|       return this.$refs.scrollContainer.$refs.wrap | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.scrollWrapper.addEventListener('scroll', this.emitScroll, true) | ||||
|   | ||||
| @@ -1,7 +1,5 @@ | ||||
| <template> | ||||
|   <div ref="tagsViewContainer" | ||||
|     :style="changeColor === true ? 'background:rgba(0, 21, 41, 1);borderTop:0px solid #d8dce5' : ''" id="tags-view-container" | ||||
|     class="tags-view-container"> | ||||
|   <div id="tags-view-container" class="tags-view-container"> | ||||
|     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll"> | ||||
|       <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''" | ||||
|         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item" | ||||
| @@ -38,13 +36,6 @@ export default { | ||||
|     } | ||||
|   }, | ||||
|   computed: { | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|     visitedViews() { | ||||
|       return this.$store.state.tagsView.visitedViews | ||||
|     }, | ||||
| @@ -53,31 +44,9 @@ export default { | ||||
|     }, | ||||
|     theme() { | ||||
|       return this.$store.state.settings.theme; | ||||
|     }, | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     changeColor(val) { | ||||
|       if (val == true) { | ||||
|         // console.log('this.$refs.tagsViewContainer', this.$refs.tagsViewContainer); | ||||
|         // this.$refs.tagsViewContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)' | ||||
|         // this.$refs.tagsViewContainer.style.borderTop = '0px solid #d8dce5' | ||||
|         var tag = document.getElementsByClassName("tags-view-item") | ||||
|         console.log('tag', tag) | ||||
|         for (let i in tag) { | ||||
|           tag[i].classList.add("changeColor") | ||||
|           // tag[i].classList.remove("default") | ||||
|         } | ||||
|         // console.log('this.$refs.scrollContainer', this.$refs.tag); | ||||
|       } else { | ||||
|         // this.$refs.tagsViewContainer.style.backgroundColor = '' | ||||
|         // this.$refs.tagsViewContainer.style.borderTop = '1px solid #d8dce5' | ||||
|         var tag = document.getElementsByClassName("tags-view-item") | ||||
|         for (let i in tag) { | ||||
|           tag[i].classList.remove("changeColor") | ||||
|           // tag[i].classList.add("default") | ||||
|         } | ||||
|       } | ||||
|     }, | ||||
|     $route() { | ||||
|       this.addTags() | ||||
|       this.moveToCurrentTag() | ||||
| @@ -91,7 +60,6 @@ export default { | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     console.log(this.$route, this.changeColor); | ||||
|     this.initTags() | ||||
|     this.addTags() | ||||
|   }, | ||||
| @@ -100,23 +68,11 @@ export default { | ||||
|       return route.path === this.$route.path | ||||
|     }, | ||||
|     activeStyle(tag) { | ||||
|       if (this.changeColor) { | ||||
|         if (!this.isActive(tag)) return { | ||||
|           "background-color": 'rgba(0, 59, 115, 1)', | ||||
|           "border-color": 'rgba(0, 59, 115, 1)', | ||||
|           "color": 'rgba(255, 255, 255, 1)' | ||||
|         }; | ||||
|         return { | ||||
|           "background-color": this.theme, | ||||
|           "border-color": this.theme | ||||
|         }; | ||||
|       } else { | ||||
|         if (!this.isActive(tag)) return {}; | ||||
|         return { | ||||
|           "background-color": this.theme, | ||||
|           "border-color": this.theme | ||||
|         }; | ||||
|       } | ||||
|       if (!this.isActive(tag)) return {}; | ||||
|       return { | ||||
|         "background-color": this.theme, | ||||
|         "border-color": this.theme | ||||
|       }; | ||||
|     }, | ||||
|     isAffix(tag) { | ||||
|       return tag.meta && tag.meta.affix | ||||
| @@ -274,14 +230,6 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| // :root{ | ||||
| //   --theme-color: rgba(0, 0, 0, 0.45); | ||||
| //   --theme-background: #f4f4f4ff; | ||||
| // } | ||||
| .changeColor{ | ||||
|   --theme-background: rgba(0, 59, 115, 1); | ||||
|   --theme-color: rgba(255, 255, 255, 1); | ||||
| } | ||||
| .tags-view-container { | ||||
|   height: 42px; | ||||
|   width: 100%; | ||||
| @@ -297,8 +245,8 @@ export default { | ||||
|       cursor: pointer; | ||||
|       height: 28px; | ||||
|       line-height: 28px; | ||||
|       color: var(--theme-color,rgba(0, 0, 0, 0.45)); | ||||
|       background:var(--theme-background,#f4f4f4ff); | ||||
|       color: rgba(0, 0, 0, 0.45); | ||||
|       background: #F4F4F4FF; | ||||
|       padding: 0 8px 0 12px; | ||||
|       font-size: 14px; | ||||
|       letter-spacing: 1px; | ||||
| @@ -383,7 +331,7 @@ export default { | ||||
|       .el-icon-close { | ||||
|         &:hover { | ||||
|           background-color: #fff; | ||||
|           color: rgba(62, 142, 247, 1); | ||||
|           color: #409eff; | ||||
|         } | ||||
|       } | ||||
|     } | ||||
|   | ||||
| @@ -2,8 +2,7 @@ | ||||
|   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }"> | ||||
|     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> | ||||
|     <sidebar v-if="!sidebar.hide" class="sidebar-container" /> | ||||
|     <div :style="changeColor ? 'background: rgba(0, 21, 41, 1)' : ''" ref="mainContainer" | ||||
|       :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> | ||||
|     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> | ||||
|       <div :class="{ 'fixed-header': fixedHeader }"> | ||||
|         <navbar /> | ||||
|         <tags-view v-if="needTagsView" /> | ||||
| @@ -40,13 +39,6 @@ export default { | ||||
|       needTagsView: state => state.settings.tagsView, | ||||
|       fixedHeader: state => state.settings.fixedHeader | ||||
|     }), | ||||
|     changeColor() { | ||||
|       if (this.$route.path == '/copilot/efficiency-container' || this.$route.path == '/copilot/main' || this.$route.path == '/factoryData/hdIndex' || this.$route.path === '/factoryData/factory-data') { | ||||
|         return true | ||||
|       } else { | ||||
|         return false | ||||
|       } | ||||
|     }, | ||||
|     classObj() { | ||||
|       return { | ||||
|         hideSidebar: !this.sidebar.opened, | ||||
| @@ -59,16 +51,6 @@ export default { | ||||
|       return variables; | ||||
|     } | ||||
|   }, | ||||
|   watch: { | ||||
|     // changeColor(val) { | ||||
|     //   if (val == true) { | ||||
|     //     // console.log('this.$refs.mainContainer', this.$refs.mainContainer); | ||||
|     //     this.$refs.mainContainer.style.backgroundColor = 'rgba(0, 21, 41, 1)' | ||||
|     //   } else { | ||||
|     //     this.$refs.mainContainer.style.backgroundColor = '' | ||||
|     //   } | ||||
|     // }, | ||||
|   }, | ||||
|   methods: { | ||||
|     handleClickOutside() { | ||||
|       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) | ||||
|   | ||||
| @@ -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, | ||||
|     } | ||||
|   } | ||||
| } | ||||
|  | ||||
|   | ||||
| @@ -163,4 +163,4 @@ textarea { | ||||
|  | ||||
| .el-upload__tip { | ||||
|   line-height: 1.2; | ||||
| } | ||||
| } | ||||
| @@ -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 | ||||
|   } | ||||
| ] | ||||
|  | ||||
| /** | ||||
|  * 代码生成模板类型 | ||||
|  */ | ||||
|   | ||||
| @@ -1,16 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-10 15:17:28 | ||||
|  * @LastEditTime: 2024-07-19 15:18:00 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: ChartContainer.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:54:33 | ||||
|     description: | ||||
|     description:  | ||||
|     todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高 | ||||
| --> | ||||
|  | ||||
| @@ -51,7 +43,7 @@ export default { | ||||
| } | ||||
|  | ||||
| ::-webkit-scrollbar { | ||||
|   width: 80%; | ||||
|   width: 8px; | ||||
|   height: 8px; | ||||
| } | ||||
|  | ||||
|   | ||||
| @@ -9,7 +9,7 @@ | ||||
|   <chart-container class="bar-chart-base"> | ||||
|     <div class="legend"> | ||||
|       <span v-for="item in legend" :key="item.label" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | ||||
|     </div> | ||||
|     <div ref="chart" style="height:94%;width:100%"></div> | ||||
|   </chart-container> | ||||
| @@ -62,36 +62,7 @@ export default { | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|           }, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -102,24 +73,23 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: "right", | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -137,7 +107,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -172,7 +142,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
| @@ -217,19 +187,19 @@ export default { | ||||
|       this.canvasReset() | ||||
|     }, | ||||
|     isFullscreen(val) { | ||||
|       this.options.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 16; | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       this.initChart(this.options); | ||||
|       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.actualOptions); | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       //   item.barWidth = val ? 18 : 12; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       // 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.actualOptions); | ||||
|       this.canvasReset() | ||||
|     }, | ||||
| @@ -238,14 +208,14 @@ export default { | ||||
|         this.initChart(this.options); | ||||
|         return; | ||||
|       } | ||||
|       // const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       // console.log('actualOptions', this.options) | ||||
|       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.actualOptions = actualOptions; | ||||
|       this.initChart(this.options); | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       console.log('actualOptions', this.options) | ||||
|       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 || ""; | ||||
|       this.actualOptions = actualOptions; | ||||
|       this.initChart(actualOptions); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
| @@ -254,7 +224,7 @@ export default { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|     // this.actualOptions = this.options | ||||
|     this.actualOptions = this.options | ||||
|     this.canvasReset(); | ||||
|     window.addEventListener("resize", this.canvasReset); | ||||
|   }, | ||||
| @@ -278,7 +248,7 @@ export default { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(this.$refs.chart); | ||||
|       this.chart.setOption(this.options); | ||||
|       this.chart.setOption(this.actualOptions); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
|   | ||||
| @@ -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> | ||||
| @@ -73,7 +92,6 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
| @@ -123,7 +141,7 @@ export default { | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
| @@ -143,8 +161,8 @@ export default { | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.7vw; | ||||
|     height: 0.7vw; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
|  | ||||
|   .corner.tl { | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-07-09 16:55:58 | ||||
|  * @LastEditTime: 2024-05-07 16:54:54 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -61,8 +61,8 @@ export default { | ||||
| .container-icon { | ||||
|   //   width: 32px; | ||||
|   //   height: 32px; | ||||
|   width: 1.4vw; | ||||
|   height: 1.4vw; | ||||
|   width: 1.701vw; | ||||
|   height: 1.701vw; | ||||
|   background: #ccc2; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -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,226 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-09 15:07:50 | ||||
|  * @LastEditTime: 2024-07-09 15:41:38 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:43:51 | ||||
|  * @LastEditTime: 2024-07-09 15:06: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; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 90%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, transparent 60%, #024798 98%, transparent 90%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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" :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; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 95%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     right: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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> | ||||
| @@ -1,15 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-05-31 13:26:32 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: button.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-16 15:02:34 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -57,7 +50,7 @@ button { | ||||
|   padding: 12px; | ||||
|   padding-left: 20px; | ||||
|   color: #fff; | ||||
|   font-size: 18px; | ||||
|   font-size: 22px; | ||||
|   letter-spacing: 10px; | ||||
|   cursor: pointer; | ||||
| } | ||||
| @@ -75,8 +68,8 @@ button { | ||||
| .copilot-btn::after { | ||||
|   content: ""; | ||||
|   position: absolute; | ||||
|   width: 0.7vw; | ||||
|   height: 0.7vw; | ||||
|   width: 16px; | ||||
|   height: 16px; | ||||
|   top: 0; | ||||
|   background: transparent; | ||||
|   border-style: solid; | ||||
|   | ||||
| @@ -1,220 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-09 15:15:00 | ||||
|  * @LastEditTime: 2024-07-19 16:11:37 | ||||
|  * @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; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 5%, | ||||
|         #024798 10%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 5%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 90%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 10%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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,220 +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; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 5%, | ||||
|     #024798 10%, | ||||
|     transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 95%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     right: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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> | ||||
| @@ -1,16 +1,22 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-23 15:49:14 | ||||
|  * @LastEditTime: 2024-07-19 16:08:27 | ||||
|  * @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"> | ||||
|     <div class="legend"> | ||||
|       <span v-for="item in legend" :key="item.label" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span> | ||||
|     </div> | ||||
|     <div ref="ftoChart" style="height:94%;width:100%"></div> | ||||
|   </chart-container> | ||||
| @@ -63,36 +69,7 @@ export default { | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|           }, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -103,24 +80,23 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: "right", | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -138,7 +114,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -173,7 +149,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
| @@ -218,19 +194,19 @@ export default { | ||||
|       this.canvasReset() | ||||
|     }, | ||||
|     isFullscreen(val) { | ||||
|       this.options.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 16; | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       this.initChart(this.options); | ||||
|       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.actualOptions); | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       //   item.barWidth = val ? 18 : 12; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       // 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.actualOptions); | ||||
|       this.canvasReset() | ||||
|     }, | ||||
| @@ -239,14 +215,14 @@ export default { | ||||
|         this.initChart(this.options); | ||||
|         return; | ||||
|       } | ||||
|       // const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       // console.log('actualOptions', this.options) | ||||
|       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.actualOptions = actualOptions; | ||||
|       this.initChart(this.options); | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||
|       console.log('actualOptions', this.options) | ||||
|       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; | ||||
|       this.actualOptions = actualOptions; | ||||
|       this.initChart(actualOptions); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
| @@ -255,7 +231,7 @@ export default { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|     // this.actualOptions = this.options | ||||
|     this.actualOptions = this.options | ||||
|     this.canvasReset(); | ||||
|     window.addEventListener("resize", this.canvasReset); | ||||
|   }, | ||||
| @@ -279,7 +255,7 @@ export default { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(this.$refs.ftoChart); | ||||
|       this.chart.setOption(this.options); | ||||
|       this.chart.setOption(this.actualOptions); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
|   | ||||
| @@ -1,218 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:43:51 | ||||
|  * @LastEditTime: 2024-07-19 16:11:59 | ||||
|  * @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; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|         #024798 20%, | ||||
|         transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|           transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 90%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 7%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right,transparent 60%, #024798 95%, transparent 97%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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,220 +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; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 10%, | ||||
|     #024798 20%, | ||||
|     transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 95%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     right: 1%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 60%, #024798 98%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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,47 +58,44 @@ export default { | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { 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: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { 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: `本周目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `去年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|           { label: `上周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `去年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           { label: `${lastMonth}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } else { | ||||
|         items = [ | ||||
|           { label: `${year}年目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年`, color: "#12f7f1" }, | ||||
|           { label: `${year}年`, color: "#58adfa" }, | ||||
|           { label:  `${year}年`, color: "#58adfa" }, | ||||
|  | ||||
|           // { label: `${year}年目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } | ||||
| @@ -144,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; | ||||
| @@ -161,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()); | ||||
| @@ -178,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] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -220,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 = [ | ||||
| @@ -237,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,47 +58,44 @@ export default { | ||||
|       const year = new Date().getFullYear(); | ||||
|       if (this.period === '日' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { 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: `${yesterday}日目标`, color: "#58adfa" }, | ||||
|           { 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: `本周目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年本周`, color: "#12f7f1" }, | ||||
|           { label: `去年本周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '周' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `本周目标`, color: "#58adfa" }, | ||||
|           { label: `上周`, color: "#12f7f1" }, | ||||
|           { label: `本周`, color: "#58adfa" }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '同比') { | ||||
|         items = [ | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `去年${month}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } else if (this.period === '月' && this.than === '环比') { | ||||
|         items = [ | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           { label: `${lastMonth}月`, color: "#12f7f1" }, | ||||
|           { label: `${month}月`, color: "#58adfa" }, | ||||
|           { label: `${month}月目标`, color: "#58adfa" }, | ||||
|           // { label: `${month}月目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } else { | ||||
|         items = [ | ||||
|           { label: `${year}年目标`, color: "#58adfa" }, | ||||
|           { label: `${year - 1}年`, color: "#12f7f1" }, | ||||
|           { label: `${year}年`, color: "#58adfa" }, | ||||
|           { label: `${year}年`, color: "#58adfa" }, | ||||
|  | ||||
|           // { label: `${year}年目标`, value: valueTuple[2] }, | ||||
|         ]; | ||||
|       } | ||||
| @@ -115,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; | ||||
| @@ -152,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()); | ||||
| @@ -169,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] : [], | ||||
|       }, | ||||
|       { | ||||
| @@ -211,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 = [ | ||||
| @@ -228,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-07-19 16:10:10 | ||||
|  * @LastEditTime: 2024-05-29 14:09:08 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -9,9 +9,9 @@ | ||||
|   <chart-container class="bar-chart-base"> | ||||
|     <div class="legend"> | ||||
|       <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> | ||||
|         :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, | ||||
|   }, | ||||
| @@ -62,42 +62,7 @@ export default { | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             console.log('params', params) | ||||
|             var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${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/>" + | ||||
|                 `${params[i].seriesType === "line" | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span> | ||||
|                 <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>` | ||||
|                   : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>` | ||||
|                 }` + | ||||
|                 `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|           }, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -108,23 +73,23 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/%", | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -142,7 +107,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -177,7 +142,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
| @@ -215,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, | ||||
|           }, | ||||
|         ], | ||||
| @@ -256,12 +221,12 @@ export default { | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       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 + '%' | ||||
| @@ -271,12 +236,12 @@ export default { | ||||
|       //   this.canvasReset() | ||||
|       // } | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       //   item.barWidth = val ? 18 : 12; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       this.initChart(this.options) | ||||
|       // 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.actualOptions) | ||||
|       this.canvasReset() | ||||
|     }, | ||||
|     series(val) { | ||||
| @@ -287,14 +252,14 @@ export default { | ||||
|       // console.log('val', val) | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)) | ||||
|       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() { | ||||
| @@ -303,12 +268,12 @@ export default { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     if (screenfull.isEnabled) { | ||||
|       screenfull.on("change", () => { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|     // this.actualOptions = this.options | ||||
|     // if (screenfull.isEnabled) { | ||||
|     //   screenfull.on("change", () => { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     this.actualOptions = this.options | ||||
|     this.canvasReset(); | ||||
|     window.addEventListener("resize", this.canvasReset); | ||||
|   }, | ||||
| @@ -331,14 +296,13 @@ export default { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(this.$refs.oeeChart); | ||||
|       this.chart.setOption(this.options); | ||||
|       this.chart.setOption(this.actualOptions); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .bar-chart-base { | ||||
|   // position: relative; | ||||
|  | ||||
| @@ -363,10 +327,7 @@ export default { | ||||
|       margin-right: 0.22vw; | ||||
|     } | ||||
|   } | ||||
|      .legend-item:nth-child(1) { | ||||
|        margin-left: 1vw; | ||||
|      } | ||||
|  .legend-item:nth-child(1):before { | ||||
|  .legend-item:nth-child(3):before { | ||||
|    // width: 12px; | ||||
|    // height: 2px; | ||||
|    width: 1vw; | ||||
| @@ -375,11 +336,11 @@ export default { | ||||
|    position: absolute; | ||||
|    top: 50%; | ||||
|    // left: -16px; | ||||
|    left: -1.3vw; | ||||
|    left: -0.951vw; | ||||
|    transform: translateY(-50%); | ||||
|  } | ||||
|  | ||||
|  .legend-item:nth-child(1):after { | ||||
|  .legend-item:nth-child(3):after { | ||||
|    background-color: #f3c000; | ||||
|    content: ""; | ||||
|    display: inline-block; | ||||
| @@ -390,15 +351,15 @@ export default { | ||||
|    height: 0.3191vw; | ||||
|    border-radius: 100%; | ||||
|    top: 50%; | ||||
|    left: -1.13vw; | ||||
|    left: -0.851vw; | ||||
|    // left: -16px; | ||||
|    transform: translateY(-50%) translateX(50%); | ||||
|  } | ||||
|   .legend-item:nth-child(2):before { | ||||
|   .legend-item:nth-child(1):before { | ||||
|     background-color: #12f7f1; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(3):before { | ||||
|   .legend-item:nth-child(2):before { | ||||
|     background-color: #58adfa; | ||||
|   } | ||||
| } | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-23 15:50:44 | ||||
|  * @LastEditTime: 2024-07-19 16:10:19 | ||||
|  * @LastEditTime: 2024-05-29 14:25:10 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -9,9 +9,9 @@ | ||||
|   <chart-container class="bar-chart-base"> | ||||
|     <div class="legend"> | ||||
|       <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> | ||||
|         :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, | ||||
|   }, | ||||
| @@ -62,42 +62,7 @@ export default { | ||||
|           top: "15%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             console.log('params', params) | ||||
|             var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${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/>" + | ||||
|                 `${params[i].seriesType === "line" | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span> | ||||
|                 <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>` | ||||
|                 : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>` | ||||
|                 }` + | ||||
|                 `<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|           }, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -108,23 +73,23 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/%", | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -142,7 +107,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -177,7 +142,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
| @@ -215,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, | ||||
|           }, | ||||
|         ], | ||||
| @@ -256,12 +221,12 @@ export default { | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       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 + '%' | ||||
| @@ -271,13 +236,13 @@ export default { | ||||
|       //   this.canvasReset() | ||||
|       // } | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       //   item.barWidth = val ? 18 : 12; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       this.initChart(this.options) | ||||
|       this.canvasReset() | ||||
|       // 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.actualOptions) | ||||
|       // this.canvasReset() | ||||
|     }, | ||||
|     series(val) { | ||||
|       if (!val) { | ||||
| @@ -285,15 +250,15 @@ export default { | ||||
|         return; | ||||
|       } | ||||
|       console.log(val) | ||||
|       // const actualOptions = JSON.parse(JSON.stringify(this.options)) | ||||
|       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 || ""; | ||||
|       // this.actualOptions = actualOptions; | ||||
|       this.initChart(this.options); | ||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)) | ||||
|       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(actualOptions); | ||||
|     }, | ||||
|   }, | ||||
|   mounted() { | ||||
| @@ -302,12 +267,12 @@ export default { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     if (screenfull.isEnabled) { | ||||
|       screenfull.on("change", () => { | ||||
|         this.isFullscreen = screenfull.isFullscreen; | ||||
|       }); | ||||
|     } | ||||
|     // this.actualOptions = this.options | ||||
|     // if (screenfull.isEnabled) { | ||||
|     //   screenfull.on("change", () => { | ||||
|     //     this.isFullscreen = screenfull.isFullscreen; | ||||
|     //   }); | ||||
|     // } | ||||
|     this.actualOptions = this.options | ||||
|     this.canvasReset(); | ||||
|     window.addEventListener("resize", this.canvasReset); | ||||
|   }, | ||||
| @@ -330,14 +295,13 @@ export default { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(this.$refs.oeeChart); | ||||
|       this.chart.setOption(this.options); | ||||
|       this.chart.setOption(this.actualOptions); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .bar-chart-base { | ||||
|   // position: relative; | ||||
|  | ||||
| @@ -362,43 +326,41 @@ export default { | ||||
|       margin-right: 0.22vw; | ||||
|     } | ||||
|   } | ||||
|  .legend-item:nth-child(1) { | ||||
|    margin-left: 1vw; | ||||
|  } | ||||
|   .legend-item:nth-child(2):before { | ||||
|  | ||||
|   .legend-item:nth-child(1):before { | ||||
|     background-color: #12f7f1; | ||||
|   } | ||||
|  | ||||
|   .legend-item:nth-child(3):before { | ||||
|   .legend-item:nth-child(2):before { | ||||
|     background-color: #58adfa; | ||||
|   } | ||||
|  .legend-item:nth-child(1):before { | ||||
|    // width: 12px; | ||||
|    // height: 2px; | ||||
|    width: 1vw; | ||||
|    height: 0.1064vw; | ||||
|    background-color: #f3c000; | ||||
|    position: absolute; | ||||
|    top: 50%; | ||||
|    // left: -16px; | ||||
|    left: -1.3vw; | ||||
|    transform: translateY(-50%); | ||||
|  } | ||||
|     .legend-item:nth-child(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(1):after { | ||||
|    background-color: #f3c000; | ||||
|    content: ""; | ||||
|    display: inline-block; | ||||
|    position: absolute; | ||||
|    // width: 6px; | ||||
|    // height: 6px; | ||||
|    width: 0.3191vw; | ||||
|    height: 0.3191vw; | ||||
|    border-radius: 100%; | ||||
|    top: 50%; | ||||
|    left: -1.13vw; | ||||
|    // left: -16px; | ||||
|    transform: translateY(-50%) translateX(50%); | ||||
|  } | ||||
|     .legend-item:nth-child(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%); | ||||
|     } | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -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,36 +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; | ||||
|     font-size: 16px; | ||||
|     // font-weight: 600; | ||||
|     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; | ||||
|       } | ||||
| @@ -338,41 +250,10 @@ 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; | ||||
|   } | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: DoubleRingChart.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 11:01:55 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -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 ? parseFloat(this.current).toFixed(2) + '%' : 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-07-09 15:04:24 | ||||
|  * @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}年目标` | ||||
|       } | ||||
|     }, | ||||
|   }, | ||||
| @@ -150,7 +137,7 @@ export default { | ||||
|   align-items: center; | ||||
|   gap: 8px; | ||||
|   flex: 1 1 auto; | ||||
|   padding: 16px; | ||||
|   padding: 12px; | ||||
| } | ||||
|  | ||||
| .std-rate-item__value { | ||||
|   | ||||
| @@ -1,130 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-27 09:12:54 | ||||
|  * @LastEditTime: 2024-07-09 15:02:46 | ||||
|  * @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 + '%' : parseFloat(this.previous).toFixed(2) + '%'; | ||||
|       // } 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,48 +1,39 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-07 10:04:53 | ||||
|  * @LastEditTime: 2024-07-09 15:16:43 | ||||
|  * @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/efficiencyRightContainer.vue"; | ||||
| import leftContainer from "@/views/copilot/components/efficiencyLeftContainer.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, | ||||
| @@ -97,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; | ||||
| @@ -132,4 +100,4 @@ export default { | ||||
| .efficiency-copilot > div { | ||||
|   height: 100%; | ||||
| } | ||||
| </style> --> | ||||
| </style> | ||||
|   | ||||
| @@ -1,184 +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: { | ||||
|     trigger: "item", | ||||
|     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', | ||||
|   }, | ||||
|   title: { | ||||
|     text: titleValue, | ||||
|     left: "48%", | ||||
|     top: "middle", | ||||
|     textAlign: "center", | ||||
|     textStyle: { | ||||
|       fontWeight: 600, | ||||
|       fontSize: 36, | ||||
|        color: "rgba(223,241,254,.8)", | ||||
| }) { | ||||
|   return { | ||||
|     grid: { | ||||
|       left: 0, | ||||
|       right: 0, | ||||
|       bottom: 0, | ||||
|       top: 0, | ||||
|       containLabel: true, | ||||
|     }, | ||||
|     subtext: `\u2002${yesterday + '日良率'}\u2002`, | ||||
|     subtextStyle: { | ||||
|       fontSize: 16, | ||||
|       fontWeight: 100, | ||||
|       color: "rgba(255,255,255,.7)", | ||||
|       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: { | ||||
|             backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter:` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|               <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span> | ||||
|               </div> | ||||
|               ` | ||||
|           }, | ||||
|           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: { | ||||
|            backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter:` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|               <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span> | ||||
|               </div> | ||||
|               ` | ||||
|           { | ||||
|             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: { | ||||
|            backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|             extraCssText: 'padding:0;border-width:0', | ||||
|             formatter:` | ||||
|                 <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|                   <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span> | ||||
|                 </div> | ||||
|                 ` | ||||
|           }, | ||||
|           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: { | ||||
|              backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|             extraCssText: 'padding:0;border-width:0', | ||||
|             formatter:` | ||||
|                 <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|                   <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span> | ||||
|                 </div> | ||||
|                 ` | ||||
|           }, | ||||
|           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,54 +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: "9%", | ||||
|           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)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: 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:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` + | ||||
|                 `<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value  : 0}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|             // return res; | ||||
|           }, | ||||
|         }, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
| @@ -100,40 +48,25 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             interval: 0,//设置横坐标为斜 | ||||
|             rotate:45, | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             // formatter: function (value) { | ||||
|             //   console.log(value); | ||||
|  | ||||
|             //   return value; | ||||
|             // }, | ||||
|             color: "rgba(255, 255, 255, 0.7)", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: [], | ||||
|         }, | ||||
|         // dataZoom: [ | ||||
|         //   { | ||||
|         //     // show: true, | ||||
|         //     start: 0, | ||||
|         //     end: 50 | ||||
|         //   } | ||||
|         //   ], | ||||
|         yAxis: { | ||||
|             type: "value", | ||||
|             name: "单位/片", | ||||
|             position: 'left', | ||||
|             nameTextStyle: { | ||||
|               color: "rgba(223,241,254,.8)", | ||||
|               fontSize: 16, | ||||
|               color: "rgba(255, 255, 255, 0.7)", | ||||
|               fontSize: 12, | ||||
|               align: "right", | ||||
|             }, | ||||
|             axisTick: { | ||||
|               show: false, | ||||
|             }, | ||||
|             axisLabel: { | ||||
|               color: "rgba(223,241,254,.8)", | ||||
|               fontSize:16, | ||||
|               color: "rgba(255, 255, 255, 0.7)", | ||||
|               fontSize: 12, | ||||
|             }, | ||||
|             axisLine: { | ||||
|               show: true, | ||||
| @@ -201,7 +134,7 @@ export default { | ||||
|             //     { offset: 1, color: "#12FFF5" + "00" }, | ||||
|             //   ]), | ||||
|             // }, | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -239,17 +172,14 @@ export default { | ||||
|     }, | ||||
|   }, | ||||
|   watch: { | ||||
|     type(val) { | ||||
|       this.initChart() | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     // isFullscreen(val) { | ||||
|     //   this.actualOptions.series.map((item) => { | ||||
|     //     item.barWidth = val ? 18 : 16; | ||||
|     //     item.barWidth = val ? 18 : 12; | ||||
|     //   }); | ||||
|     //   this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|     //   this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|     //   this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|     //   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) { | ||||
| @@ -267,9 +197,9 @@ export default { | ||||
|     //   this.actualOptions = actualOptions; | ||||
|     //   this.initOptions(actualOptions); | ||||
|     // }, | ||||
|     // energyCockpits() { | ||||
|     //   this.initChart(); | ||||
|     // }, | ||||
|     energyCockpits() { | ||||
|       this.initChart(); | ||||
|     }, | ||||
|     isOpen(val) { | ||||
|       this.canvasReset(); | ||||
|     }, | ||||
| @@ -298,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 = [ | ||||
|       //   { | ||||
| @@ -414,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-18 16:48:10 | ||||
|  * @LastEditTime: 2024-05-30 10:38:32 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -9,9 +9,9 @@ | ||||
|   <chart-container class="bar-chart-base"> | ||||
|     <div class="legend"> | ||||
|       <span v-for="(item,index) in legend" :key="index" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> | ||||
|         :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> | ||||
|  | ||||
| @@ -56,70 +56,13 @@ export default { | ||||
|       actualOptions: null, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "8%", | ||||
|           left: "5%", | ||||
|           right: "0%", | ||||
|           bottom: "3%", | ||||
|           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)", | ||||
|             }, | ||||
|           }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${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:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|             // return res; | ||||
|           }, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -130,25 +73,23 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           position: 'left', | ||||
|           name: "单位/%", | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: "right", | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -164,9 +105,9 @@ export default { | ||||
|         }, | ||||
|         series: [ | ||||
|           { | ||||
|             name: "FTO", // this.series[0].name, | ||||
|             name: "fto", // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -201,7 +142,7 @@ export default { | ||||
|           { | ||||
|             name: "", // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
| @@ -232,11 +173,32 @@ export default { | ||||
|           }, | ||||
|           { | ||||
|             name: "", // "2024年目标值", | ||||
|             type: "line", | ||||
|             barWidth: 16, | ||||
|             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, | ||||
|           }, | ||||
| @@ -259,12 +221,12 @@ export default { | ||||
|     }, | ||||
|     /** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | ||||
|     isFullscreen(val) { | ||||
|       this.options.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 16; | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       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 + '%' | ||||
| @@ -274,12 +236,12 @@ export default { | ||||
|       //   this.canvasReset() | ||||
|       // } | ||||
|       // this.actualOptions.series.map((item) => { | ||||
|       //   item.barWidth = val ? 18 : 16; | ||||
|       //   item.barWidth = val ? 18 : 12; | ||||
|       // }); | ||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       this.initChart(this.options) | ||||
|       // 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.actualOptions) | ||||
|       this.canvasReset() | ||||
|     }, | ||||
|     series(val) { | ||||
| @@ -289,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() { | ||||
| @@ -336,28 +297,27 @@ export default { | ||||
|         this.chart.dispose(); | ||||
|       } | ||||
|       this.chart = echarts.init(this.$refs.oeeChart); | ||||
|       this.chart.setOption(this.options); | ||||
|       this.chart.setOption(this.actualOptions); | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .bar-chart-base { | ||||
|   // position: relative; | ||||
|  | ||||
|   .legend { | ||||
|     position: absolute; | ||||
|     top: 3vh; | ||||
|     right: 13vw; | ||||
|     top: 5.2vh; | ||||
|     right: 1vw; | ||||
|   } | ||||
|  | ||||
|   .legend-item { | ||||
|     position: relative; | ||||
|     font-size: 1.2vw; | ||||
|     margin-right:1.2vw; | ||||
|     color: #DFF1FE; | ||||
|     // font-size: 12px; | ||||
|     margin-right: 1.3vw; | ||||
|  | ||||
|     &::before { | ||||
|       content: ""; | ||||
|       display: inline-block; | ||||
| @@ -368,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; | ||||
|   } | ||||
| @@ -378,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,22 +1,15 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:48:37 | ||||
|  * @LastEditTime: 2024-07-19 16:14:07 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 10:44:09 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
| 
 | ||||
| <template> | ||||
|   <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 | ||||
| @@ -99,8 +92,6 @@ export default { | ||||
| </script> | ||||
| 
 | ||||
| <style scoped lang="scss"> | ||||
| 
 | ||||
| 
 | ||||
| .copilot-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
| @@ -108,25 +99,23 @@ export default { | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 10%, | ||||
|           #024798 20%, | ||||
|           transparent 90%) 1; | ||||
|   backdrop-filter: blur(4px); | ||||
| 
 | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 92%; | ||||
|     height: 100%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     left: 0; | ||||
|     background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|           transparent); | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 30%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
| 
 | ||||
| @@ -137,7 +126,7 @@ export default { | ||||
|     width: 60%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 6%; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, #024798, transparent); | ||||
|     z-index: 0; | ||||
| @@ -152,7 +141,7 @@ export default { | ||||
|     gap: 8px; | ||||
| 
 | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
| @@ -172,8 +161,8 @@ export default { | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.7vw; | ||||
|       height: 0.7vw; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
| 
 | ||||
|   .corner.tl { | ||||
| @@ -1,15 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-03 15:38:31 | ||||
|  * @LastEditTime: 2024-07-09 16:49:22 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: ContainerIcon.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 16:41:36 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -56,8 +49,8 @@ export default { | ||||
| .container-icon { | ||||
|   //   width: 32px; | ||||
|   //   height: 32px; | ||||
|   width: 1.4vw; | ||||
|   height: 1.4vw; | ||||
|   width: 1.701vw; | ||||
|   height: 1.701vw; | ||||
|   background: #ccc2; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -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,1);font-size:16," 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)", | ||||
| @@ -40,19 +31,14 @@ export default { | ||||
|         evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)", | ||||
|         data: [], | ||||
|         rowNum: 12, | ||||
|         fontSize:16, | ||||
|         waitTime: 3000, | ||||
|         columnWidth: [150], | ||||
|         align: ["left"], | ||||
|         columnWidth: [100], | ||||
|         align: ["center"], | ||||
|         carousel: "page", | ||||
|       }, | ||||
|     }; | ||||
|   }, | ||||
|   props: { | ||||
|     type: { | ||||
|       type: String, | ||||
|       default: "目标产量", | ||||
|     }, | ||||
|     prodOrder: { | ||||
|       type: Array, | ||||
|       default: [], | ||||
| @@ -72,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(() => { | ||||
| @@ -100,39 +77,53 @@ export default { | ||||
|           let arr = []; | ||||
|           // arr.push(i + 1); | ||||
|           arr.push( | ||||
|             `<span title=${this.prodOrder[i].workOrderNumber || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${ | ||||
|             `<span title=${this.prodOrder[i].workOrderNumber || ""}>${ | ||||
|             this.prodOrder[i].workOrderNumber || "" | ||||
|             }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || "" | ||||
|               }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || "" | ||||
|               }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || "" | ||||
|               }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || "" | ||||
|               }</span>`, | ||||
|               `<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" | ||||
|               }</span>`, | ||||
|               `<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress | ||||
|                 ? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%" | ||||
|                 : "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(2) *100 * | ||||
|                 37.68 * | ||||
|                 0.01 + | ||||
|                 "," + | ||||
|                 (1 - | ||||
|                   this.prodOrder[i].productionProgress.toFixed(2) * 0.01) * 100 * | ||||
|                 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; | ||||
| @@ -189,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,14 +182,10 @@ export default { | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.makeData(); | ||||
|     this.$nextTick(() => { | ||||
|       let button = document.getElementsByClassName('button-than') | ||||
|       button[0].children[0].style.borderRadius = '4px 0 0 4px' | ||||
|       button[0].children[1].style.borderRadius = '0px 4px 4px 0' | ||||
|     }) | ||||
|   }, | ||||
|   methods: { | ||||
|     makeData() { | ||||
|       console.log('msgObj', this.msgObj); | ||||
|       this.msgObj.chip = {}; | ||||
|       this.msgObj.stand = {}; | ||||
|       this.msgObj.bipv = {}; | ||||
| @@ -246,19 +234,19 @@ export default { | ||||
|           // width: 5vw; | ||||
|           color: #FFFFFF; | ||||
|           line-height: 24px; | ||||
|           // text-align: left; | ||||
|           text-align: left; | ||||
|           font-style: normal; | ||||
|           display: inline-block; | ||||
|       } | ||||
|       // .line{ | ||||
|       //   flex: 1; | ||||
|       //   // width: 80%; | ||||
|       //   height: 1px;        // display: inline-block; | ||||
|       //   border: 1px solid; | ||||
|       //   // display: inline-block; | ||||
|       //   border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2; | ||||
|       //   backdrop-filter: blur(3px); | ||||
|       // } | ||||
|       .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-07-02 13:54:08 | ||||
|  * @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-07-18 16:16:24 | ||||
|  * @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: 14px; | ||||
|   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: 14px; | ||||
|   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,226 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-06-05 09:36:07 | ||||
|  * @LastEditTime: 2024-07-19 16:16:02 | ||||
|  * @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; | ||||
|   border-left: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom, transparent 2%, rgba(5, 138, 237, .7) 20%, rgba(2, 82, 215, 0.24) 70%, ) 71 71; | ||||
|   backdrop-filter: blur(4px); | ||||
|  | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 96%; | ||||
|     width: 0.11415vw; | ||||
|     border-radius: 2px; | ||||
|     top: 0%; | ||||
|     right: 0; | ||||
|     background: radial-gradient( | ||||
|       circle at center, | ||||
|       #024798 2%, | ||||
|       #024798 100%, | ||||
|       transparent | ||||
|     ); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 80%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     right: 4%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to right, transparent 10%, #024798 95%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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,220 +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 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: {}, | ||||
|   mounted() { | ||||
|  | ||||
|   }, | ||||
|   methods: {}, | ||||
| }; | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
|  | ||||
| .copilot-container { | ||||
|   height: 100%; | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|   border-right: 0.11415vw solid; | ||||
|   border-image: linear-gradient(to bottom,transparent 0%,rgba(5, 138, 237, .7) 40%, rgba(2, 82, 215, 0.24) 70%,) 71 71; | ||||
|   backdrop-filter: blur(4px); | ||||
|   &::before { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     height: 96%; | ||||
|       width: 0.11415vw; | ||||
|       border-radius: 2px; | ||||
|       top: 0%; | ||||
|       left: 0; | ||||
|       background: radial-gradient(circle at center, | ||||
|           #024798 2%, | ||||
|           #024798 100%, | ||||
|           transparent); | ||||
|     z-index: 1; | ||||
|   } | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 80%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 3%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, transparent 10%, #024798 95%, transparent 98%); | ||||
|     z-index: 0; | ||||
|   } | ||||
|  | ||||
|   .container-head { | ||||
|     // height: 40px; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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; | ||||
| @@ -88,7 +81,7 @@ export default { | ||||
|     updateThan(val) { | ||||
|       console.log(val); | ||||
|       this.than = val; | ||||
|       this.getMes() | ||||
|       // this.getMes(); | ||||
|     }, | ||||
|     updatePeriod(val) { | ||||
|       this.period = val; | ||||
| @@ -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 | ||||
|   | ||||
| @@ -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-07-19 16:05:46 | ||||
|  * @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,27 +151,21 @@ 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) | ||||
|       let titleSize = fontSize(0.35) | ||||
|       let subtitleSize = fontSize(0.14) | ||||
|  | ||||
|       // 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, | ||||
|         titleSize, | ||||
|         subtitleSize, | ||||
|         currentName: items[0].label, | ||||
|         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 , | ||||
|       }); | ||||
|     }, | ||||
|  | ||||
| @@ -209,37 +196,18 @@ export default { | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     formatNumber(num) { | ||||
|       // 判断是否为整数 | ||||
|       if (Number.isInteger(num)) { | ||||
|         return num; // 如果是整数,直接转换为字符串 | ||||
|       } else { | ||||
|         // 如果不是整数,保留两位小数并转换为字符串 | ||||
|         return num.toFixed(2); | ||||
|       } | ||||
|     } | ||||
|     // fullscreen mixin 需要的回调 | ||||
|     // fullscreenCallback(isFullscreen) { | ||||
|     //   console.log("isFullscreen--->", isFullscreen); | ||||
|     // }, | ||||
|   }, | ||||
| }; | ||||
| function fontSize(res){ | ||||
|   let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||||
|   if (!clientWidth) return; | ||||
|   let fontSize = 100 * (clientWidth / 1920); | ||||
|   return res * fontSize; | ||||
| } | ||||
| 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()); | ||||
| @@ -251,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] }, | ||||
|     ]; | ||||
|   } | ||||
| @@ -306,9 +270,8 @@ function calculateItems(period, valueTuple, than) { | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
|  | ||||
| .double-ring-chart { | ||||
|   height: 98%; | ||||
|   height: 100%; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
| } | ||||
| @@ -323,7 +286,7 @@ function calculateItems(period, valueTuple, than) { | ||||
| } | ||||
|  | ||||
| .double-ring-chart__legend { | ||||
|   /* padding: 12px; */ | ||||
|   padding: 12px; | ||||
|   color: #fff; | ||||
|   display: flex; | ||||
|   justify-content: center; | ||||
| @@ -332,7 +295,6 @@ function calculateItems(period, valueTuple, than) { | ||||
|  | ||||
| .legend-item { | ||||
|   display: flex; | ||||
|   /* font-size:16px; */ | ||||
|   flex-direction: column; | ||||
|   align-items: flex-start; | ||||
| } | ||||
| @@ -352,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-07-09 09:09:07 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
|     filename: DoubleRingWrapper.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-17 09:55:12 | ||||
|     description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="double-ring-wrapper"> | ||||
|     <template> | ||||
| @@ -42,14 +42,13 @@ export default { | ||||
|     return { | ||||
|       factoryId: 4, // 默认成都 | ||||
|       cityOptions: [ | ||||
|         "瑞昌", | ||||
|         // "成都", | ||||
|         "成都", | ||||
|         "邯郸", | ||||
|         // "株洲", | ||||
|  | ||||
|         // "佳木斯", | ||||
|         // "凯盛光伏", | ||||
|         // "蚌埠兴科", | ||||
|         "株洲", | ||||
|         "瑞昌", | ||||
|         "佳木斯", | ||||
|         "凯盛光伏", | ||||
|         "蚌埠兴科", | ||||
|       ], | ||||
|     }; | ||||
|   }, | ||||
| @@ -64,7 +63,7 @@ export default { | ||||
| <style scoped lang="scss"> | ||||
| .double-ring-wrapper { | ||||
|   height: 100%; | ||||
|   padding: 0px 24px; | ||||
|   padding: 12px 24px; | ||||
|   display: flex; | ||||
|   gap: 12px; | ||||
|   flex-direction: column; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-24 15:15:00 | ||||
|  * @LastEditTime: 2024-07-09 09:27:12 | ||||
|  * @LastEditTime: 2024-05-28 08:42:36 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -54,12 +54,12 @@ export default { | ||||
|     return { | ||||
|       factoryId: 4, // 默认成都 | ||||
|       cityOptions: [ | ||||
|         // "成都", | ||||
|         "成都", | ||||
|         "邯郸", | ||||
|         // "株洲", | ||||
|         // "佳木斯", | ||||
|         // "凯盛光伏", | ||||
|         // "蚌埠兴科", | ||||
|         "株洲", | ||||
|         "佳木斯", | ||||
|         "凯盛光伏", | ||||
|         "蚌埠兴科", | ||||
|       ], | ||||
|     }; | ||||
|   }, | ||||
| @@ -74,7 +74,7 @@ export default { | ||||
| <style scoped lang="scss"> | ||||
| .double-ring-wrapper { | ||||
|   height: 100%; | ||||
|   padding: 0px 24px; | ||||
|   padding: 12px 24px; | ||||
|   display: flex; | ||||
|   gap: 12px; | ||||
|   flex-direction: column; | ||||
|   | ||||
| @@ -1,7 +1,7 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-05-10 11:10:54 | ||||
|  * @LastEditTime: 2024-07-09 15:09:27 | ||||
|  * @LastEditTime: 2024-05-28 13:36:07 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| @@ -9,33 +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"> | ||||
|       <bottom-right-container class="fto-involve" title="FTO投入"> | ||||
|       <db-container class="fto-involve" title="FTO投入"> | ||||
|         <fto-invest :period="period" :than="than" /> | ||||
|       </bottom-right-container> | ||||
|       <bottom-left-container class="chip-involve" title="芯片投入" icon="chip"> | ||||
|       </db-container> | ||||
|       <db-container class="chip-involve" title="芯片投入" icon="chip"> | ||||
|         <chip-invest :period="period" :than="than" /> | ||||
|         </bottom-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 bottomRightContainer from "@/views/copilot/components/bottomRightContainer.vue"; | ||||
| import bottomLeftContainer from "@/views/copilot/components/bottomLeftContainer.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"; | ||||
| @@ -45,11 +41,7 @@ import ChipInvest from "./components/ChipInvest.vue"; | ||||
| export default { | ||||
|   name: "YieldCopilot", | ||||
|   components: { | ||||
|     DbContainer: twoContainer, | ||||
|     bottomRightContainer, | ||||
|     bottomLeftContainer, | ||||
|     leftContainer, | ||||
|     rightContainer, | ||||
|     DbContainer: Container, | ||||
|     StdOutput, | ||||
|     ChipOutput, | ||||
|     BipvOutput, | ||||
|   | ||||
| @@ -3,8 +3,6 @@ export default ({ | ||||
|   subtitle, | ||||
|   previousSum, | ||||
|   currentSum, | ||||
|   subtitleSize, | ||||
|   titleSize, | ||||
|   targetSum, | ||||
|   currentName, | ||||
|   preName, | ||||
| @@ -16,29 +14,22 @@ export default ({ | ||||
|     top: 0, | ||||
|     containLabel: true, | ||||
|   }, | ||||
|   tooltip: { | ||||
|     trigger: "item", | ||||
|     // 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', | ||||
|   }, | ||||
|   tooltip: {}, | ||||
|   title: { | ||||
|     text: titleValue, | ||||
|     left: "48.5%", | ||||
|     top: "middle", | ||||
|     itemGap: 12, | ||||
|     textVerticalAlign:'auto', | ||||
|     left: "44%", | ||||
|     top: "37%", | ||||
|     textAlign: "center", | ||||
|     textStyle: { | ||||
|       fontWeight: 400, | ||||
|       fontSize: titleSize, | ||||
|       color: "rgba(223,241,254,.8)", | ||||
|       fontWeight: 600, | ||||
|       fontSize: 32, | ||||
|       color: "#fffd", | ||||
|     }, | ||||
|     subtext: `\u2002${subtitle}\u2002`, | ||||
|     subtextStyle: { | ||||
|       fontSize: subtitleSize, | ||||
|       fontSize: 14, | ||||
|       fontWeight: 100, | ||||
|       color: "rgba(255,255,255,.7)", | ||||
|       color: "#fffd", | ||||
|       align: "right", | ||||
|     }, | ||||
|   }, | ||||
| @@ -47,8 +38,8 @@ export default ({ | ||||
|     { | ||||
|       type: "pie", | ||||
|       name: "当前目标", | ||||
|       radius: ["74%", "86%"], | ||||
|       center: ["50%", "48%"], | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["45%", "52%"], | ||||
|       emptyCircleStyle: { | ||||
|         color: "#042c5f33", | ||||
|       }, | ||||
| @@ -56,8 +47,8 @@ export default ({ | ||||
|     // 数据 series | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["74%", "86%"], | ||||
|       center: ["50%", "48%"], | ||||
|       radius: ["70%", "85%"], | ||||
|       center: ["45%", "52%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
| @@ -70,17 +61,6 @@ export default ({ | ||||
|           value: currentSum, | ||||
|           name: currentName, | ||||
|           selected: false, | ||||
|           tooltip: { | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter:` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|               <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span> | ||||
|               </div> | ||||
|               ` | ||||
|           }, | ||||
|           itemStyle: { | ||||
|             borderJoin: "round", | ||||
|             borderCap: "round", | ||||
| @@ -100,19 +80,16 @@ export default ({ | ||||
|           }, | ||||
|         }, | ||||
|         { | ||||
|           value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), | ||||
|           name: currentName, | ||||
|            tooltip: { | ||||
|               backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|             extraCssText: 'padding:0;border-width:0', | ||||
|             formatter:` | ||||
|                 <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|                   <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span> | ||||
|                 </div> | ||||
|                 ` | ||||
|           }, | ||||
|           value: | ||||
|             targetSum > currentSum | ||||
|               ? targetSum - currentSum | ||||
|               : targetSum == 0 | ||||
|               ? currentSum == 0 | ||||
|                 ? 1 | ||||
|                 : 0 | ||||
|               : 0, | ||||
|  | ||||
|           name: "未达成累计", | ||||
|           itemStyle: { color: "transparent" }, | ||||
|           label: { show: false }, | ||||
|         }, | ||||
| @@ -121,8 +98,8 @@ export default ({ | ||||
|     // 数据 series2 - 2023累计 | ||||
|     { | ||||
|       type: "pie", | ||||
|       radius: ["61%", "74%"], | ||||
|       center: ["50%", "48%"], | ||||
|       radius: ["55%", "70%"], | ||||
|       center: ["45%", "52%"], | ||||
|       avoidLabelOvervlap: false, | ||||
|       label: { | ||||
|         show: false, | ||||
| @@ -135,17 +112,6 @@ export default ({ | ||||
|           value: previousSum, | ||||
|           name: preName, | ||||
|           selected: false, | ||||
|           tooltip: { | ||||
|             backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|             extraCssText: 'padding:0;border-width:0', | ||||
|             formatter:` | ||||
|                 <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|                   <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span> | ||||
|                 </div> | ||||
|                 ` | ||||
|           }, | ||||
|           itemStyle: { | ||||
|             borderJoin: "round", | ||||
|             borderCap: "round", | ||||
| @@ -165,20 +131,13 @@ export default ({ | ||||
|           }, | ||||
|         }, | ||||
|         { | ||||
|  | ||||
|           value:previousSum === 0 ? 1 : 0, | ||||
|           name: preName, | ||||
|           tooltip: { | ||||
|             backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|             extraCssText: 'padding:0;border-width:0', | ||||
|             formatter:` | ||||
|                 <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                   <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|                   <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span> | ||||
|                    <span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span> | ||||
|                 </div> | ||||
|                 ` | ||||
|           }, | ||||
|           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; | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: ChipYield.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-11 10:46:47 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -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,15 +1,8 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-07-18 16:37:41 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: ChipYield.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-11 10:46:47 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -53,17 +46,7 @@ export default { | ||||
|           top: 0, | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "item", | ||||
|           // axisPointer: { | ||||
|           //   // type: "cross", | ||||
|           //   crossStyle: { | ||||
|           //     color: "rgba(237,237,237,0.5)", | ||||
|           //   }, | ||||
|           // }, | ||||
|           backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         title: { | ||||
|           text: "0%", | ||||
|           left: "48%", | ||||
| @@ -76,7 +59,7 @@ export default { | ||||
|           }, | ||||
|           subtext: `\u2002${year}年累计产出\u2002`, | ||||
|           subtextStyle: { | ||||
|             fontSize: 15, | ||||
|             fontSize: 12, | ||||
|             fontWeight: 100, | ||||
|             color: "#fffd", | ||||
|             align: "right", | ||||
| @@ -108,11 +91,9 @@ export default { | ||||
|             }, | ||||
|             data: [ | ||||
|               { | ||||
|                 value: 0, | ||||
|                 value: 90, | ||||
|                 name: `${year}累计产出`, | ||||
|                 selected: false, | ||||
|                 tooltip: { | ||||
|                 }, | ||||
|                 itemStyle: { | ||||
|                   borderJoin: "round", | ||||
|                   borderCap: "round", | ||||
| @@ -132,10 +113,8 @@ export default { | ||||
|                 }, | ||||
|               }, | ||||
|               { | ||||
|                 value: 0, | ||||
|                 name: `${year}目标`, | ||||
|                 tooltip: { | ||||
|                 }, | ||||
|                 value: 20, | ||||
|                 name: "-", | ||||
|                 itemStyle: { color: "transparent" }, | ||||
|                 label: { show: false }, | ||||
|               }, | ||||
| @@ -155,22 +134,9 @@ export default { | ||||
|             }, | ||||
|             data: [ | ||||
|               { | ||||
|                 value: 0, | ||||
|                 value: 90, | ||||
|                 name: `${year - 1}累计产出`, | ||||
|                 selected: false, | ||||
|                 tooltip: { | ||||
|                   trigger: "item", | ||||
|                   // axisPointer: { | ||||
|                   //   // type: "cross", | ||||
|                   //   crossStyle: { | ||||
|                   //     color: "rgba(237,237,237,0.5)", | ||||
|                   //   }, | ||||
|                   // }, | ||||
|                   backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|                   extraCssText: 'padding:0;border-width:0', | ||||
|                   formatter: params => { | ||||
|                   }, | ||||
|                 }, | ||||
|                 itemStyle: { | ||||
|                   borderJoin: "round", | ||||
|                   borderCap: "round", | ||||
| @@ -191,18 +157,7 @@ export default { | ||||
|               }, | ||||
|               { | ||||
|                 value: 0, | ||||
|                 name: `${year - 1}累计产出`, | ||||
|                 tooltip: { | ||||
|                   trigger: "item", | ||||
|                   // axisPointer: { | ||||
|                   //   // type: "cross", | ||||
|                   //   crossStyle: { | ||||
|                   //     color: "rgba(237,237,237,0.5)", | ||||
|                   //   }, | ||||
|                   // }, | ||||
|                   backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|                   extraCssText: 'padding:0;border-width:0', | ||||
|                 }, | ||||
|                 name: "-", | ||||
|                 itemStyle: { color: "transparent" }, | ||||
|                 label: { show: false }, | ||||
|               }, | ||||
| @@ -247,84 +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 = this.options | ||||
|       // console.log('options', options); | ||||
|       const options = JSON.parse(JSON.stringify(this.options)); | ||||
|       // 标题 | ||||
|       if (!this.output.target && !this.output.current) options.title.text = "0%"; | ||||
|       else if (!this.output.target && this.output.current) options.title.text = "100%"; | ||||
|       else options.title.text = | ||||
|         ((this.output.current / this.output.target).toFixed(2)) * 100 + "%"; | ||||
|       if (!this.output.target) options.title.text = "0%"; | ||||
|       else | ||||
|         options.title.text = | ||||
|           (this.output.current / this.output.target) * 100 + "%"; | ||||
|       // 外环 | ||||
|       if ( | ||||
|         this.output.current == this.output.target && | ||||
|         this.output.current == 0 | ||||
|       ) { | ||||
|         this.options.series[1].data[0].value = 0; | ||||
|         this.options.series[1].data[1].value = 1; | ||||
|         this.options.series[1].data[0].tooltip.formatter = | ||||
|           `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|               <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span> | ||||
|              <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span> | ||||
|               </div>`; | ||||
|         this.options.series[1].data[1].tooltip.formatter = | ||||
|             `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|               <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span> | ||||
|                 <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0 }</span> | ||||
|               </div>`; | ||||
|         options.series[1].data[0].value = 0; | ||||
|         options.series[1].data[1].value = 100; | ||||
|       } else { | ||||
|         this.options.series[1].data[0].value = this.output.current; | ||||
|         this.options.series[1].data[1].value = | ||||
|         options.series[1].data[0].value = this.output.current; | ||||
|         options.series[1].data[1].value = | ||||
|           this.output.target - this.output.current; | ||||
|         this.options.series[1].data[0].tooltip.formatter = | ||||
|           `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|            <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span> | ||||
|            <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span> | ||||
|               </div>`; | ||||
|         this.options.series[1].data[1].tooltip.formatter = | ||||
|           `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span> | ||||
|             <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span> | ||||
|             <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span> | ||||
|               </div>`; | ||||
|       } | ||||
|       // 内环 | ||||
|       if (this.output.previous == 0) { | ||||
|         this.options.series[2].data[0].value = 0; | ||||
|         this.options.series[2].data[1].value = 1; | ||||
|         this.options.series[2].data[0].tooltip.formatter = | ||||
|           `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|             <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> | ||||
|             <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span> | ||||
|               </div>`; | ||||
|         this.options.series[2].data[1].tooltip.formatter = | ||||
|           `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|          <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> | ||||
|           <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span> | ||||
|               </div>`; | ||||
|         options.series[2].data[0].value = 0; | ||||
|         options.series[2].data[1].value = 100; | ||||
|       } else { | ||||
|         this.options.series[2].data[0].value = this.output.previous; | ||||
|         this.options.series[2].data[1].value = 0; | ||||
|         this.options.series[2].data[0].tooltip.formatter = | ||||
|           `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|       <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> | ||||
|         <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span> | ||||
|               </div>`; | ||||
|         this.options.series[2].data[1].tooltip.formatter = | ||||
|           `<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|           <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> | ||||
|               <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> + | ||||
|               <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span> | ||||
|               </div>`; | ||||
|         options.series[2].data[0].value = this.output.previous; | ||||
|         options.series[2].data[1].value = 0; | ||||
|       } | ||||
|       console.log('options', options); | ||||
|       return options; | ||||
|     }, | ||||
|   }, | ||||
| @@ -340,9 +243,6 @@ export default { | ||||
|     factory(val) { | ||||
|       this.initOptions(this.actualOptions); | ||||
|     }, | ||||
|     actualOptions() { | ||||
|       this.initOptions(this.actualOptions); | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     console.log("mounted", this.actualOptions); | ||||
|   | ||||
| @@ -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" }, | ||||
|   | ||||
| @@ -1,17 +1,26 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: left-chart-base | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <chart-container class="left-chart-base"> | ||||
|     <div class="legend"> | ||||
|       <span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> | ||||
|       <span | ||||
|         v-for="item in legend" | ||||
|         :key="item.label" | ||||
|         class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | ||||
|         >{{ item.label }}</span | ||||
|       > | ||||
|     </div> | ||||
|     <div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div> | ||||
|     <div | ||||
|       ref="chart" | ||||
|       style="max-width: 22vw" | ||||
|       :style="{ height: vHeight + 'vh' }" | ||||
|     ></div> | ||||
|   </chart-container> | ||||
| </template> | ||||
|  | ||||
| @@ -50,46 +59,14 @@ 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: 'rgba(0,0,0,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             console.log('params', params) | ||||
|             var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${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;border-radius:2px;width:12px;height:12px;background-color:${color}'></span>` + | ||||
|                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` + | ||||
|                 `<span style='width:60px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value: 0}</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|             // return res; | ||||
|           }, | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           type:'category', | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
| @@ -99,27 +76,23 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             textStyle: { | ||||
|               color: "rgba(223,241,254,.8)", | ||||
|               fontSize: 16, | ||||
|             }, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           // position:'left', | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align:'right' | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -137,16 +110,7 @@ export default { | ||||
|           { | ||||
|             name: '', // this.series[0].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             label: { | ||||
|               show: true, //开启显示 | ||||
|               align: 'right', //在上方显示 | ||||
|               position: 'top', //在上方显示 | ||||
|               textStyle: { //数值样式 | ||||
|                 color: "rgba(223,241,254,.8)", | ||||
|                 fontSize: 14 | ||||
|               } | ||||
|             }, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -181,21 +145,14 @@ export default { | ||||
|           { | ||||
|             name: '', // this.series[1].name, | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             label: { | ||||
|               show: true, //开启显示 | ||||
|               align: 'left', //在上方显示 | ||||
|               position: 'top', //在上方显示 | ||||
|               textStyle: { //数值样式 | ||||
|                 color: "rgba(223,241,254,.8)", | ||||
|                 fontSize: 16 | ||||
|               } | ||||
|             }, | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
|             //   }, | ||||
|             // }, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               // normal: { | ||||
|  | ||||
|               // }, | ||||
|               color: { | ||||
|                 type: "linear", | ||||
|                 x: 0, | ||||
| @@ -227,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) { | ||||
| @@ -260,25 +217,9 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .echarts-tooltip{ | ||||
|   background: #001829; | ||||
|   // background-color: ; | ||||
|     box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); | ||||
|     opacity: 0.6; | ||||
|     border-radius: 4px; | ||||
|     .content { | ||||
|         content: ""; | ||||
|         position: absolute; | ||||
|         top: 0; | ||||
|         left: 0; | ||||
|         bottom: 0; | ||||
|         right: 0; | ||||
|         backdrop-filter: blur(6px); | ||||
|         // transition: .3s transform; | ||||
|       } | ||||
| } | ||||
|  | ||||
| .left-chart-base { | ||||
|   // position: relative; | ||||
|  | ||||
|   .legend { | ||||
|     position: absolute; | ||||
|     top: 5.2vh; | ||||
|   | ||||
| @@ -1,24 +1,26 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-04-28 13:42:51 | ||||
|  * @LastEditTime: 2024-07-19 15:25:37 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: right-chart-base | ||||
|     author: liubin | ||||
|     date: 2024-04-10 08:59:28 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <chart-container class="right-chart-base"> | ||||
|     <div class="legend"> | ||||
|       <span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> | ||||
|       <span | ||||
|         v-for="item in legend" | ||||
|         :key="item.label" | ||||
|         class="legend-item" | ||||
|         :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }" | ||||
|         >{{ item.label }}</span | ||||
|       > | ||||
|     </div> | ||||
|     <div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div> | ||||
|     <div | ||||
|       ref="chart" | ||||
|       style="max-width: 22vw" | ||||
|       :style="{ height: vHeight + 'vh' }" | ||||
|     ></div> | ||||
|   </chart-container> | ||||
| </template> | ||||
|  | ||||
| @@ -56,50 +58,13 @@ export default { | ||||
|       isFullscreen: false, | ||||
|       options: { | ||||
|         grid: { | ||||
|           left: "6%", | ||||
|           left: "3%", | ||||
|           right: "4%", | ||||
|           bottom: "0", | ||||
|           top: "18%", | ||||
|           containLabel: true, | ||||
|         }, | ||||
|         tooltip: { | ||||
|           trigger: "axis", | ||||
|           axisPointer: { | ||||
|             // type: "cross", | ||||
|             crossStyle: { | ||||
|               color: "rgba(237,237,237,0.5)", | ||||
|             }, | ||||
|           }, | ||||
|           confine:true, | ||||
|           backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色,手动置为透明 | ||||
|           extraCssText: 'padding:0;border-width:0', | ||||
|           formatter: params => { | ||||
|             console.log('params', params) | ||||
|             var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${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/>" + | ||||
|               `${params[i].seriesType === "line" | ||||
|                 ? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span> | ||||
|                 <span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>` | ||||
|                 : `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span> | ||||
|                 <span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` | ||||
|               }` + | ||||
|                 `<span style='width:180px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`; | ||||
|             } | ||||
|             const htmlContent = ` | ||||
|               <div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);"> | ||||
|                 ${res} | ||||
|               </div> | ||||
|               `; | ||||
|  | ||||
|             return htmlContent; | ||||
|           }, | ||||
|  | ||||
|         }, | ||||
|         tooltip: {}, | ||||
|         xAxis: { | ||||
|           axisTick: { | ||||
|             show: false, | ||||
| @@ -110,25 +75,23 @@ export default { | ||||
|             }, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           data: this.xAxis, | ||||
|         }, | ||||
|         yAxis: { | ||||
|           name: "单位/片", | ||||
|           // position: 'left', | ||||
|           nameTextStyle: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             align: 'right' | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisTick: { | ||||
|             show: false, | ||||
|           }, | ||||
|           axisLabel: { | ||||
|             color: "rgba(223,241,254,.8)", | ||||
|             fontSize: 16, | ||||
|             color: "#fff", | ||||
|             fontSize: 12, | ||||
|           }, | ||||
|           axisLine: { | ||||
|             show: true, | ||||
| @@ -152,36 +115,36 @@ 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, | ||||
|           }, | ||||
|           { | ||||
|             name: "", // "2023年", | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             itemStyle: { | ||||
|               borderRadius: [10, 10, 0, 0], | ||||
|               color: { | ||||
| @@ -216,7 +179,7 @@ export default { | ||||
|           { | ||||
|             name: "", // "2024年", | ||||
|             type: "bar", | ||||
|             barWidth: 16, | ||||
|             barWidth: 12, | ||||
|             // tooltip: { | ||||
|             //   valueFormatter: function (value) { | ||||
|             //     return value + " ml"; | ||||
| @@ -256,9 +219,9 @@ export default { | ||||
|       this.actualOptions.series.map((item) => { | ||||
|         item.barWidth = val ? 18 : 12; | ||||
|       }); | ||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; | ||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; | ||||
|       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) { | ||||
| @@ -321,13 +284,13 @@ export default { | ||||
|   .legend-item:nth-child(1):before { | ||||
|     // width: 12px; | ||||
|     // height: 2px; | ||||
|     width: 1vw; | ||||
|     width: 0.638vw; | ||||
|     height: 0.1064vw; | ||||
|     background-color: #f3c000; | ||||
|     position: absolute; | ||||
|     top: 50%; | ||||
|     // left: -16px; | ||||
|     left: -1.2vw; | ||||
|     left: -0.851vw; | ||||
|     transform: translateY(-50%); | ||||
|   } | ||||
|   .legend-item:nth-child(1):after { | ||||
| @@ -337,11 +300,11 @@ export default { | ||||
|     position: absolute; | ||||
|     // width: 6px; | ||||
|     // height: 6px; | ||||
|     width: 0.4vw; | ||||
|     height: 0.4vw; | ||||
|     width: 0.3191vw; | ||||
|     height: 0.3191vw; | ||||
|     border-radius: 100%; | ||||
|     top: 50%; | ||||
|     left: -1.1vw; | ||||
|     left: -0.851vw; | ||||
|     // left: -16px; | ||||
|     transform: translateY(-50%) translateX(50%); | ||||
|   } | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: Bipv.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-10 15:39:54 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -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%); | ||||
|   // 在这里设置一个总的字体大小 不失为一个好的选择 | ||||
| @@ -92,12 +92,11 @@ export default { | ||||
| } | ||||
|  | ||||
| h2 { | ||||
|   // padding: 0 1vw; | ||||
|   padding: 0 1vw; | ||||
|   margin: 6px 0; | ||||
|   font-family: 优设标题黑; | ||||
|   color: #fff; | ||||
|   letter-spacing:4px; | ||||
|   text-align: left; | ||||
|   letter-spacing:5px; | ||||
|   // font-size: 24px; | ||||
|   font-size: 1.276em; | ||||
| } | ||||
| @@ -116,7 +115,7 @@ ul { | ||||
| } | ||||
|  | ||||
| li { | ||||
|   font-size: 0.77em; | ||||
|   font-size: 0.851em; | ||||
| } | ||||
|  | ||||
| .corner { | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: Container.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 10:44:09 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -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 | ||||
| @@ -82,7 +82,6 @@ export default { | ||||
| </script> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
|  | ||||
| .dashboard-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
| @@ -91,29 +90,29 @@ export default { | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 85%; | ||||
|     height: 0.31415vh; | ||||
|     border-radius: 2px; | ||||
|     left: 8%; | ||||
|     bottom: 0; | ||||
|     background: linear-gradient(to left, #024798, transparent); | ||||
|     z-index: 0; | ||||
|   } | ||||
|   // &::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:4vh; | ||||
|     height: 3.8vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       font-size: 1.18vw; | ||||
|       line-height: 1.39vw; | ||||
|       font-weight: normal; | ||||
|       letter-spacing: 2px; | ||||
| @@ -133,8 +132,8 @@ export default { | ||||
|     position: absolute; | ||||
|     // width: 16px; | ||||
|     // height: 16px; | ||||
|     width: 0.7vw; | ||||
|     height: 0.7vw; | ||||
|     width: 0.95vw; | ||||
|     height: 0.95vw; | ||||
|   } | ||||
|  | ||||
|   .corner.tl { | ||||
|   | ||||
| @@ -1,8 +1,8 @@ | ||||
| <!-- | ||||
| <!--  | ||||
|     filename: ContainerIcon.vue | ||||
|     author: liubin | ||||
|     date: 2024-04-09 16:41:36 | ||||
|     description: | ||||
|     description:  | ||||
| --> | ||||
|  | ||||
| <template> | ||||
| @@ -51,8 +51,8 @@ export default { | ||||
| .container-icon { | ||||
|   //   width: 32px; | ||||
|   //   height: 32px; | ||||
|   width: 1.4vw; | ||||
|   height: 1.4vw; | ||||
|   width: 1.701vw; | ||||
|   height: 1.701vw; | ||||
|   background: #ccc2; | ||||
| } | ||||
| </style> | ||||
|   | ||||
| @@ -153,7 +153,7 @@ h1 { | ||||
|  | ||||
| .side { | ||||
|   position: absolute; | ||||
|   font-size: 1vw; | ||||
|   font-size: 1.18vw; | ||||
|   // line-height: 24px; | ||||
|   line-height: 1.277vw; | ||||
|   letter-spacing: 2px; | ||||
|   | ||||
| @@ -1,204 +0,0 @@ | ||||
| <!-- | ||||
|  * @Author: zhp | ||||
|  * @Date: 2024-07-08 13:51:30 | ||||
|  * @LastEditTime: 2024-07-19 10:43:18 | ||||
|  * @LastEditors: zhp | ||||
|  * @Description: | ||||
| --> | ||||
|  | ||||
| <template> | ||||
|   <div class="dashboard-container"> | ||||
|     <!-- refresh btn  --> | ||||
|     <button | ||||
|       v-if="0" | ||||
|       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 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> | ||||
|       <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"> | ||||
| .dashboard-container { | ||||
|   height: 0; | ||||
|   flex: 1; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   position: relative; | ||||
|   box-shadow: inset 0 0 20px 1px #fff1; | ||||
|  | ||||
|   &::after { | ||||
|     content: ""; | ||||
|     position: absolute; | ||||
|     display: inline-block; | ||||
|     width: 85%; | ||||
|     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:4vh; | ||||
|     padding: 8px; | ||||
|     display: flex; | ||||
|     align-items: center; | ||||
|     gap: 8px; | ||||
|  | ||||
|     .container-title { | ||||
|       font-size: 1vw; | ||||
|       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.7vw; | ||||
|     height: 0.7vw; | ||||
|   } | ||||
|  | ||||
|   .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; | ||||
|     border-left: 0.532vw solid transparent; | ||||
|     border-bottom: 0.532vw solid #0175dc; | ||||
|     border-top: 0.532vw solid transparent; | ||||
|     border-right: 0.532vw solid #0175dc; | ||||
|   } | ||||
|  | ||||
|   .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,28 +1,28 @@ | ||||
| <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"> | ||||
|           <div class="db-left"> | ||||
|             <left-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())"> | ||||
|             <db-container icon="cube" title="FTO投入" @refresh="() => (ftoKey = Math.random())"> | ||||
|               <fto-chart :key="ftoKey" /> | ||||
|             </left-container> | ||||
|             <left-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())"> | ||||
|             </db-container> | ||||
|             <db-container icon="chip2" title="芯片投入" @refresh="() => (chipInvestKey = Math.random())"> | ||||
|               <chip-invest-chart :key="chipInvestKey" /> | ||||
|             </left-container> | ||||
|             </db-container> | ||||
|           </div> | ||||
|           <div class="db-right"> | ||||
|             <db-container side="right" icon="chip" title="芯片产出" @refresh="() => (chipYieldKey = Math.random())"> | ||||
| @@ -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> | ||||
|  | ||||
| @@ -53,7 +53,6 @@ import store from "@/store"; | ||||
| import DashboardHeader from "./dashboard/components/Header.vue"; | ||||
| import CompanyInfo from "./dashboard/components/CompanyInfo.vue"; | ||||
| import Container from "./dashboard/components/Container.vue"; | ||||
| import leftContainer from "./dashboard/components/leftContainer.vue"; | ||||
| import FtoChart from "./dashboard/charts/Fto.vue"; | ||||
| import ChipInvestChart from "./dashboard/charts/ChipInvest.vue"; | ||||
| import BipvChart from "./dashboard/charts/Bipv.vue"; | ||||
| @@ -62,30 +61,25 @@ 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: 51,lx:61,ly:61.5,ltx:69.3,lty:51.4, 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: 48.5, 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: { | ||||
|     CompanyInfo, | ||||
|     leftContainer, | ||||
|     ksCompanyInfo: CompanyInfo, | ||||
|     hdCompanyInfo: CompanyInfo, | ||||
|     bbCompanyInfo: CompanyInfo, | ||||
| @@ -219,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]; | ||||
| @@ -271,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]; | ||||
| @@ -342,7 +314,7 @@ export default { | ||||
|   .db-left, | ||||
|   .db-right { | ||||
|     // width: 420px; | ||||
|     width: 24.5vw; | ||||
|     width: 24vw; | ||||
|     padding: 20px; | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
| @@ -376,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; | ||||
|   | ||||