1 Commits

128 changed files with 10456 additions and 25745 deletions

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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",

View File

@@ -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'
})
}

View File

@@ -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'
})
}

View File

@@ -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
})
}

View File

@@ -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',
})
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 7.6 MiB

View File

@@ -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

View File

@@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 6.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 MiB

BIN
src/assets/logo/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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,
});

View File

@@ -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,
}
}
}

View File

@@ -163,4 +163,4 @@ textarea {
.el-upload__tip {
line-height: 1.2;
}
}

View File

@@ -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
}
]
/**
* 代码生成模板类型
*/

View File

@@ -62,32 +62,7 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
@@ -108,7 +83,6 @@ export default {
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "right",
},
axisTick: {
show: false,
@@ -213,13 +187,13 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.options.series.map((item) => {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.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 : 12;
// });
@@ -234,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() {
@@ -250,7 +224,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
// this.actualOptions = this.options
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -274,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);
},
},
};

View File

@@ -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>

View File

@@ -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);
},

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -1,10 +1,16 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-07-03 14:08:52
* @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">
@@ -63,32 +69,7 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
@@ -109,7 +90,6 @@ export default {
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "right",
},
axisTick: {
show: false,
@@ -214,13 +194,13 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.options.series.map((item) => {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.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 : 12;
// });
@@ -235,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() {
@@ -251,7 +231,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
// this.actualOptions = this.options
this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -275,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);
},
},
};

View File

@@ -1,215 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-06-05 09:43:52
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -1,214 +0,0 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -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: '',
};

View File

@@ -36,9 +36,7 @@ export default {
},
data() {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸",
// "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
];
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
@@ -47,11 +45,8 @@ export default {
legend() {
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
@@ -63,32 +58,27 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `去年${month}${today}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${yesterday}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
@@ -104,7 +94,7 @@ export default {
items = [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}目标`, color: "#58adfa" },
{ label: `${year}`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
@@ -146,6 +136,14 @@ export default {
// console.log('chipOee', chipOeeRate)
let dataList = null
switch (this.period) {
case "日":
dataList = [];
dataList[0] = chipOeeRate?.previous;
dataList[1] = chipOeeRate?.current;
case "周":
dataList = [];
dataList[0] = chipOeeRate?.previous;
dataList[1] = chipOeeRate?.current;
default:
dataList = [];
dataList[0] = chipOeeRate?.previous;
@@ -163,11 +161,8 @@ function getTemplate(period, dataList, than) {
// console.log('dataList',dataList);
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
@@ -180,41 +175,31 @@ function getTemplate(period, dataList, than) {
if (period === '日' && than === '同比') {
items = [
{
name: `${year - 1}${yesterday}`,
name: `去年${month}${today}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
name: `${month}${today}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
name: `${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
name: `${month}${today}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `${year-1}年本周`,
name: `年本周`,
data: dataList ? dataList[0] : [],
},
{
@@ -222,11 +207,6 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
@@ -239,16 +219,11 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${year-1}${month}`,
name: `${month}`,
data: dataList ? dataList[0] : [],
},
{

View File

@@ -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>

View File

@@ -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;

View File

@@ -36,9 +36,7 @@ export default {
},
data() {
// 城市数组的顺序必须是固定的
const cities = ["瑞昌", "邯郸",
// "株洲", "佳木斯", "成都", "凯盛", "蚌埠"
];
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
xAxis: cities,
};
@@ -47,11 +45,8 @@ export default {
legend() {
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
@@ -63,32 +58,27 @@ export default {
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${year - 1}${yesterday}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `去年${month}${today}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${dayBeYes}`, color: "#12f7f1" },
{ label: `${yesterday}`, color: "#58adfa" },
{ label: `${yesterday}日目标`, color: "#58adfa" },
{ label: `${yesterday}`, color: "#12f7f1" },
{ label: `${month}${today}`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `${year-1}年本周`, color: "#12f7f1" },
{ label: `年本周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `上周`, color: "#12f7f1" },
{ label: `本周`, color: "#58adfa" },
{ label: `本周目标`, color: "#58adfa" },
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${year-1}${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#12f7f1" },
{ label: `${month}`, color: "#58adfa" },
{ label: `${month}月目标`, color: "#58adfa" },
// { label: `${month}月目标`, value: valueTuple[2] },
@@ -104,7 +94,7 @@ export default {
items = [
{ label: `${year - 1}`, color: "#12f7f1" },
{ label: `${year}`, color: "#58adfa" },
{ label: `${year}目标`, color: "#58adfa" },
{ label: `${year}`, color: "#58adfa" },
// { label: `${year}年目标`, value: valueTuple[2] },
];
@@ -117,9 +107,17 @@ export default {
series() {
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
const transformRate = this.transformRate
console.log('chipOee', transformRate)
// console.log('chipOee', chipOeeRate)
let dataList = null;
switch (this.period) {
case "日":
dataList = [];
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current;
case "周":
dataList = [];
dataList[0] = transformRate.previous;
dataList[1] = transformRate.current;
default:
dataList = [];
dataList[0] = transformRate.previous;
@@ -154,11 +152,8 @@ function getTemplate(period, dataList,than) {
// console.log('dataList',dataList);
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
@@ -171,41 +166,31 @@ function getTemplate(period, dataList,than) {
if (period === '日' && than === '同比') {
items = [
{
name: `${year - 1}${yesterday}`,
name: `去年${month}${today}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
name: `${month}${today}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
name: `${yesterday}`,
data: dataList ? dataList[0] : [],
},
{
name: `${yesterday}`,
name: `${month}${today}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `${year-1}年本周`,
name: `年本周`,
data: dataList ? dataList[0] : [],
},
{
@@ -213,11 +198,6 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
@@ -230,16 +210,11 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${year-1}${month}`,
name: `${month}`,
data: dataList ? dataList[0] : [],
},
{

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-03 14:08:44
* @LastEditTime: 2024-05-29 14:09:08
* @LastEditors: zhp
* @Description:
-->
@@ -11,7 +11,7 @@
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
<div ref="oeeChart" style="height:96%;width:100%"></div>
</chart-container>
</template>
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "barChartBaseoee",
name: "BarChartBase",
components: {
ChartContainer,
},
@@ -62,32 +62,7 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
@@ -205,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,
},
],
@@ -246,12 +221,12 @@ export default {
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -266,7 +241,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options)
this.initChart(this.actualOptions)
this.canvasReset()
},
series(val) {
@@ -277,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() {
@@ -293,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);
},
@@ -321,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;
@@ -353,9 +327,6 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
margin-left: 1vw;
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-03 14:08:12
* @LastEditTime: 2024-05-29 14:25:10
* @LastEditors: zhp
* @Description:
-->
@@ -11,7 +11,7 @@
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:94%;width:100%"></div>
<div ref="oeeChart" style="height:96%;width:100%"></div>
</chart-container>
</template>
@@ -22,7 +22,7 @@ import ChartContainer from "../../../../components/ChartContainer.vue";
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
export default {
name: "barChartBaseoee",
name: "BarChartBase",
components: {
ChartContainer,
},
@@ -62,32 +62,7 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
@@ -205,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,
},
],
@@ -246,12 +221,12 @@ export default {
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -266,8 +241,8 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options)
this.canvasReset()
this.initChart(this.actualOptions)
// this.canvasReset()
},
series(val) {
if (!val) {
@@ -275,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() {
@@ -292,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);
},
@@ -320,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;
@@ -352,9 +326,7 @@ export default {
margin-right: 0.22vw;
}
}
.legend-item:nth-child(3) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
background-color: #12f7f1;
}

View File

@@ -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>

View File

@@ -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;

View File

@@ -6,7 +6,7 @@
-->
<template>
<div class="progress-bar" :data-title="title" :data-rate="current + '%'">
<div class="progress-bar" :data-title="title" :data-rate="value + '%'">
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
</div>
</template>
@@ -20,18 +20,6 @@ export default {
type: Number,
default: 0,
},
target: {
type: Number,
default: 0,
},
previous: {
type: Number,
default: 0,
},
current: {
type: Number,
default: 0,
},
// total: {
// type: Number,
// default: 0,
@@ -46,16 +34,11 @@ export default {
},
computed: {
dataRate() {
// if (this.current != 0 && this.target != 0) {
console.log( '1111111111', this.current, this.target,this.previous);
return this.current == 0 && this.target == 0
? 0
: this.current != 0 && this.target != 0
? `${((this.current / this.target) * 100).toFixed(2)}%`
: this.current != 0 && this.target == 0 && this.current >= 100 ? 100 + '%' : this.current != 0 && this.target == 0 && this.current < 100 ? this.current + '%' : 0 + '%'
// } else if(this.previous != 0) {
// return this.previous + '%'
// }
return this.value == 0
? "-"
: this.value > 1
? 100 + '%'
: `${(parseFloat(this.value)).toFixed(0)}%`;
},
},
methods: {},

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-06-27 09:13:38
* @LastEditTime: 2024-05-29 17:03:00
* @LastEditors: zhp
* @Description:
-->
@@ -10,31 +10,31 @@
<div v-if="period == '日'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<ProgressBar :period="period" :title="title" :value="city.current" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
</div>
</div>
<div v-else-if="period == '周'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<ProgressBar :period="period" :title="title" :value="city.current" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
</div>
</div>
<div v-else-if="period == '月'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
<ProgressBar :period="period" :title="title" :value="city.current" />
</div>
</div>
<div v-else="period == '年'" class="std-rate-item">
<CityName :value="city.name" />
<div class="std-rate-item__value">
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" />
<preProgressBar :period="period" :title="titlePre" :previous="city.previous" />
<!-- <ProgressBar :period="period" :title="title" :value="city.current" /> -->
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
<ProgressBar :period="period" :title="title" :value="city.current" />
</div>
</div>
</template>
@@ -42,12 +42,10 @@
<script>
import CityName from "./CityName.vue";
import ProgressBar from "./ProgressBar.vue";
import preProgressBar from "./preProgressBar.vue";
export default {
name: "StdRateItem",
components: { CityName, ProgressBar, preProgressBar },
components: { CityName, ProgressBar },
props: {
city: {
type: Object,
@@ -71,25 +69,22 @@ export default {
titlePre() {
console.log(this.city);
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
const today = new Date().getDate();
const month = new Date().getMonth() + 1;
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
return `${year - 1}${yesterday}`
return `去年${month}${today}`
} else if (this.period === '日' && this.than === '环比') {
return `${dayBeYes}`
return `${yesterday}`
} else if (this.period === '周' && this.than === '同比') {
return `${year-1}年本周`
return `年本周`
} else if (this.period === '周' && this.than === '环比') {
return `上周`
} else if (this.period === '月' && this.than === '同比') {
return `${year-1}${month}`
return `${month}`
} else if (this.period === '月' && this.than === '环比') {
return `${lastMonth}`
} else {
@@ -98,18 +93,14 @@ export default {
},
title() {
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
const today = new Date().getDate();
const month = new Date().getMonth() + 1;
const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
return `${yesterday}`
return `${month}${today}`
} else if (this.period === '日' && this.than === '环比') {
return `${yesterday}`
return `${month}${today}`
} else if (this.period === '周' && this.than === '同比') {
return `本周`
} else if (this.period === '周' && this.than === '环比') {
@@ -129,13 +120,9 @@ export default {
const month = new Date().getMonth() + 1;
const year = new Date().getFullYear();
if (this.period === '月') {
return `${month}月目标${this.city.target}%`
return `${month}月目标`
} else if (this.period === '年') {
return `${year}年目标${this.city.target}%`
} else if (this.period === '周') {
return `本周目标${this.city.target}%`
} else if (this.period === '日') {
return `${month}${today}日目标${this.city.target}%`
return `${year}年目标`
}
},
},

View File

@@ -1,130 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-06-27 09:12:54
* @LastEditTime: 2024-06-27 09:14:21
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="progress-bar" :data-title="title" :data-rate="previous + '%'">
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
</div>
</template>
<script>
export default {
name: "ProgressBar",
components: {},
props: {
value: {
type: Number,
default: 0,
},
target: {
type: Number,
default: 0,
},
previous: {
type: Number,
default: 0,
},
current: {
type: Number,
default: 0,
},
// total: {
// type: Number,
// default: 0,
// },
title: {
type: String,
default: "",
},
},
data() {
return {};
},
computed: {
dataRate() {
// if (this.current != 0 && this.target != 0) {
// console.log( '1111111111', this.current, this.target,this.previous);
return this.previous >=100 ? 100 + '%' : this.previous + '%';
// } else if(this.previous != 0) {
// return this.previous + '%'
// }
},
},
methods: {},
};
</script>
<style scoped lang="scss">
.progress-bar {
height: 10px;
background-color: #002f6b;
border-radius: 4px;
margin-bottom: 12px;
position: relative;
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
position: absolute;
bottom: -200%;
font-size: 12px;
}
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
position: absolute;
bottom: -200%;
right: 0;
font-size: 12px;
}
&:first-child {
&:after {
color: #11eae3;
}
}
&:nth-child(2) {
&:after {
color: #0e65fd;
}
}
.progress-bar__rate {
position: absolute;
display: inline-block;
height: 100%;
width: 0;
border-radius: 4px;
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
&:first-child {
.progress-bar__rate {
background: linear-gradient(to right,
#004c5e11 10%,
#004c5e,
#0ac0c0,
#11eae3);
}
}
&:nth-child(2) {
.progress-bar__rate {
background: linear-gradient(to right, #0048a811, #0048a8, #0e65fd);
}
}
}
</style>

View File

@@ -1,47 +1,39 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 10:04:53
* @LastEditTime: 2024-07-01 12:27:45
* @LastEditTime: 2024-05-30 11:13:01
* @LastEditors: zhp
* @Description:
-->
<template>
<div class="efficiency-copilot">
<section class="top flex">
<Container title="芯片良率" icon="chip2">
<ChipRate :period="period" :than="than" />
</Container>
<left-container title="标准组件良率" icon="std">
<StdRate :period="period" :than="than" />
</left-container>
</section>
<section class="bottom flex">
<Container title="芯片OEE" icon="chip">
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
</Container>
<left-container title="转化效率" icon="cube">
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
</left-container>
</section>
<Container title="芯片良率" icon="chip2">
<ChipRate :period="period" :than="than" />
</Container>
<Container title="标准组件良率" icon="std">
<StdRate :period="period" :than="than" />
</Container>
<Container title="芯片OEE" icon="chip">
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
</Container>
<Container title="转化效率" icon="cube">
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
</Container>
</div>
</template>
<script>
import Container from "@/views/copilot/components/rightContainer.vue";
import leftContainer from "@/views/copilot/components/leftContainer.vue";
import Container from "@/views/copilot/components/Container.vue";
import ChipOeeVue from "./components/ChipOee.vue";
import ChipRateVue from "./components/ChipRate.vue";
import StdRateVue from "./components/StdRate.vue";
import TransformRateVue from "./components/TransformRate.vue";
export default {
name: "efficiencyCopilot",
name: "EfficiencyCopilot",
components: {
Container,
leftContainer,
ChipOee: ChipOeeVue,
ChipRate: ChipRateVue,
StdRate: StdRateVue,
@@ -96,30 +88,7 @@ export default {
};
</script>
<style scoped>
.efficiency-copilot {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
.flex {
display: flex;
gap: 20px;
flex: 1;
}
.top > div,
.bottom > div {
height: 100%;
}
</style>
<!-- <style scoped>
.efficiency-copilot {
flex: 1;
display: grid;
@@ -131,4 +100,4 @@ export default {
.efficiency-copilot > div {
height: 100%;
}
</style> -->
</style>

View File

@@ -1,147 +1,163 @@
export default ({
export default function ({
single = false,
color,
titleValue,
subtitle,
previousSum,
currentSum,
targetSum,
currentName,
preName,
yesterday,
}) => ({
grid: {
left: 300,
right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
tooltip: {},
title: {
text: titleValue,
left: "48%",
top: "37%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 36,
color: "#fffd",
}) {
return {
grid: {
left: 0,
right: 0,
bottom: 0,
top: 0,
containLabel: true,
},
subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: {
fontSize: 16,
fontWeight: 100,
color: "#fffd",
align: "right",
tooltip: {
// formatter(params) {
// return `${params.name}: ${(params.value * 100).toFixed(0)}%`;
// }
},
},
series: [
// 背景 series
{
type: "pie",
name: "当前良率",
radius: ["70%", "85%"],
center: ["50%", "52%"],
emptyCircleStyle: {
color: "#003982",
title: {
text: titleValue,
left: "49%",
top: "39%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
fontSize: 14,
fontWeight: 100,
color: "#fffd",
align: "right",
},
},
// 数据 series
{
type: "pie",
radius: ["70%", "85%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
series: [
// 背景 series
{
type: "pie",
name: "当前目标",
radius: ["70%", "85%"],
center: ["50%", "52%"],
emptyCircleStyle: {
color: "#040c5f45",
},
},
labelLine: {
show: false,
},
data: [
{
value: currentSum,
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
},
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#4CF0E811" },
{ offset: 1, color: "#4CF0E8" },
],
// 数据 series
{
type: "pie",
radius: ["70%", "85%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: currentSum,
name: "当前良率",
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: single
? [
{ offset: 0, color: `${color}11` },
{ offset: 1, color: `${color}` },
]
: [
{ offset: 0, color: "#4CF0E811" },
{ offset: 1, color: "#4CF0E8" },
],
},
},
},
},
{
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
{
value:
targetSum > currentSum
? targetSum - currentSum
: targetSum == 0
? currentSum == 0
? 1
: 0
: targetSum,
name: "未达成",
itemStyle: { color: "transparent" },
label: { show: false },
},
itemStyle: { color: "transparent" },
label: { show: false },
},
],
},
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["55%", "70%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
],
},
labelLine: {
show: false,
},
data: [
{
value: previousSum,
name: preName,
tooltip: {
formatter: `${preName} : ${previousSum}`
},
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#1065ff66" },
{ offset: 1, color: "#1065ff" },
],
// 数据 series2 - 2023累计
single
? null
: {
type: "pie",
radius: ["55%", "70%"],
center: ["50%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
},
labelLine: {
show: false,
},
data: [
{
value: previousSum,
name: "上期良率",
selected: false,
itemStyle: {
borderJoin: "round",
borderCap: "round",
borderWidth: 12,
borderRadius: "50%",
color: {
type: "linear",
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "#1065ff66" },
{ offset: 1, color: "#1065ff" },
],
},
},
},
{
value:
targetSum > previousSum
? targetSum - previousSum
: previousSum == 0
? 1
: 0,
name: "-",
formatter: {
show: false
},
itemStyle: { color: "transparent" },
label: { show: false },
},
],
},
},
{
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `${preName} : ${previousSum}`
},
itemStyle: { color: "transparent" },
label: { show: false },
},
],
},
],
});
],
};
}

View File

@@ -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; **/

View File

@@ -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,

View File

@@ -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,

View File

@@ -1,36 +1,22 @@
<template>
<chart-container class="bar-chart-base">
<div class="left-chart-base">
<!-- <div class="legend">
<div class="left-chart-base">
<!-- <div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }">{{ item.label }}</span>
</div> -->
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
</div>
</chart-container>
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
import ChartContainer from "../../components/ChartContainer.vue";
// import CopilotButton from "./chartButton"
export default {
components: {
ChartContainer
// CopilotButton,
},
name: "Energy",
props: {
// legend: {
// type: Array,
// required: true,
// },
type: {
type: String,
default:'目标产量'
},
energyCockpits: {
type: Array,
required: true,
@@ -41,49 +27,16 @@ export default {
isFullscreen: false,
actualOptions: null,
chart: "",
data: [],
orderXAxis:[],
// obj:{
// seriesArr: [],
// targetProduceArr: [],
// planIn: [],
// acIn: [],
// acProduceArr: [],
// scrapNum: [],
// processNum: [],
// },
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "6%",
right: "3%",
bottom: "15%",
left: "7%",
right: "7%",
bottom: "8%",
top: "15%",
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = ``;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: {
axisTick: {
@@ -95,29 +48,14 @@ export default {
},
},
axisLabel: {
interval: 0,//设置横坐标为斜
rotate:45,
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
// formatter: function (value) {
// console.log(value);
// return value;
// },
},
data: [],
},
// dataZoom: [
// {
// // show: true,
// start: 0,
// end: 50
// }
// ],
yAxis: {
type: "value",
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
@@ -128,7 +66,7 @@ export default {
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 10,
fontSize: 12,
},
axisLine: {
show: true,
@@ -234,9 +172,6 @@ export default {
},
},
watch: {
type(val) {
this.initChart()
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
// this.actualOptions.series.map((item) => {
@@ -262,9 +197,9 @@ export default {
// this.actualOptions = actualOptions;
// this.initOptions(actualOptions);
// },
// energyCockpits() {
// this.initChart();
// },
energyCockpits() {
this.initChart();
},
isOpen(val) {
this.canvasReset();
},
@@ -293,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 = [
// {
@@ -409,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);
},
},
};

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-07-03 14:10:06
* @LastEditTime: 2024-05-30 10:38:32
* @LastEditors: zhp
* @Description:
-->
@@ -11,7 +11,7 @@
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:100%"></div>
<div ref="oeeChart" style="height:96%;width:100%"></div>
</chart-container>
</template>
@@ -62,59 +62,7 @@ export default {
top: "15%",
containLabel: true,
},
// tooltip: {
// trigger: "axis",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
// extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
// backgroundColor: '#001829',
// borderColor: '#001829',
// // textStyle: {
// // color:'rgba(255, 255, 255, 0.85)'
// // },
// formatter: params => {
// console.log('params', params)
// var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
// for (var i = 0, l = params.length; i < l; i++) {
// res +=
// "<br/>" +
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${params[i].color}'></span>` +
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].seriesName}</span>` +
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value}</span>`;
// }
// return res;
// },
// },
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
@@ -131,12 +79,10 @@ export default {
data: this.xAxis,
},
yAxis: {
name: "单位/",
position: 'left',
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
align: "right",
},
axisTick: {
show: false,
@@ -159,7 +105,7 @@ export default {
},
series: [
{
name: "FTO", // this.series[0].name,
name: "fto", // this.series[0].name,
type: "bar",
barWidth: 12,
itemStyle: {
@@ -227,11 +173,32 @@ export default {
},
{
name: "", // "2024年目标值",
type: "line",
type: "bar",
barWidth: 12,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color:'#f3c000'
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#f3c000", // 0% 处的颜色
},
{
offset: 1,
color: "#f3c00033",
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
@@ -254,12 +221,12 @@ export default {
},
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.options.series.map((item) => {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -274,7 +241,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options)
this.initChart(this.actualOptions)
this.canvasReset()
},
series(val) {
@@ -284,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() {
@@ -331,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: 12px;
margin-right:1.2vw;
color: #DFF1FE;
margin-right: 1.3vw;
&::before {
content: "";
display: inline-block;
@@ -363,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;
}
@@ -373,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>

View File

@@ -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] : [],
},
{

View File

@@ -1,22 +1,15 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-06-05 09:53:49
* @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

View File

@@ -1,19 +1,14 @@
<template>
<div class="order-container">
<div class="table">
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%; color: rgba(255, 255, 255, .6);" ref="orderScrollBoard" />
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%" ref="orderScrollBoard" />
</div>
<div class="chart">
<div class="chart-title">
<span class="title">工单情况</span>
<span class="title">生产情况</span>
<span class="line"></span>
</div>
<div class="button-type" style="margin-left: auto;position: absolute;right: 3%;top: 57%;z-index: 999;">
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
:active="i === type" @click="() => $emit('update:type', i)" />
</div>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart"
style="height: 0;flex:1"></barChartBase>
<barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
</div>
</div>
@@ -21,18 +16,14 @@
<script>
import { debounce } from "@/utils/debounce";
import barChartBase from './BarChartBase'
// import barChartBase from './BarChartBase'
import CopilotButton from "./chartButton"
export default {
name: "Order",
components: {
barChartBase,
CopilotButton,
},
data() {
return {
showTable: true,
// type: '目标产量',
config: {
header: ["工单号", "工单状态", "计划投入", "实际投入", "目标产量", "实际产量", "生产进度"],
headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -40,19 +31,14 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [],
rowNum: 12,
fontSize:14,
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(() => {
@@ -102,37 +79,51 @@ export default {
arr.push(
`<span title=${this.prodOrder[i].workOrderNumber || ""}>${
this.prodOrder[i].workOrderNumber || ""
}</span>`,
`<span title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
}</span>`,
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
}</span>`,
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`,
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) * 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(0) *100 *
37.68 *
0.01 +
"," +
(1 -
this.prodOrder[i].productionProgress.toFixed(0) * 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);
}
}

View File

@@ -8,11 +8,11 @@
</div>
<div class="middle-box">
<span class="type">玻璃类型</span>
<span class="type-name">FTO</span>
<span class="type-name">FTO投入</span>
</div>
<div class="right-box">
<span class="type">投入数量</span>
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span>
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
</div>
</div>
<div class="std-box">
@@ -23,13 +23,13 @@
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">标准组</span>
<span class="type-name">标准组检产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0
}}</span>
msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
}}</span>
</div>
</div>
</div>
@@ -38,12 +38,12 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0
}}</span>
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span>
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span>
</div>
</div>
</div>
@@ -56,13 +56,13 @@
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">芯片</span>
<span class="type-name">芯片产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0
}}</span>
msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
}}</span>
</div>
</div>
</div>
@@ -71,12 +71,12 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0
}}</span>
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span>
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
</div>
</div>
</div>
@@ -89,13 +89,13 @@
<div class="separate">
<div>
<span class="type">玻璃类型</span>
<span class="type-name">BIPV</span>
<span class="type-name">BIPV产量</span>
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
}}</span>
</div>
</div>
</div>
@@ -104,12 +104,12 @@
<div>
<span class="type">生产数量</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0
}}</span>
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span>
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
</div>
</div>
</div>
@@ -118,11 +118,7 @@
<div class="chart">
<div class="chart-title">
<span class="title">生产情况</span>
<div class="button-than" style="position: absolute;right: 3%;">
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" />
</div>
<!-- <span class="line"></span> -->
<span class="line"></span>
</div>
<barChartBase :companyId="companyId" :than="than" :period="period" :data="factoryData" ref="barChart"
style="height: 0;flex:1">
@@ -133,12 +129,11 @@
<script>
import { number } from 'echarts';
import barChartBase from './ChipOee'
import CopilotButton from "./button.vue"
export default {
name: "ProdMonitor",
components: {
barChartBase,
CopilotButton
},
data() {
return {
@@ -159,9 +154,6 @@ export default {
type: Number,
default:0
},
than: {
type: String,
},
than: {
type: String,
default: '同比',
@@ -190,13 +182,6 @@ export default {
},
mounted() {
this.makeData();
this.$nextTick(() => {
let button = document.getElementsByClassName('button-than')
console.log(button);
button[0].children[0].style.borderRadius = '4px 0 0 4px'
button[0].children[1].style.borderRadius = '0px 4px 4px 0'
console.log(button[0].children[0].style);
})
},
methods: {
makeData() {
@@ -249,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{

View File

@@ -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>

View File

@@ -1,148 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-06-07 08:37:17
* @LastEditTime: 2024-06-07 11:04:41
* @LastEditors: zhp
* @Description:
-->
<template>
<button
class="chart-btn"
:class="[active ? 'active' : '']"
@click="$emit('click', label)"
>
{{ label }}
</button>
</template>
<script>
export default {
name: "CopilotButton",
props: {
label: {
type: String,
required: true,
},
active: {
type: Boolean,
default: false,
},
},
mounted() {
},
};
</script>
<style>
button {
appearance: none;
outline: none;
border: none;
background: none;
}
</style>
<style scoped>
.skate {
/* flex: 1; */
position: relative;
width: 88px;
height: 32px;
background: #01306C;
/* border-radius: 4px 0px 0px 4px; */
backdrop-filter: blur(3px);
/* text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
text-align: center;
font-style: normal;
/* margin-right: 1px; */
/* letter-spacing: 10px; */
cursor: pointer;
}
.chart-btn:nth-child(6)::after {
content: '';
width: 0;
height: 0;
display: none;
}
.chart-btn {
/* flex: 1; */
position: relative;
width: 88px;
height: 32px;
background: #01306C;
/* border-radius: 4px 0px 0px 4px; */
backdrop-filter: blur(3px);
/* text-align: center;
padding: 12px;
padding-left: 20px;
color: #fff;
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
text-align: center;
font-style: normal;
/* margin-right: 1px; */
/* letter-spacing: 10px; */
cursor: pointer;
}
.chart-btn::after {
/* flex: 1; */
/* position: relative; */
content: "";
position: absolute;
/* width: 16px; */
/* height: 16px; */
top: px;
right: -1px;
width: 1px;
height: 23px;
border: 1px solid #010D18;
}
.chart-btn.active {
background: #1D74D8;
/* border-radius: 4px;; */
}
.chart-btn.active::after {
display: none;
/* border-radius: 4px;; */
}
/* .copilot-btn::before,
.copilot-btn::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 0;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: transparent;
border-top-color: #007be4;
}
.copilot-btn::before {
left: 0;
border-left-color: #007be4;
}
.copilot-btn::after {
right: 0;
border-right-color: #007be4;
} */
</style>

View File

@@ -1,227 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-06-05 09:38:23
* @LastEditors: zhp
* @Description:
-->
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" :class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon style="margin-left: 16px;" :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue";
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {};
},
computed: {},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 0;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -1,218 +0,0 @@
<!--
filename: Container.vue
author: liubin
date: 2024-04-09 10:44:09
description:
-->
<template>
<div class="copilot-container">
<!-- refresh btn -->
<button v-if="false" style="
appearance: none;
outline: none;
border: none;
background: none;
color: #fff;
cursor: pointer;
position: absolute;
top: 8px;
right: 8px;
" @click="$emit('refresh')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
style="width: 24px; height: 24px">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</button>
<!-- decoration -->
<div class="corner tl"></div>
<div class="corner tr"></div>
<div class="corner bl"></div>
<div class="corner br"></div>
<!-- content -->
<div class="container-head" ref="container-head"
:class="[side == 'left' ? 'gradient-to-right' : 'gradient-to-left']">
<Icon :icon="icon"></Icon>
<h2 class="container-title">{{ title }}</h2>
</div>
<div class="container-body" :class="[
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left',
]">
<slot />
</div>
</div>
</template>
<script>
import ContainerIconVue from "./ContainerIcon.vue"
export default {
name: "DashboardContainer",
components: {
Icon: ContainerIconVue,
},
props: {
side: {
type: String,
default: "left",
},
icon: {
type: String,
default: "cube",
},
title: {
type: String,
default: "Default Title",
},
},
data() {
return {
};
},
computed: {},
mounted() {
},
methods: {},
};
</script>
<style scoped lang="scss">
.copilot-container {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
position: relative;
box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px);
&::before {
content: "";
position: absolute;
display: inline-block;
height: 100%;
width: 0.11415vw;
border-radius: 2px;
top: 0%;
left: 0;
background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 1;
}
&::after {
content: "";
position: absolute;
display: inline-block;
width: 60%;
height: 0.31415vh;
border-radius: 2px;
left: 8%;
bottom: 0;
background: linear-gradient(to right, #024798, transparent);
z-index: 0;
}
.container-head {
// height: 40px;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
.container-title {
font-size: 1.18vw;
line-height: 1.39vw;
font-weight: normal;
letter-spacing: 2px;
}
}
.container-body {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.corner {
z-index: 1;
position: absolute;
// width: 16px;
// height: 16px;
width: 0.95vw;
height: 0.95vw;
}
.corner.tl {
border-top: 2px solid #0175dc;
border-left: 2px solid #0175dc;
top: 0;
left: 0;
}
.corner.tr {
top: 0;
right: 0;
border-top: 2px solid #0175dc;
border-right: 2px solid #0175dc;
}
.corner.bl {
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
bottom: 0;
left: 0;
// border-left: 10px solid #0175dc;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid transparent;
border-left: 0.532vw solid #0175dc;
border-bottom: 0.532vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.corner.br {
bottom: 0;
right: 0;
// width: 20px;
// height: 20px;
width: 1.064vw;
height: 1.064vw;
// border-left: 10px solid transparent;
// border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent;
// border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent;
border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent;
border-right: 0.532vw solid transparent;
}
.gradient-to-right {
background: linear-gradient(to right, #0c3f68cc, transparent);
}
.gradient-to-left {
background: linear-gradient(to left, #0c3f68cc, transparent);
}
.body-gradient-to-right {
background: linear-gradient(to right, #0003, transparent);
}
.body-gradient-to-left {
background: linear-gradient(to left, #0003, transparent);
}
}
</style>

View File

@@ -5,12 +5,12 @@
<div class="factory-section">
<section class="top flex">
<db-container title="生产监控" icon="prod">
<prod-monitor @update:than="updateThan" :companyId="companyId" :factoryData="factoryData" :than="than"
:period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container>
<db-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" />
</db-container>
<left-container title="工单监控" icon="order">
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" />
</left-container>
<!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> -->
<!-- </db-container> -->
@@ -26,8 +26,7 @@
</template>
<script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import Container from "./components/Container.vue";
import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils";
// import Store from "./components/Store.vue";
@@ -39,7 +38,6 @@ export default {
components: {
FactoryDataHeader,
DbContainer: Container,
LeftContainer: leftContainer,
ProdMonitor,
// Store,
// Energy,
@@ -47,7 +45,6 @@ export default {
},
data() {
return {
type: '目标产量',
companyId: 1,
companyName: "邯郸中建材光电材料有限公司",
period: 1,
@@ -76,10 +73,6 @@ export default {
this.getMes();
},
methods: {
updateType(val) {
console.log(val)
this.type = val
},
updateCompany(obj) {
this.companyId = obj.companyId;
this.companyName = obj.companyName;
@@ -134,11 +127,11 @@ export default {
if (preData && preData[0] != null) {
for (const factory of preData) {
if (factory.previousGlassType === 0) {
preDataDetail[1] = factory.previousOutputNumber
preDataDetail[1] = factory.previousYearOutputNumber
} else if (factory.previousGlassType === 1) {
preDataDetail[2] = factory.previousOutputNumber
} else if (factory.previousGlassType === 2) {
preDataDetail[3] = factory.previousOutputNumber
preDataDetail[2] = factory.previousYearOutputNumber
} else if (factory.previousYearOutputNumber === 2) {
currentDataDetail[3] = factory.outputNumber
}
}
}

View File

@@ -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

View File

@@ -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,

View File

@@ -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,

View File

@@ -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,

View File

@@ -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,

View File

@@ -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] : [],
},
{

View File

@@ -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] : [],
},
{

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-06-17 16:42:12
* @LastEditTime: 2024-05-30 13:35:00
* @LastEditors: zhp
* @Description:
-->
@@ -78,13 +78,13 @@ export default {
valueTuple() {
// [previousValue, currentValue, sumValue?]
const getter = this.$store.getters.copilot.yield[this.dataSourceField];
// if (this.period === "日" || this.period === "周") {
// console.log(this.period)
// return [
// getter.previous[this.factoryId],
// getter.current[this.factoryId],
// ];
// }
if (this.period === "日" || this.period === "周") {
console.log(this.period)
return [
getter.previous[this.factoryId],
getter.current[this.factoryId],
];
}
// [100, 200, 200]
return [
getter.previous[this.factoryId],
@@ -100,11 +100,8 @@ export default {
const vt = this.valueTuple;
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
@@ -116,32 +113,28 @@ export default {
// const year = new Date().getFullYear();
if (this.period === '日' && this.than === '同比') {
items = [
{ label: `${yesterday}日累计`,},
{ label: `${year - 1}${yesterday}累计` },
{ label: `${yesterday}日目标`, },
{ label: `${month}${today}日累计`,},
{ label: `去年${month}${today}累计` },
];
} else if (this.period === '日' && this.than === '环比') {
items = [
{ label: `${month}${today}日累计`},
{ label: `${yesterday}日累计`},
{ label: `${dayBeYes}日累计` },
{ label: `${yesterday}日目标`, },
];
} else if (this.period === '周' && this.than === '同比') {
items = [
{ label: `本周累计`,},
{ label: `${year-1}年本周累计` },
{ label: `本周目标`, },
{ label: `年本周累计`},
];
} else if (this.period === '周' && this.than === '环比') {
items = [
{ label: `本周累计`,},
{ label: `上周累计`, },
{ label: `本周目标`, },
{ label: `上周累计`,},
];
} else if (this.period === '月' && this.than === '同比') {
items = [
{ label: `${month}月累计`,},
{ label: `${year-1}${month}月累计`, },
{ label: `${month}月累计`, },
{ label: `${month}月目标`,},
];
} else if (this.period === '月' && this.than === '环比') {
@@ -158,14 +151,13 @@ export default {
];
}
let titleValue =
vt[1] != null && (vt[2] !== 0 && vt[2] !== undefined)
? this.formatNumber((vt[1] / vt[2] * 100)) + '%'
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0
? "100%" : '0%',
vt[0] != null && vt[2] != null && vt[2] !== 0
? `${vt[1] / vt[2]}%`
: "0%",
subtitle =
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
console.log('titleValue', items)
// console.log(this.valueTuple[2]- this.valueTuple[1])
this.period == "日" ? `${month}${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
console.log(items)
return getOptions({
titleValue,
subtitle,
@@ -173,7 +165,7 @@ export default {
preName: items[1].label,
previousSum: this.valueTuple[0],
currentSum: this.valueTuple[1],
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0,
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 ,
});
},
@@ -204,15 +196,6 @@ export default {
}
},
methods: {
formatNumber(num) {
// 判断是否为整数
if (Number.isInteger(num)) {
return num; // 如果是整数,直接转换为字符串
} else {
// 如果不是整数,保留两位小数并转换为字符串
return num.toFixed(2);
}
}
// fullscreen mixin 需要的回调
// fullscreenCallback(isFullscreen) {
// console.log("isFullscreen--->", isFullscreen);
@@ -220,16 +203,11 @@ export default {
},
};
function calculateItems(period, valueTuple, than) {
console.log('valueTuple', valueTuple);
function calculateItems(period, valueTuple,than) {
let items = [];
var day1 = new Date();
var day2 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
day2.setTime(day2.getTime() - 48 * 60 * 60 * 1000)
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
var dayBeYes = (day2.getMonth() + 1) + "月" + day2.getDate()
//今天的时间
// var day2 = new Date();
// day2.setTime(day2.getTime());
@@ -241,44 +219,40 @@ function calculateItems(period, valueTuple, than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{ label: `${year - 1}${yesterday}累计`, value: valueTuple[0] },
{ label: `${yesterday}累计`, value: valueTuple[1] },
{ label: `${yesterday}日目标`, value: valueTuple[2] },
{ label: `${month}${today}累计`, value: valueTuple[1] },
{ label: `去年${month}${today}累计`, value: valueTuple[0] },
];
} else if (period === '日' && than === '环比') {
items = [
{ label: `${dayBeYes}日累计`, value: valueTuple[0] },
{ label: `${yesterday}日累计`, value: valueTuple[1] },
{ label: `${yesterday}日目标`, value: valueTuple[2] },
{ label: `${month}${today}日累计`, value: valueTuple[1] },
{ label: `${yesterday}日累计`, value: valueTuple[0] },
];
} else if (period === '周' && than === '同比') {
items = [
{ label: `${year-1}年本周累计`, value: valueTuple[0] },
{ label: `本周累计`, value: valueTuple[1] },
{ label: `本周目标`, value: valueTuple[2] },
{ label: `去年本周累计`, value: valueTuple[0] },
];
} else if (period === '周' && than === '环比') {
items = [
{ label: `上周累计`, value: valueTuple[0] },
{ label: `本周累计`, value: valueTuple[1] },
{ label: `本周目标`, value: valueTuple[2] },
{ label: `上周累计`, value: valueTuple[0] },
];
} else if (period === '月' && than === '同比') {
items = [
{ label: `${year-1}${month}月累计`, value: valueTuple[0] },
{ label: `${month}月累计`, value: valueTuple[1] },
{ label: `去年${month}月累计`, value: valueTuple[0] },
{ label: `${month}月目标`, value: valueTuple[2] },
];
} else if (period === '月' && than === '环比') {
items = [
{ label: `${lastMonth}月累计`, value: valueTuple[0] },
{ label: `${month}月累计`, value: valueTuple[1] },
{ label: `${lastMonth}月累计`, value: valueTuple[0] },
{ label: `${month}月目标`, value: valueTuple[2] },
];
} else {
items = [
{ label: `${year - 1}年累计`, value: valueTuple[0] },
{ label: `${year}年累计`, value: valueTuple[1] },
{ label: `${year - 1}年累计`, value: valueTuple[0] },
{ label: `${year}年目标`, value: valueTuple[2] },
];
}
@@ -340,17 +314,17 @@ function calculateItems(period, valueTuple, than) {
left: -18px;
}
.legend-item:nth-child(2) .legend-item__label::before {
.legend-item:nth-child(1) .legend-item__label::before {
background: #12fff5;
}
.legend-item:nth-child(2) .legend-item__value {
.legend-item:nth-child(1) .legend-item__value {
color: #12fff5;
}
.legend-item:nth-child(1) .legend-item__label::before {
.legend-item:nth-child(2) .legend-item__label::before {
background: #0f65ff;
}
.legend-item:nth-child(1) .legend-item__value {
.legend-item:nth-child(2) .legend-item__value {
color: #0f65ff;
}

View File

@@ -1,10 +1,10 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 16:00:50
* @LastEditTime: 2024-06-03 16:26:03
* @LastEditors: zhp
* @Description:
filename: DoubleRingWrapper.vue
author: liubin
date: 2024-04-17 09:55:12
description:
-->
<template>
<div class="double-ring-wrapper">
<template>
@@ -42,13 +42,13 @@ export default {
return {
factoryId: 4, // 默认成都
cityOptions: [
// "成都",
"成都",
"邯郸",
// "株洲",
"株洲",
"瑞昌",
// "佳木斯",
// "凯盛光伏",
// "蚌埠兴科",
"佳木斯",
"凯盛光伏",
"蚌埠兴科",
],
};
},

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-24 15:15:00
* @LastEditTime: 2024-05-31 16:16:16
* @LastEditTime: 2024-05-28 08:42:36
* @LastEditors: zhp
* @Description:
-->
@@ -54,12 +54,12 @@ export default {
return {
factoryId: 4, // 默认成都
cityOptions: [
// "成都",
"成都",
"邯郸",
// "株洲",
// "佳木斯",
// "凯盛光伏",
// "蚌埠兴科",
"株洲",
"佳木斯",
"凯盛光伏",
"蚌埠兴科",
],
};
},

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-10 11:10:54
* @LastEditTime: 2024-06-05 09:49:46
* @LastEditTime: 2024-05-28 13:36:07
* @LastEditors: zhp
* @Description:
-->
@@ -9,32 +9,29 @@
<template>
<div class="yield-copilot">
<section class="top flex">
<right-container class="std-yield" title="标准组件产出" icon="std">
<db-container class="std-yield" title="标准组件产出" icon="std">
<std-output v-if="show" :period="period" :than="than" />
</right-container>
</db-container>
<db-container class="chip-yield" title="芯片产出" icon="chip2">
<chip-output v-if="show" :period="period" :than="than" />
</db-container>
<left-container class="bipv-yield" title="BIPV产出" icon="bipv">
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
<bipv-output v-if="show" :period="period" :than="than" />
</left-container>
</db-container>
</section>
<section class="bottom flex">
<right-container class="fto-involve" title="FTO投入">
<db-container class="fto-involve" title="FTO投入">
<fto-invest :period="period" :than="than" />
</right-container>
<left-container class="chip-involve" title="芯片投入" icon="chip">
</db-container>
<db-container class="chip-involve" title="芯片投入" icon="chip">
<chip-invest :period="period" :than="than" />
</left-container>
</db-container>
</section>
</div>
</template>
<script>
import twoContainer from "@/views/copilot/components/twoContainer.vue";
import leftContainer from "@/views/copilot/components/leftContainer.vue";
import rightContainer from "@/views/copilot/components/rightContainer.vue";
import Container from "@/views/copilot/components/Container.vue";
import StdOutput from "./components/StdOutput.vue";
import ChipOutput from "./components/ChipOutput.vue";
import FtoInvest from "./components/FtoInvest.vue";
@@ -44,9 +41,7 @@ import ChipInvest from "./components/ChipInvest.vue";
export default {
name: "YieldCopilot",
components: {
DbContainer: twoContainer,
leftContainer,
rightContainer,
DbContainer: Container,
StdOutput,
ChipOutput,
BipvOutput,

View File

@@ -17,12 +17,12 @@ export default ({
tooltip: {},
title: {
text: titleValue,
left: "48.5%",
left: "44%",
top: "37%",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 26,
fontSize: 32,
color: "#fffd",
},
subtext: `\u2002${subtitle}\u2002`,
@@ -38,8 +38,8 @@ export default ({
{
type: "pie",
name: "当前目标",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["70%", "85%"],
center: ["45%", "52%"],
emptyCircleStyle: {
color: "#042c5f33",
},
@@ -47,8 +47,8 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["80%", "90%"],
center: ["50%", "52%"],
radius: ["70%", "85%"],
center: ["45%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -61,9 +61,6 @@ export default ({
value: currentSum,
name: currentName,
selected: false,
tooltip: {
formatter: `${currentName} : ${currentSum}`
},
itemStyle: {
borderJoin: "round",
borderCap: "round",
@@ -83,11 +80,16 @@ export default ({
},
},
{
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `${currentName} : ${currentSum}`
},
value:
targetSum > currentSum
? targetSum - currentSum
: targetSum == 0
? currentSum == 0
? 1
: 0
: 0,
name: "未达成累计",
itemStyle: { color: "transparent" },
label: { show: false },
},
@@ -96,8 +98,8 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["70%", "80%"],
center: ["50%", "52%"],
radius: ["55%", "70%"],
center: ["45%", "52%"],
avoidLabelOvervlap: false,
label: {
show: false,
@@ -110,9 +112,6 @@ export default ({
value: previousSum,
name: preName,
selected: false,
tooltip: {
formatter: `${preName} : ${previousSum}`
},
itemStyle: {
borderJoin: "round",
borderCap: "round",
@@ -132,12 +131,13 @@ export default ({
},
},
{
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `${preName} : ${previousSum}`
},
value:
targetSum > previousSum
? targetSum - previousSum
: previousSum == 0
? 1
: 0,
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
},

View File

@@ -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,
},
];
},

View File

@@ -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;

View File

@@ -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 ||

View File

@@ -1,15 +1,8 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-07-03 15:56:48
* @LastEditors: zhp
* @Description:
-->
<!--
<!--
filename: ChipYield.vue
author: liubin
date: 2024-04-11 10:46:47
description:
description:
-->
<template>
@@ -53,32 +46,7 @@ export default {
top: 0,
containLabel: true,
},
tooltip: {
trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = ``;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
console.log('res',res)
return res;
},
},
tooltip: {},
title: {
text: "0%",
left: "48%",
@@ -123,12 +91,9 @@ export default {
},
data: [
{
value: 0,
value: 90,
name: `${year}累计产出`,
selected: false,
tooltip: {
formatter: null,
},
itemStyle: {
borderJoin: "round",
borderCap: "round",
@@ -148,11 +113,8 @@ export default {
},
},
{
value: 0,
name: `${year}目标`,
tooltip: {
formatter: null,
},
value: 20,
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
},
@@ -172,12 +134,9 @@ export default {
},
data: [
{
value: 0,
value: 90,
name: `${year - 1}累计产出`,
selected: false,
tooltip: {
formatter: null,
},
itemStyle: {
borderJoin: "round",
borderCap: "round",
@@ -198,10 +157,7 @@ export default {
},
{
value: 0,
name: `${year - 1}累计产出`,
tooltip: {
formatter:null,
},
name: "-",
itemStyle: { color: "transparent" },
label: { show: false },
},
@@ -246,53 +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 =
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
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 = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
}
// 内环
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 = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
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 = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0;
}
console.log('options', options);
return options;
},
},
@@ -308,9 +243,6 @@ export default {
factory(val) {
this.initOptions(this.actualOptions);
},
actualOptions() {
this.initOptions(this.actualOptions);
}
},
mounted() {
console.log("mounted", this.actualOptions);

View File

@@ -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" },

View File

@@ -1,8 +1,8 @@
<!--
<!--
filename: left-chart-base
author: liubin
date: 2024-04-10 08:59:28
description:
description:
-->
<template>
@@ -12,7 +12,7 @@
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div>
@@ -59,38 +59,13 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "3%",
right: "4%",
bottom: "0",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
@@ -102,24 +77,22 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: 14,
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
position:'left',
nameTextStyle: {
color: "#fff",
fontSize: 14,
align:'right'
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 14,
fontSize: 12,
},
axisLine: {
show: true,
@@ -138,15 +111,6 @@ export default {
name: '', // this.series[0].name,
type: "bar",
barWidth: 12,
label: {
show: true, //开启显示
align: 'right', //在上方显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#DFF1FE',
fontSize: 14
}
},
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -182,20 +146,13 @@ export default {
name: '', // this.series[1].name,
type: "bar",
barWidth: 12,
label: {
show: true, //开启显示
align: 'left', //在上方显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#DFF1FE',
fontSize: 14
}
},
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
itemStyle: {
borderRadius: [10, 10, 0, 0],
// normal: {
// },
color: {
type: "linear",
x: 0,
@@ -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) {

View File

@@ -1,15 +1,8 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-07-03 14:13:59
* @LastEditors: zhp
* @Description:
-->
<!--
<!--
filename: right-chart-base
author: liubin
date: 2024-04-10 08:59:28
description:
description:
-->
<template>
@@ -19,7 +12,7 @@
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }"
>{{ item.label }}</span
>
</div>
@@ -65,38 +58,13 @@ export default {
isFullscreen: false,
options: {
grid: {
left: "5%",
left: "3%",
right: "4%",
bottom: "0",
top: "18%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// console.log(item.color, color);
res +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
tooltip: {},
xAxis: {
axisTick: {
show: false,
@@ -108,24 +76,22 @@ export default {
},
axisLabel: {
color: "#fff",
fontSize: 14,
fontSize: 12,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 14,
align: 'right'
fontSize: 12,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 14,
fontSize: 12,
},
axisLine: {
show: true,
@@ -149,30 +115,30 @@ export default {
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#f3c000", // 0% 处的颜色
},
{
offset: 0.55,
color: "#f3c00033",
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
data: [], // this.series[0].data,
},
{
@@ -253,9 +219,9 @@ export default {
this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initOptions(this.actualOptions);
},
series(val) {

View File

@@ -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" },

View File

@@ -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%);
// 在这里设置一个总的字体大小 不失为一个好的选择

View File

@@ -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
@@ -105,7 +105,7 @@ export default {
.container-head {
// height: 40px;
height:4vh;
height: 3.8vh;
padding: 8px;
display: flex;
align-items: center;

View File

@@ -1,18 +1,18 @@
<template>
<div class="dashboard-factory-all">
<div id="map-container">
<!-- <div v-if="visible" class="cdLine"></div> -->
<!-- <div v-if="visible" class="zzLine"></div> -->
<!-- <div v-if="visible" class="rcLine"></div> -->
<!-- <div v-if="visible" class="rcLineTwo"></div> -->
<!-- <div v-if="visible" class="hdLine"></div> -->
<!-- <div v-if="visible" class="hdLineTwo"></div> -->
<!-- <div v-if="visible" class="ksLine"></div> -->
<!-- <div v-if="visible" class="bbLine"></div> -->
<!-- <div v-if="visible" class="bbLineTwo"></div> -->
<!-- <div v-if="visible" class="bbLineThree"></div> -->
<!-- <div v-if="visible" class="jmsLine"></div> -->
<!-- <div v-if="visible" class="jmsLineTwo"></div> -->
<div v-if="visible" class="cdLine"></div>
<div v-if="visible" class="zzLine"></div>
<div v-if="visible" class="rcLine"></div>
<div v-if="visible" class="rcLineTwo"></div>
<div v-if="visible" class="hdLine"></div>
<div v-if="visible" class="hdLineTwo"></div>
<div v-if="visible" class="ksLine"></div>
<div v-if="visible" class="bbLine"></div>
<div v-if="visible" class="bbLineTwo"></div>
<div v-if="visible" class="bbLineThree"></div>
<div v-if="visible" class="jmsLine"></div>
<div v-if="visible" class="jmsLineTwo"></div>
<div class="databoard">
<db-header class="db-header"></db-header>
<div class="db-body">
@@ -39,12 +39,12 @@
</div>
</div>
<company-info v-if="visible" :info="info" :position="rcHintPosition" />
<!-- <ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" /> -->
<!-- <jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" /> -->
<ks-company-info v-if="visible" :info="ksInfo" :position="ksHintPosition" />
<jms-company-info v-if="visible" :info="jmsInfo" :position="jmsHintPosition" />
<hd-company-info v-if="visible" :info="hdInfo" :position="hdHintPosition" />
<!-- <bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" /> -->
<!-- <cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" /> -->
<!-- <zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" /> -->
<bb-company-info v-if="visible" :info="bbInfo" :position="bbHintPosition" />
<cd-company-info v-if="visible" :info="cdInfo" :position="cdHintPosition" />
<zz-company-info v-if="visible" :info="zzInfo" :position="zzHintPosition" />
</div>
</template>
@@ -61,25 +61,21 @@ import StdChart from "./dashboard/charts/StdChart.vue";
const LOCATIONS = [
// 佳木斯
// { x: 67, y: 20, tx: 60, ty: 29, path: 'factoryData/jmsIndex' },
{ x: 67, y: 20, tx: 60, ty: 29, path: 'copilot/jmsIndex' },
// 成都
// { x: 46, y: 56, tx: 46, ty: 93, path: 'factoryData/cdIndex' },
{ x: 46, y: 56,tx:46,ty:93, path: 'copilot/cdIndex' },
// 蚌埠1
// { x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'factoryData/bbIndex' },
{ x: 60, y: 52, tx: 35.5, ty: 48.3, path: 'copilot/bbIndex' },
// 蚌埠2
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
{ x: 61, y: 53,tx:39,ty:68, path: 'copilot/ksIndex' },
// 江西 瑞昌
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
{ x: 60, y: 58, tx: 68, ty: 52, path: 'copilot/factory-data' },
// 湖南 株洲
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
{ x: 56, y: 60, tx: 60, ty: 95, path: 'copilot/zzIndex' },
// 邯郸
{ x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
{ x: 58, y: 45, tx: 47, ty: 34, path: 'copilot/hdIndex' },
];
// rcLine.style.left = `66.8%`;
// rcLine.style.top = `52%`;
// rcLineTwo.className = "rcLineTwo";
// rcLineTwo.style.left = `58.7%`;
// rcLineTwo.style.top = `34%`;
export default {
name: "Index",
components: {
@@ -217,51 +213,39 @@ export default {
{ label: "标准组件产出", value: 0 }, // Math.floor(Math.random() * 1000000) },
],
};
if
// (position === LOCATIONS[0]) {
// templateInfo.companyName = "佳木斯中建材";
// this.jmsHintPosition = position;
// templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
// templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
// templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
// templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
// this.jmsInfo = templateInfo;
// } else if (position === LOCATIONS[1]) {
// this.cdHintPosition = position;
// templateInfo.companyName = "成都中建材";
// templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
// templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
// templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
// templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
// this.cdInfo = templateInfo;
// } else if (position === LOCATIONS[2]) {
// this.bbHintPosition = position;
// templateInfo.companyName = "蚌埠兴科";
// templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
// templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
// templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
// templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
// this.bbInfo = templateInfo;
// } else if (position === LOCATIONS[3]) {
// this.ksHintPosition = position;
// templateInfo.companyName = "凯盛光伏";
// templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
// templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
// templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
// templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
// this.ksInfo = templateInfo;
// }
(position === LOCATIONS[0]) {
const rcLine = document.createElement("div");
const rcLineTwo = document.createElement("div");
rcLine.className = "rcLine";
rcLine.style.left = `${position.lx}%`;
rcLine.style.top = `${position.ly}%`;
rcLineTwo.className = "rcLineTwo";
rcLineTwo.style.left = `${position.ltx}%`;
rcLineTwo.style.top = `${position.lty}%`;
document.getElementById("map-container").appendChild(rcLine);
document.getElementById("map-container").appendChild(rcLineTwo);
if (position === LOCATIONS[0]) {
templateInfo.companyName = "佳木斯中建材";
this.jmsHintPosition = position;
templateInfo.items[0].value = this.homeStore.ftoInvest.current[3];
templateInfo.items[2].value = this.homeStore.chipInvest.current[3];
templateInfo.items[1].value = this.homeStore.chipOutput.current[3];
templateInfo.items[3].value = this.homeStore.stdOutput.current[3];
this.jmsInfo = templateInfo;
} else if (position === LOCATIONS[1]) {
this.cdHintPosition = position;
templateInfo.companyName = "成都中建材";
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[4];
templateInfo.items[2].value = this.homeStore.chipInvest.current[4];
templateInfo.items[1].value = this.homeStore.chipOutput.current[4];
templateInfo.items[3].value = this.homeStore.stdOutput.current[4];
this.cdInfo = templateInfo;
} else if (position === LOCATIONS[2]) {
this.bbHintPosition = position;
templateInfo.companyName = "蚌埠兴科";
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[6];
templateInfo.items[2].value = this.homeStore.chipInvest.current[6];
templateInfo.items[1].value = this.homeStore.chipOutput?.current[6];
templateInfo.items[3].value = this.homeStore.stdOutput.current[6];
this.bbInfo = templateInfo;
} else if (position === LOCATIONS[3]) {
this.ksHintPosition = position;
templateInfo.companyName = "凯盛光伏";
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[5];
templateInfo.items[2].value = this.homeStore.chipInvest.current[5];
templateInfo.items[1].value = this.homeStore.chipOutput.current[5];
templateInfo.items[3].value = this.homeStore.stdOutput.current[5];
this.ksInfo = templateInfo;
} else if (position === LOCATIONS[4]) {
this.rcHintPosition = position;
templateInfo.companyName = "瑞昌中建材";
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[0];
@@ -269,25 +253,15 @@ export default {
templateInfo.items[1].value = this.homeStore.chipOutput.current[0];
templateInfo.items[3].value = this.homeStore.stdOutput.current[0];
this.info = templateInfo;
// } else if (position === LOCATIONS[5]) {
// this.zzHintPosition = position;
// templateInfo.companyName = "株洲中建材";
// templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
// templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
// templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
// templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
// this.zzInfo = templateInfo;
} else if (position === LOCATIONS[1]) {
const hdLine = document.createElement("div");
const hdLineTwo = document.createElement("div");
hdLine.className = "hdLine";
hdLine.style.left = `${position.lx}%`;
hdLine.style.top = `${position.ly}%`;
hdLineTwo.className = "hdLineTwo";
hdLineTwo.style.left = `${position.ltx}%`;
hdLineTwo.style.top = `${position.lty}%`;
document.getElementById("map-container").appendChild(hdLine);
document.getElementById("map-container").appendChild(hdLineTwo);
} else if (position === LOCATIONS[5]) {
this.zzHintPosition = position;
templateInfo.companyName = "株洲中建材";
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[2];
templateInfo.items[2].value = this.homeStore.chipInvest.current[2];
templateInfo.items[1].value = this.homeStore.chipOutput.current[2];
templateInfo.items[3].value = this.homeStore.stdOutput.current[2];
this.zzInfo = templateInfo;
} else if (position === LOCATIONS[6]) {
this.hdHintPosition = position;
templateInfo.companyName = "邯郸中建材";
templateInfo.items[0].value = this.homeStore.ftoInvest?.current[1];
@@ -374,40 +348,40 @@ export default {
.rcLine {
display: inline-block;
position: absolute;
/* left: 61%; */
width: 7.9vw;
/* top: 61.5%; */
left: 61%;
width: 100px;
top: 61.5%;
/* x: 60, y: 58, */
height: 1px;
height: 1px;
border: 2px dashed #FFCF00;
}
.rcLineTwo {
position: absolute;
/* left: 66.8%; */
left: 66.8%;
width: 1px;
/* top: 52%; */
top: 52%;
display: inline-block;
/* // x: 60, y: 58, */
height: 5vw;
height: 90px;
border: 2px dashed #FFCF00;
}
.hdLine {
position: absolute;
/* left: 58.7%; */
left: 58.7%;
width: 1px;
/* top: 34%; */
top: 34%;
display: inline-block;
/* // x: 60, y: 58, */
height: 6vw;
height: 100px;
border: 2px dashed #FFCF00;
}
.hdLineTwo {
position: absolute;
/* left: 53%; */
width: 5vw;
/* top: 34%; */
left: 53%;
width: 90px;
top: 34%;
display: inline-block;
/* // x: 60, y: 58, */
height: 1px;

View File

@@ -10,7 +10,7 @@
style="
position: absolute;
top: 12%;
left: 15%;
left: 20%;
user-select: none;
display: flex;
flex-direction: column;
@@ -31,7 +31,7 @@
<p
style="
margin: 0;
font-size: 24px;
font-size: 26px;
letter-spacing: 1px;
color: #26b9de;
opacity: 75%;
@@ -52,8 +52,8 @@
</p>
</div>
<img
src="../assets/images/map.png"
style="position: absolute; top: 00%; left: 11%; width: 50vw"
src="../assets/images/login.png"
style="position: absolute; top: 30%; left: 15%; width: 40vw"
alt=""
/>
</div>
@@ -218,7 +218,7 @@ export default {
data() {
return {
codeUrl: "",
captchaEnable: false,
captchaEnable: true,
tenantEnable: true,
mobileCodeTimer: 0,
loginForm: {

View File

@@ -1,12 +1,12 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-26 13:39:22
* @LastEditTime: 2024-05-20 18:02:10
* @LastEditors: DY
* @Description:
-->
<template>
<el-drawer class="drawer" :visible.sync="visible" size="65%" @closed="$emit('destroy')">
<el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')">
<small-title slot="title" :no-padding="true">
{{ '碲化镉工厂生产数据详情' }}
</small-title>
@@ -14,160 +14,142 @@
<el-row :gutter="24">
<el-col :span="8">
<p class="title">工厂名称</p>
<p class="text">{{ factoryList[dataForm.factory] }}</p>
<p class="text">{{ dataForm.factory }}</p>
</el-col>
<el-col :span="8">
<p class="title">时间维度</p>
<p class="text">{{ ['日', '周', '月', '年'][date] }}</p>
<p class="text">{{ date }}</p>
</el-col>
<el-col :span="8">
<p class="title">时间</p>
<p class="text">{{ dataForm.datestr }}</p>
<p class="text">{{ dataForm.reportDate.length > 0 ? dataForm.reportDate[0] + '年' + dataForm.reportDate[1] + '月' + dataForm.reportDate[2] + '日' : '' }}</p>
</el-col>
</el-row>
<el-divider></el-divider>
<div v-if="glass === 0">
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
{{ '芯片' }}
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">芯片产量()</p>
<p class="text">{{ dataForm.chipYieldSum }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片良率(%)</p>
<p class="text">{{ dataForm.chipYieldRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片BOM</p>
<p class="text">{{ dataForm.chipBom }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片总功率(MW)</p>
<p class="text">{{ dataForm.chipTotalPower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">FTO投入量()</p>
<p class="text">{{ dataForm.ftoInput }}</p>
</el-col>
<el-col :span="6">
<p class="title">CSS稼动率(%)</p>
<p class="text">{{ dataForm.chipCssMarriageRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片段OEE(%)</p>
<p class="text">{{ dataForm.chipOee }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片平均功率(W)</p>
<p class="text">{{ dataForm.chipAveragePower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">芯片人均产量(/)</p>
<p class="text">{{ dataForm.chipAnnualAverageProduction }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片产能利用率(%)</p>
<p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p>
</el-col>
</el-row>
</div>
<div v-if="glass === 1">
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
{{ '标准组件' }}
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">封装BOM</p>
<p class="text">{{ dataForm.componentBom }}</p>
</el-col>
<el-col :span="6">
<p class="title">封装线OEE(%)</p>
<p class="text">{{ dataForm.componentOee }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件良率(%)</p>
<p class="text">{{ dataForm.componentYieldRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件产量()</p>
<p class="text">{{ dataForm.componentYield }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">标准组件总功率(MW)</p>
<p class="text">{{ dataForm.componentTotalPower }}</p>
</el-col>
<el-col :span="6">
<p class="title">封装产能利用率(%)</p>
<p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件人均产量(/)</p>
<p class="text">{{ dataForm.componentAnnualAverageProduction }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件平均功率(W)</p>
<p class="text">{{ dataForm.componentAveragePower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">标准组件转化效率</p>
<p class="text">{{ dataForm.componentTransRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片投入</p>
<p class="text">{{ dataForm.chipInput }}</p>
</el-col>
</el-row>
</div>
<div v-if="glass === 2">
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
{{ 'BIPV产品' }}
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">产品产量()</p>
<p class="text">{{ dataForm.bipvProductOutput }}</p>
</el-col>
<el-col :span="6">
<p class="title">人均产量(/)</p>
<p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片使用量()</p>
<p class="text">{{ dataForm.bipvChipUsage }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片利用率(%)</p>
<p class="text">{{ dataForm.bipvChipUtilizationRate }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">内部材料成本(/)</p>
<p class="text">{{ dataForm.bipvInsideMaterialCost }}</p>
</el-col>
<el-col :span="6">
<p class="title">OEM及委外材料成本(/)</p>
<p class="text">{{ dataForm.code }}</p>
</el-col>
<el-col :span="6">
<p class="title">综合材料成本(/)</p>
<p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p>
</el-col>
</el-row>
</div>
<div v-if="glass === 4">
<!-- 铜铟镓硒待完成 -->
</div>
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
{{ '芯片' }}
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">芯片产量</p>
<p class="text">{{ }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片良率</p>
<p class="text">{{ dataForm.yieldRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片BOM</p>
<p class="text">{{ dataForm.bom }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片总功率</p>
<p class="text">{{ dataForm.totalPower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">FTO投入量</p>
<p class="text">{{ dataForm.chipInput }}</p>
</el-col>
<el-col :span="6">
<p class="title">CSS稼动率</p>
<p class="text">{{ dataForm.marriageRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片段OEE</p>
<p class="text">{{ dataForm.oee }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片平均功率</p>
<p class="text">{{ dataForm.averagePower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">芯片人均产量</p>
<p class="text">{{ dataForm.annualAverageProduction }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片产能利用率</p>
<p class="text">{{ dataForm.capacityUtilizationRate }}</p>
</el-col>
</el-row>
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
{{ '标准组件' }}
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">封装BOM</p>
<!-- 没参数 -->
<!-- <p class="text">{{ dataForm.bom }}</p> -->
</el-col>
<el-col :span="6">
<p class="title">封装线OEE</p>
<!-- <p class="text">{{ dataForm.code }}</p> -->
</el-col>
<el-col :span="6">
<p class="title">标准组件良率</p>
<!-- <p class="text">{{ dataForm.productName }}</p> -->
</el-col>
<el-col :span="6">
<p class="title">标准组件产量</p>
<!-- <p class="text">{{ dataForm.productName }}</p> -->
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">标准组件总功率</p>
<p class="text">{{ }}</p>
</el-col>
<el-col :span="6">
<p class="title">封装产能利用率</p>
<!-- <p class="text">{{ dataForm.code }}</p> -->
</el-col>
<el-col :span="6">
<p class="title">标准组件人均产量</p>
<!-- <p class="text">{{ dataForm.productName }}</p> -->
</el-col>
<el-col :span="6">
<p class="title">标准组件平均功率</p>
<!-- <p class="text">{{ dataForm.productName }}</p> -->
</el-col>
</el-row>
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
{{ 'BIPV产品' }}
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">产品产量</p>
<p class="text">{{ }}</p>
</el-col>
<el-col :span="6">
<p class="title">人均产量</p>
<p class="text">{{ dataForm.code }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片使用量</p>
<p class="text">{{ dataForm.productName }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片使用量</p>
<p class="text">{{ dataForm.productName }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">内部材料成本</p>
<p class="text">{{ }}</p>
</el-col>
<el-col :span="6">
<p class="title">内部材料成本</p>
<p class="text">{{ dataForm.code }}</p>
</el-col>
<el-col :span="6">
<p class="title">内部材料成本</p>
<p class="text">{{ dataForm.productName }}</p>
</el-col>
</el-row>
</div>
</el-drawer>
@@ -175,18 +157,24 @@
<script>
// import basicAdd from './basic-add';
import { getProduceDataDetail } from "@/api/produceData";
import {
getProduceDataDetail
} from "@/api/produceData";
// import { getList, } from "@/api/base/qualityScrapType";
import SmallTitle from './SmallTitle';
import { factoryList } from "@/utils/constants";
export default {
components: {
SmallTitle,
},
// mixins: [basicAdd],
props: {
date: {
type: Number,
default: 0
}
},
data() {
return {
factoryList,
urlOptions: {
isGetCode: false,
// codeURL: getCode,
@@ -210,8 +198,6 @@ export default {
}
],
sectionList: [],
glass: 0,
date: 0,
visible: false,
dataForm: {
id: undefined,
@@ -243,16 +229,11 @@ export default {
// this.getCurrentTime()
},
methods: {
init(id, type, glass) {
init(id) {
this.visible = true
this.glass = glass
this.date = type
console.log('打印', id, glass)
console.log('打印', id)
if (id) {
getProduceDataDetail({
id: id,
type: type
}).then(res => {
getProduceDataDetail(id).then(res => {
this.dataForm = res.data
console.log('你好', res.data)
})
@@ -369,6 +350,7 @@ export default {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
margin-bottom: 30px;
}
.detailBox p {
margin: 0;
@@ -392,9 +374,5 @@ export default {
color: rgba(102,102,102,0.75);
padding-bottom: 20px;
}
.detailBox {
width: 98%;
padding-top: 30px;
}
</style>

View File

@@ -1,26 +1,26 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-02 16:33:59
* @LastEditTime: 2024-05-22 15:25:11
* @LastEditors: DY
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 200px - 31px)">
<div class="app-container" style="padding: 16px 24px 0; height: auto; flex-grow: 1;">
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
<div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item label="时间维度" prop="type">
<el-select v-model="listQuery.type" size="small" clearable placeholder="请选择">
<el-form-item label="时间维度" prop="date">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ }">
<el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" value-format="timestamp" @change="changeDayTime" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
<el-form-item v-show="listQuery.date === 1" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
@@ -28,27 +28,27 @@
<el-date-picker size="small" clearable v-model="listQuery.end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<!-- <span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
<span v-if="listQuery.start && listQuery.end" style="margin-left: 10px">
{{ date1 }} {{ date2 }} {{ weekNum }}
</span> -->
</span>
</el-form-item>
<el-form-item v-show="listQuery.type === 2" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="yyyy-MM-dd" range-separator="至"
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至"
start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.type === 3" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.start" value-format="yyyy-MM-dd" type="year"
<el-form-item v-show="listQuery.date === 3" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.start" format="yyyy-MM-dd" value-format="timestamp" type="year"
placeholder="开始时间">
</el-date-picker>
~
<el-date-picker size="small" clearable v-model="listQuery.end" value-format="yyyy-MM-dd" type="year" placeholder="结束时间"
<el-date-picker size="small" clearable v-model="listQuery.end" format="yyyy-MM-dd" value-format="timestamp" type="year" placeholder="结束时间"
@change="getYear">
</el-date-picker>
</el-form-item>
<el-form-item label="工厂名称" prop="factory">
<el-select size="small" clearable v-model="listQuery.factory" placeholder="请选择工厂名称" multiple >
<el-option v-for="item in factoryArray" :key="item.id" :label="item.name" :value="item.id">
<el-form-item label="工厂名称" prop="factorys">
<el-select size="small" clearable v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple >
<el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
@@ -58,8 +58,8 @@
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="玻璃类型" prop="glass">
<el-select size="small" clearable v-model="listQuery.glass" multiple placeholder="请选择玻璃类型">
<el-form-item label="玻璃类型" prop="type">
<el-select size="small" clearable v-model="listQuery.type" placeholder="请选择玻璃类型">
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
@@ -74,7 +74,7 @@
<!-- <el-row :gutter="24"> -->
<!-- <el-col :span="12" v-for="item in dataList" :key="item.id"> -->
<search-bar :formConfigs="formConfig1" ref="searchBarForm1" style="margin-bottom: 0" />
<line-chart ref="lineChart" class="yearChart" style="height: 45vh;width: 100%"></line-chart>
<line-chart class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
<!-- </el-col> -->
<!-- <el-col :span="12">
<line-chart :id=" 'second' " class="yearChart" ref="lineChart" style="height: 40vh;width: 100%"></line-chart>
@@ -82,19 +82,19 @@
</div>
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto; padding: 16px;">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" style="margin-bottom: 0" />
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData" :max-height="tableH">
<base-table :table-props="tableProps" :page="listQuery.current" :limit="listQuery.size"
:table-data="tableData">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:limit.sync="listQuery.size"
:page.sync="listQuery.current"
:total="listQuery.total"
@pagination="getDataList"
/>
</div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
<!-- <pagination
@@ -106,38 +106,35 @@
</template>
<script>
// import { parseTime } from "@/utils/ruoyi";
import tableHeightMixin from "@/mixins/tableHeightMixin";
import { getProduceDataPage, getproddata, exportOutPutExcel } from '@/api/produceData';
// import { parseTime } from '../../core/mixins/code-filter';
import { getProduceDataPage, exportOutPutExcel } from '@/api/produceData';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment'
import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata'
import { factoryList, factoryArray, factoryArray1 } from "@/utils/constants";
import AddOrUpdate from './add-or-updata';
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { lineChart, ButtonNav, AddOrUpdate },
mixins: [basicPage, tableHeightMixin],
mixins: [basicPage],
data() {
return {
factoryList,
factoryArray,
factoryArray1,
listQuery: {
pageSize: 20,
pageNo: 1,
factory: undefined,
size: 20,
current: 1,
factorys: [],
total: 0,
type: 0, // 时间维度
glass: undefined, // 玻璃类型
date: 1,
type:undefined,
// reportType: 2,
startDate: undefined,
endDate:undefined,
reportTime: null,
start: null,
end: null
beginTime: undefined,
endTime:undefined,
reportTime: [],
start: undefined,
end: undefined
},
detailOrUpdateVisible:false,
date1: undefined,
@@ -154,7 +151,7 @@ export default {
].filter((v) => v),
typeList: [
{
name: '玻璃芯片',
name: '芯片',
id: 0,
},
{
@@ -165,11 +162,32 @@ export default {
name: 'BIPV产品',
id: 2,
},
// {
// name: '定制组件',
// id: 3,
// },
],
// weekNum: undefined,
dataList: [
{
id:'first',
},
{
id: 'second',
},
{
id: 'third',
},
{
id: 'fourth',
},
{
id: 'fifth',
},
{
id: 'sixth',
},
],
urlOptions: {
// getDataListURL: getGlassPage,
// exportURL: exportGlasscExcel
},
formConfig: [
{
type: 'title',
@@ -200,18 +218,48 @@ export default {
label: '年'
}
],
factoryList: [
{
name: '瑞昌中建材光电材料有限公司',
id: 0
},
{
name: '邯郸中建材光电材料有限公司',
id: 1
},
{
name: '中建材株洲光电材料有限公司',
id: 2
},
{
name: '佳木斯中建材光电材料有限公司',
id: 3
},
{
name: '成都中建材光电材料有限公司',
id: 4
},
{
name: '凯盛光伏材料有限公司',
id: 5
},
{
name: '蚌埠兴科玻璃有限公司',
id: 6
}
],
tableProps: [
{
prop: 'datestr',
prop: 'tableTime',
label: '日期',
minWidth: 120,
minWidth: 100,
showOverflowtooltip: true
},
{
prop: 'factory',
label: '工厂名称',
filter: (val) => factoryList[val],
minWidth: 180,
filter: (val) => ['瑞昌中建材光电材料有限公司', '邯郸中建材光电材料有限公司', '中建材株洲光电材料有限公司', '佳木斯中建材光电材料有限公司', '成都中建材光电材料有限公司', '凯盛光伏材料有限公司', '蚌埠兴科玻璃有限公司'][val],
minWidth: 200,
showOverflowtooltip: true
},
{
@@ -220,54 +268,47 @@ export default {
filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
},
{
prop: 'inputNum',
prop: 'inputNumber',
label: '投入数量',
},
{
prop: 'outputNum',
prop: 'outputNumber',
label: '产出数量',
},
{
prop: 'goodNum',
prop: 'goodNumber',
label: '良品数量',
},
{
prop: 'goodRatio',
prop: 'yieldRate',
label: '良品率%',
filter: (val) => val.toFixed(2) + '%'
},
],
tableData: [],
lineData: [],
chart: null,
seriesList: [],
colorList: ['#7164FF', '#63BDFF', '#8EF0AB', '#FFCE6A']
xAxis: []
// proLineList: [],
// all: {}
};
},
// computed: {
// weekNum() {
// return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1
// },
// },
created() {
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (7 * 24 * 60 * 60 * 1000))
this.listQuery.startDate = moment(sevenDaysAgo).format('yyyy-MM-DD')
this.listQuery.endDate = moment(today).format('yyyy-MM-DD')
this.listQuery.reportTime = [this.listQuery.startDate, this.listQuery.endDate]
},
computed: {
weekNum() {
return Math.round((this.listQuery.end - this.listQuery.start) / (24 * 60 * 60 * 1000 * 7)) + 1
},
},
mounted() {
this.getDataList()
},
methods: {
otherMethods(val) {
this.detailOrUpdateVisible = true;
this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id, this.listQuery.type, val.data.glassType);
this.$refs.detailOrUpdate.init(val.data.id);
});
},
// buttonClick() {
// },
getYear(e) {
if (this.listQuery.end - this.listQuery.start > 10*365*24*60*60*1000) {
this.$message({
@@ -279,16 +320,13 @@ export default {
this.listQuery.end = undefined
// console.log();
} else {
this.listQuery.startDate = this.listQuery.start
this.listQuery.endDate = this.listQuery.end
}
if (!this.listQuery.start && !this.listQuery.end) {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
this.listQuery.beginTime = this.listQuery.start
this.listQuery.endTime = this.listQuery.end
}
// console.log(e);
},
onValueChange(picker, k) { // 选中近k周后触发的操作
// console.log(this.listQuery.reportTime[0], this.listQuery.reportTime[1])
if (this.listQuery.start && this.listQuery.end) {
console.log(this.listQuery.reportTime)
this.date1 = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
@@ -301,14 +339,10 @@ export default {
type: 'warning'
});
} else {
this.listQuery.startDate = moment(this.listQuery.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
this.listQuery.endDate = moment(this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
this.listQuery.beginTime = this.listQuery.start.getTime() - 24 * 60 * 60 * 1000
this.listQuery.endTime = this.listQuery.end.getTime() + 5 * 24 * 60 * 60 * 1000
}
}
if (!this.listQuery.start && !this.listQuery.end) {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
}
},
changeDayTime() {
if (this.listQuery.reportTime) {
@@ -323,12 +357,10 @@ export default {
});
this.listQuery.reportTime = [];
} else {
this.listQuery.startDate = this.listQuery.reportTime[0]
this.listQuery.endDate = this.listQuery.reportTime[1]
this.listQuery.beginTime = this.listQuery.reportTime[0]
this.listQuery.endTime = this.listQuery.reportTime[1]
}
} else {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
}
},
changeTime(value) {
@@ -341,142 +373,89 @@ export default {
});
this.listQuery.reportTime = [];
} else {
this.listQuery.startDate = this.listQuery.reportTime[0]
this.listQuery.endDate = this.listQuery.reportTime[1]
this.listQuery.beginTime = this.listQuery.reportTime[0]
this.listQuery.endTime = this.listQuery.reportTime[1]
}
} else {
this.listQuery.startDate = undefined
this.listQuery.endDate = undefined
console.log(this.listQuery.reportTime[0])
}
},
// async getDict() {
// 产线列表
// const res = await getCorePLList();
// this.proLineList = res.data;
// },
// 获取数据列表
multipliedByHundred(str) {
console.log(str);
// console.log(str)
if ( str != 0) {
let floatVal = parseFloat(str);
if (isNaN(floatVal)) {
return 0;
}
floatVal = Math.round(str * 10000) / 100;
let strVal = floatVal.toString();
let searchVal = strVal.indexOf('.');
if (searchVal < 0) {
searchVal = strVal.length;
strVal += '.';
}
while (strVal.length <= searchVal + 2) {
strVal += '0';
}
return parseFloat(strVal);
}
},
async getDataList() {
if (this.listQuery.type === '') {
this.$message.warning('请选择时间维度!')
return
}
if (this.listQuery.startDate === undefined) {
this.$message.warning('请选择时间范围!')
} else {
await getProduceDataPage(this.listQuery).then(res => {
console.log(res)
if (res.code === 0) {
this.tableData = res.data.records
this.listQuery.total = res.data.total
}
})
// 图表
await getproddata(this.listQuery).then(resp => {
if (resp.data?.length > 0) {
const chartData = Object.groupBy(resp.data, (member) => member.datestr)
this.buildChart(chartData, resp.data)
} else {
this.$refs.lineChart.initChart([], [])
}
})
}
},
buildChart(data, dataList) {
let xAxisData = []
this.seriesList = []
// x轴数据
xAxisData = Object.keys(data)
// y轴数据
this.factoryArray.forEach(fac => {
let i = 0
while ( i < 3) {
// 下标
const index1 = ['chipYield', 'componentYield', 'bipvProductOutput'][i]
// let oneChart = {}
xAxisData.forEach((x, index) => {
if (this.listQuery.glass.length === 0 || this.listQuery.glass.length === 3) {
let series = {
name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
type: 'bar',
stack: String(fac.id),
data: Array(xAxisData.length).fill(0),
barWidth: 20,
itemStyle: {
color: this.colorList[i]
},
label: {
show: i === 2 ? true : false,
position: 'top',
formatter(params) {
return fac.name.substring(0, 2)
}
}
}
dataList.forEach(item => {
if (fac.id === item.factory && item.datestr === x) {
series.data[index] = item[index1]
}
})
this.seriesList.push(series)
} else {
this.listQuery.glass.forEach(gl => {
if (gl === i) {
let series = {
name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
type: 'bar',
stack: String(fac.id),
data: Array(xAxisData.length).fill(0),
barWidth: 20,
itemStyle: {
color: this.colorList[i]
},
label: {
show: true,
position: 'top',
formatter(params) {
if (params.value === 0) {
return ''
} else {
// return ['瑞昌', '邯郸'][params.seriesName.split('-')[1]]
return fac.name.substring(0, 2)
}
}
}
}
dataList.forEach(item => {
if (fac.id === item.factory && item.datestr === x) {
series.data[index] = item[index1]
}
})
this.seriesList.push(series)
}
})
}
// let series = {
// name: ['玻璃芯片', '标准组件', 'BIPV'][i] + '-' + fac.id,
// type: 'bar',
// stack: String(fac.id),
// data: Array(xAxisData.length).fill(0),
// barWidth: 20,
// itemStyle: {
// color: this.colorList[i]
// }
// }
// dataList.forEach(item => {
// if (fac.id === item.factory && item.datestr === x) {
// series.data[index] = item[index1]
// }
// })
// this.seriesList.push(series)
})
i ++
}
const res = await getProduceDataPage(this.listQuery)
console.log(res)
this.tableData = res.data.records
this.tableData.forEach(item => {
item.tableTime = item?.reportDate?.length > 0 ? item.reportDate[0] + '-' + item.reportDate[1] + '-' + item.reportDate[2] : '--'
})
console.log('你好', this.seriesList)
this.$refs.lineChart.initChart(xAxisData, this.seriesList)
this.listQuery.total = res.data.total
this.buildChart(this.tableData)
},
buildChart(list) {
const chartList = Object.groupBy(list, (item) => item.tableTime)
this.xAxis = []
this.seriesList = []
for (const keyIndex in chartList) {
// X坐标轴数据
this.xAxis.push(keyIndex)
}
// y轴数据
for (const y of this.factoryList) {
// y: {name: , id: }
const seriesItem = {
name: y.name,
type: 'bar',
emphasis: {
focus: 'series'
},
data: Array(this.xAxis.length).fill(0)
}
for (const a in chartList) {
for (const z of chartList[a]) {
this.xAxis.forEach((item, index) => {
if (z.factory === y.id && a === item) {
seriesItem.data[index] = z.goodNumber
}
})
}
}
this.seriesList.push(seriesItem)
}
this.$refs.lineChart.initChart(this.xAxis, this.seriesList)
},
buttonClick(val) {
this.listQuery.reportTime = val.reportTime ? val.reportTime : undefined;
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 20;
this.listQuery.current = 1;
this.listQuery.size = 20;
this.getDataList();
break;
case 'export':
@@ -491,8 +470,8 @@ export default {
this.$modal.confirm('是否确认导出生产数据?').then(() => {
// 处理查询参数
let params = {...this.listQuery};
params.pageNo = 1;
params.pageSize = 999;
params.current = 1;
params.size = 999;
this.exportLoading = true;
return exportOutPutExcel(params);
}).then(response => {
@@ -535,23 +514,11 @@ export default {
};
</script>
<style>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .blueTi */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before{
display: inline-block;
content: '';

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: DY
* @LastEditTime: 2024-07-01 16:54:41
* @LastEditTime: 2024-05-22 13:48:58
* @Description:
-->
<template>
@@ -16,8 +16,6 @@
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from '@/mixins/resize'
import { factoryListabbr } from "@/utils/constants";
export default {
name: 'OverviewBar',
mixins: [resize],
@@ -40,7 +38,7 @@ export default {
},
height: {
type: String,
default: '35vh'
default: '30vh'
},
legendPosition: {
type: String,
@@ -74,112 +72,63 @@ export default {
},
methods: {
initChart(xAxis, seriesList) {
if (xAxis.length === 0) {
this.chart.clear()
}
else {
this.chart = echarts.init(document.getElementById(this.id))
console.log(this.$parent);
this.chart.setOption({
this.chart = echarts.init(document.getElementById(this.id))
console.log(this.$parent);
this.chart.setOption({
title: {
text: '',
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'axis'
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
legend: {
// data: ['工厂1', '工厂2'],
right: '90px',
top: '0%',
icon: 'rect',
itemWidth: 10,
itemHeight: 10,
itemGap: 40,
formatter(name) {
return name.split('-')[0]
},
data: ['玻璃芯片-0', '标准组件-0', 'BIPV-0']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
color: "rgba(237,237,237,0.5)"
},
formatter: function(params) {
let result = `
<div style="width: 270px; display: flex">
<div style="width: 150px">${params[0].name}</div>
<div style="width: 60px; text-align: right">${factoryListabbr[0]}</div>
<div style="width: 60px; text-align: right">${factoryListabbr[1]}</div>
</div>`
const newArray = params.map(p => {
console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
return {
glass: p.seriesName.split('-')[0], // 玻璃类型
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
value: p.value,
name: p.name,
marker: p.marker,
color: p.color
}
})
const analyzeList = Object.groupBy(newArray, (member) => member.glass)
for (let g in analyzeList) {
// date => 玻璃类型
let oneData = `<div style="width: 270px; display: flex">
<div style="width: 150px; display: flex; align-items: center">
<div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
<div>${g}</div></div>`
for (let fac of factoryListabbr) {
let goodNum = 0
for (let ana of analyzeList[g]) {
if (ana.factoryName === fac && ana.value !== 0) {
goodNum = ana.value
}
}
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
}
result = result + oneData + '</div>'
}
return result
}
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
// toolbox: {
// show: true,
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
calculable: true,
xAxis: [
{
type: 'category',
name: '日期',
data: xAxis,
axisLabel: {
rotate: 25
}
// prettier-ignore
data: xAxis
}
],
yAxis: [
{
type: 'value',
name: '单位:片'
type: 'value'
}
],
grid: {
top: '10%',
left: "2%",
right: "5%",
bottom: "0%",
top: '20%',
left: "1%",
right: "3%",
bottom: "1%",
containLabel: true
},
series: seriesList
}, true)
}
}
}
}
</script>
<style scoped>
.chartTooltipSpan {
width: 50px;
background: #787878;
}
/* .reportChart {
position: absolute;
height: 100%;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-17 16:31:51
* @LastEditTime: 2024-06-24 15:43:50
* @LastEditTime: 2024-05-20 18:09:09
* @LastEditors: DY
* @Description:
-->
@@ -11,7 +11,7 @@
{{ dataForm.id ? '编辑' : '新增' }}
</small-title>
<div class="detailBox">
<el-form ref="form" :model="dataForm" label-width="80px" :rules="dataRule" label-position="top">
<el-form ref="form" :model="dataForm" label-width="80px" label-position="top">
<el-row :gutter="24" style="padding: 0 32px;">
<el-col :span="8">
<el-form-item v-if="ftype === 0" label="工厂名称" prop="factory">
@@ -31,28 +31,18 @@
<el-form-item label="时间维度" prop="targetType">
<el-select v-model="dataForm.targetType" placeholder="请选择时间维度" clearable @change="clearTime">
<!-- <el-option v-for="item in factoryList" :key="item.id" :label="item.name" :value="item.id"> -->
<el-option label="" :value="0" />
<el-option label="" :value="1" />
<el-option label="月" :value="2" />
<el-option label="年" :value="3" />
<el-option label="" :value="0" />
<el-option label="" :value="1" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item v-show="dataForm.targetType === 0 || dataForm.targetType === ''" label="时间" prop="reportTime">
<el-date-picker v-model="dataForm.reportTime" value-format="yyyyMMdd" type="date" placeholder="选择">
<el-form-item v-show="dataForm.targetType !== 1" label="时间" prop="reportTime">
<el-date-picker v-model="dataForm.reportTime" value-format="yyyy-MM" type="month" placeholder="选择月份">
</el-date-picker>
</el-form-item>
<el-form-item v-show="dataForm.targetType === 1" label="时间" prop="reportTime">
<el-date-picker v-model="week" type="week" format="yyyy 第 WW 周" placeholder="选择周" @change="setReportTime">
</el-date-picker>
</el-form-item>
<el-form-item v-show="dataForm.targetType === 2" label="时间" prop="reportTime">
<el-date-picker v-model="dataForm.reportTime" value-format="yyyyMM" type="month" placeholder="选择月份">
</el-date-picker>
</el-form-item>
<el-form-item v-show="dataForm.targetType === 3" label="时间" prop="reportTime">
<el-date-picker clearable v-model="dataForm.reportTime" value-format="yyyy" type="year" placeholder="开始时间">
<el-form-item v-show="dataForm.targetType === 1" label="时间" prop="targetYear">
<el-date-picker clearable v-model="dataForm.showYear" value-format="yyyy" type="year" placeholder="开始时间">
</el-date-picker>
</el-form-item>
</el-col>
@@ -63,12 +53,12 @@
</small-title>
<el-row :gutter="24" style="padding: 0 32px;">
<el-col :span="6">
<el-form-item label="芯片产量(片)" prop="chipYield">
<el-form-item label="芯片产量" prop="chipYield">
<el-input-number v-model="dataForm.chipYield" :precision="0" controls-position="right" placeholder="请输入芯片产量" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="芯片良率(%)" prop="chipYieldRate">
<el-form-item label="芯片良率" prop="chipYieldRate">
<el-input-number v-model="dataForm.chipYieldRate" :precision="2" :max="100" controls-position="right" placeholder="请输入芯片良率" style="width: 100%" />
</el-form-item>
</el-col>
@@ -78,47 +68,47 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="芯片总功率(MW)" prop="chipTotalPower">
<el-form-item label="芯片总功率" prop="chipTotalPower">
<el-input-number v-model="dataForm.chipTotalPower" :precision="2" controls-position="right" placeholder="请输入芯片总功率" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="padding: 0 32px;">
<el-col :span="6">
<el-form-item v-if="ftype === 0" label="FTO投入量(片)" prop="ftoInput">
<el-form-item v-if="ftype === 0" label="FTO投入量" prop="ftoInput">
<el-input-number v-model="dataForm.ftoInput" :precision="0" controls-position="right" placeholder="请输入FTO投入量" style="width: 100%" />
</el-form-item>
<el-form-item v-else label="钼电极投入量(片)" prop="molybdenumElectrodeInput">
<el-form-item v-else label="钼电极投入量" prop="molybdenumElectrodeInput">
<el-input-number v-model="dataForm.molybdenumElectrodeInput" :precision="0" controls-position="right" placeholder="请输入钼电极投入量" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item v-if="ftype === 0" label="CSS稼动率(%)" prop="chipCssMarriageRate">
<el-form-item v-if="ftype === 0" label="CSS稼动率" prop="chipCssMarriageRate">
<el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入CSS稼动率" style="width: 100%" />
</el-form-item>
<el-form-item v-else label="PID6稼动率(%)" prop="chipCssMarriageRate">
<el-form-item v-else label="PID6稼动率" prop="chipCssMarriageRate">
<el-input-number v-model="dataForm.chipCssMarriageRate" :precision="2" controls-position="right" placeholder="请输入PID6稼动率" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="芯片段OEE(%)" prop="chipOee">
<el-form-item label="芯片段OEE" prop="chipOee">
<el-input-number v-model="dataForm.chipOee" :precision="2" controls-position="right" placeholder="请输入芯片段OEE" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="芯片平均功率(W)" prop="chipAveragePower">
<el-form-item label="芯片平均功率" prop="chipAveragePower">
<el-input-number v-model="dataForm.chipAveragePower" :precision="2" controls-position="right" placeholder="请输入芯片平均功率" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="padding: 0 32px;">
<el-col :span="6">
<el-form-item label="芯片人均产量(片/人)" prop="chipAnnualAverageProduction">
<el-form-item label="芯片人均产量" prop="chipAnnualAverageProduction">
<el-input-number v-model="dataForm.chipAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入芯片人均产量" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="芯片产能利用率(%)" prop="chipCapacityUtilizationRate">
<el-form-item label="芯片产能利用率" prop="chipCapacityUtilizationRate">
<el-input-number v-model="dataForm.chipCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片产能利用率" style="width: 100%" />
</el-form-item>
</el-col>
@@ -134,47 +124,42 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="封装线OEE(%)" prop="componentOee">
<el-form-item label="封装线OEE" prop="componentOee">
<el-input-number v-model="dataForm.componentOee" :precision="2" controls-position="right" placeholder="请输入封装线OEE" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准组件良率(%)" prop="componentYieldRate">
<el-form-item label="标准组件良率" prop="componentYieldRate">
<el-input-number v-model="dataForm.componentYieldRate" :precision="2" controls-position="right" placeholder="请输入标准组件良率" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准组件产量(片)" prop="componentYield">
<el-form-item label="标准组件产量" prop="componentYield">
<el-input-number v-model="dataForm.componentYield" :precision="0" controls-position="right" placeholder="请输入标准组件产量" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="padding: 0 32px;">
<el-col :span="6">
<el-form-item label="标准组件总功率(MW)" prop="componentTotalPower">
<el-form-item label="标准组件总功率" prop="componentTotalPower">
<el-input-number v-model="dataForm.componentTotalPower" :precision="2" controls-position="right" placeholder="请输入标准组件总功率" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="封装产能利用率(%)" prop="componentCapacityUtilizationRate">
<el-form-item label="封装产能利用率" prop="componentCapacityUtilizationRate">
<el-input-number v-model="dataForm.componentCapacityUtilizationRate" :precision="2" controls-position="right" placeholder="请输入封装产能利用率" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准组件人均产量(片/人)" prop="componentAnnualAverageProduction">
<el-form-item label="标准组件人均产量" prop="componentAnnualAverageProduction">
<el-input-number v-model="dataForm.componentAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入标准组件人均产量" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准组件平均功率(W)" prop="componentAveragePower">
<el-form-item label="标准组件平均功率" prop="componentAveragePower">
<el-input-number v-model="dataForm.componentAveragePower" :precision="2" controls-position="right" placeholder="请输入标准组件平均功率" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="标准组件转化效率" prop="componentConversionEfficiency">
<el-input-number v-model="dataForm.componentConversionEfficiency" :precision="2" controls-position="right" placeholder="请输入标准组件转化效率" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-divider></el-divider>
@@ -183,39 +168,39 @@
</small-title>
<el-row :gutter="24" style="padding: 0 32px;">
<el-col :span="6">
<el-form-item label="产品产量(㎡)" prop="bipvProductOutput">
<el-form-item label="产品产量" prop="bipvProductOutput">
<el-input-number v-model="dataForm.bipvProductOutput" :precision="0" controls-position="right" placeholder="请输入产品产量" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="人均产量(㎡/人)" prop="bipvAnnualAverageProduction">
<el-form-item label="人均产量" prop="bipvAnnualAverageProduction">
<el-input-number v-model="dataForm.bipvAnnualAverageProduction" :precision="2" controls-position="right" placeholder="请输入人均产量" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="芯片使用量(片)" prop="bipvChipUsage">
<el-form-item label="芯片使用量" prop="bipvChipUsage">
<el-input-number v-model="dataForm.bipvChipUsage" :precision="0" controls-position="right" placeholder="请输入芯片使用量" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="芯片利用率(%)" prop="bipvChipUtilizationRate">
<el-form-item label="芯片利用率" prop="bipvChipUtilizationRate">
<el-input-number v-model="dataForm.bipvChipUtilizationRate" :precision="2" controls-position="right" placeholder="请输入芯片利用率" style="width: 100%" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24" style="padding: 0 32px;">
<el-col :span="6">
<el-form-item label="内部材料成本(元/㎡)" prop="bipvInsideMaterialCost">
<el-form-item label="内部材料成本" prop="bipvInsideMaterialCost">
<el-input-number v-model="dataForm.bipvInsideMaterialCost" :precision="2" controls-position="right" placeholder="请输入内部材料成本" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="OEM及委外材料成本(元/㎡)" prop="bipvOeeMaterialCost">
<el-form-item label="OEM及委外材料成本" prop="bipvOeeMaterialCost">
<el-input-number v-model="dataForm.bipvOeeMaterialCost" :precision="2" controls-position="right" placeholder="请输入OEM及委外材料成本" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="综合材料成本(元/㎡)" prop="bipvComprehensiveMaterialCost">
<el-form-item label="综合材料成本" prop="bipvComprehensiveMaterialCost">
<el-input-number v-model="dataForm.bipvComprehensiveMaterialCost" :precision="2" controls-position="right" placeholder="请输入综合材料成本" style="width: 100%" />
</el-form-item>
</el-col>
@@ -240,7 +225,6 @@
import SmallTitle from './SmallTitle';
import { createProduce, getProduceTargetDetail, updateProduceTarget } from '@/api/produceData';
import { factoryList, tyjxfactoryList, dhgfactoryList } from "@/utils/constants";
import moment from 'moment'
export default {
components: {
@@ -263,17 +247,57 @@ export default {
workOrderList: [],
detList: [],
teamList: [],
sourceList: [
{
id: 1,
name: '手动',
},
{
id: 2,
name: '自动',
}
],
// factoryList: [
// {
// name: '瑞昌中建材光电材料有限公司',
// id: 0
// },
// {
// name: '邯郸中建材光电材料有限公司',
// id: 1
// },
// {
// name: '中建材株洲光电材料有限公司',
// id: 2
// },
// {
// name: '佳木斯中建材光电材料有限公司',
// id: 3
// },
// {
// name: '成都中建材光电材料有限公司',
// id: 4
// },
// {
// name: '凯盛光伏材料有限公司',
// id: 5
// },
// {
// name: '蚌埠兴科玻璃有限公司',
// id: 6
// }
// ],
sectionList: [],
visible: false,
// reportTime: undefined,
week: undefined,
dataForm: {
reportTime: undefined,
factoryType: 0,
id: undefined,
reportTime: undefined, // 月时间
factory: undefined,
targetTime: undefined,
targetType: 0,
targetType: undefined,
targetYear: undefined,
showYear: undefined,
targetMonth: undefined,
chipYield: undefined,
chipYieldRate: undefined,
chipBom: undefined,
@@ -299,14 +323,13 @@ export default {
bipvInsideMaterialCost: undefined,
bipvOeeMaterialCost: undefined,
bipvComprehensiveMaterialCost: undefined,
molybdenumElectrodeInput: undefined,
componentConversionEfficiency: undefined
molybdenumElectrodeInput: undefined
},
// materialList: [],
dataRule: {
factory: [{ required: true, message: "工厂名称不能为空", trigger: "chnage" }],
reportTime: [{ required: true, message: "时间不能为空", trigger: "change" }],
targetType: [{ required: true, message: "时间维度不能为空", trigger: "change" }]
// materialId: [{ required: true, message: "", trigger: "blur" }],
// workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
// num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
// detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
// logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
@@ -317,57 +340,57 @@ export default {
// this.getCurrentTime()
},
methods: {
setReportTime() {
this.dataForm.reportTime = this.week
},
clearTime() {
this.week = undefined
this.dataForm.reportTime = undefined
},
formClear() {
if (this.$refs.dataForm !== undefined) {
this.$refs.dataForm.resetFields()
}
},
// clearTime() {
// this.dataForm.targetTime = undefined
// },
clearTime() {
this.dataForm.targetYear = undefined
this.dataForm.targetMonth = undefined
},
handleClose() {
this.$refs["form"].validate(valid => {
if (valid) {
// 新增
if (this.dataForm.targetType === 1) {
this.dataForm.targetTime = this.week ? Number(moment(this.week.getTime()).format('YYYYWW')) : ''
} else {
this.dataForm.targetTime = this.dataForm.reportTime ? Number(this.dataForm.reportTime) : ''
// 新增
if (this.dataForm.targetType === 0) {
const timeArray = this.dataForm.reportTime.split('-')
this.dataForm.targetYear = Number(timeArray[0])
this.dataForm.targetMonth = Number(timeArray[1])
}
if (this.dataForm.targetType === 1) {
this.dataForm.targetYear = Number(this.dataForm.showYear)
}
// if (this.dataForm.factory === 5) {
// this.dataForm.factoryType = 1
// } else {
// this.dataForm.factoryType = 0
// }
if (this.dataForm.id) {
// 修改
updateProduceTarget({
...this.dataForm,
showYear: undefined,
reportTime: undefined
}).then(res => {
if (res.code === 0) {
this.$message.success('修改成功!')
this.visible = false
this.$emit('refreshDataList')
}
if (this.dataForm.id) {
// 修改
updateProduceTarget({
...this.dataForm,
reportTime: undefined
}).then(res => {
if (res.code === 0) {
this.$message.success('修改成功!')
this.visible = false
this.$emit('refreshDataList')
}
})
} else {
// 新增
createProduce({
...this.dataForm,
reportTime: undefined
}).then(res => {
if (res.code === 0) {
this.$message.success('新增成功!')
this.visible = false
this.$emit('refreshDataList')
}
})
})
} else {
// 新增
createProduce({
...this.dataForm,
showYear: undefined,
reportTime: undefined
}).then(res => {
if (res.code === 0) {
this.$message.success('新增成功!')
this.visible = false
this.$emit('refreshDataList')
}
}
})
})
}
},
init(id) {
this.dataForm.id = id || undefined
@@ -375,24 +398,20 @@ export default {
this.visible = true
if (this.dataForm.id) {
getProduceTargetDetail(this.dataForm.id).then(res => {
// this.dataForm = res.data
for (const i in res.data) {
if (res.data[i] !== null) {
this.dataForm[i] = res.data[i]
this.dataForm = res.data
if (this.dataForm.targetType === 1) {
if (this.dataForm.targetYear) {
this.$set(this.dataForm, 'showYear', String(this.dataForm.targetYear))
}
}
if (this.dataForm.targetType === 0 || this.dataForm.targetType === 2 || this.dataForm.targetType === 3) {
// this.dataForm.reportTime = String(this.dataForm.targetTime)
this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetTime))
}
if (this.dataForm.targetType === 1) {
const date = new Date()
date.setFullYear(String(this.dataForm.targetTime).slice(0, 4))
date.setMonth(0)
date.setDate((Number(String(this.dataForm.targetTime).slice(4)) - 1)* 7 + 1)
// console.log('你好', date, moment(date).format('yyyyWW'), String(this.dataForm.targetTime).slice(4))
this.week = date
this.$set(this.dataForm, 'reportTime', date)
if (this.dataForm.targetType === 0) {
if (this.dataForm.targetYear && this.dataForm.targetMonth !== null) {
if (this.dataForm.targetMonth < 10) {
this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-0' + String(this.dataForm.targetMonth))
} else {
this.$set(this.dataForm, 'reportTime', String(this.dataForm.targetYear) + '-' + String(this.dataForm.targetMonth))
}
}
}
})
}
@@ -405,7 +424,6 @@ export default {
position: absolute;
bottom: 1%;
right: 2%;
z-index: 999;
}
.drawer-footer {
width: 100%;

View File

@@ -1,15 +1,14 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-14 10:41:23
* @LastEditTime: 2024-05-22 15:29:18
* @LastEditors: DY
* @Description:
-->
<template>
<el-drawer class="drawer" :visible.sync="visible" size="70%" @closed="$emit('destroy')">
<el-drawer class="drawer" :visible.sync="visible" size="58%" @closed="$emit('destroy')">
<small-title slot="title" :no-padding="true">
<!-- {{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }} -->
生产目标详情
{{ ftype === 0 ? '碲化镉工厂生产数据详情' : '铜铟镓硒工厂生产数据详情' }}
</small-title>
<div class="detailBox">
<el-row :gutter="24">
@@ -19,11 +18,11 @@
</el-col>
<el-col :span="8">
<p class="title">时间维度</p>
<p class="text">{{ ['日', '周', '月', '年'][dataForm.targetType] }}</p>
<p class="text">{{ dataForm.targetType === 0 ? '月' : '年' }}</p>
</el-col>
<el-col :span="8">
<p class="title">时间</p>
<p class="text">{{ dataForm.targetTime}}</p>
<p class="text">{{ dataForm.targetType === 1 ? dataForm.targetYear + '年' : dataForm.targetYear + '年' + dataForm.targetMonth + '月'}}</p>
</el-col>
</el-row>
<el-divider></el-divider>
@@ -32,11 +31,11 @@
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">芯片产量()</p>
<p class="title">芯片产量</p>
<p class="text">{{ dataForm.chipYield }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片良率(%)</p>
<p class="title">芯片良率</p>
<p class="text">{{ dataForm.chipYieldRate }}</p>
</el-col>
<el-col :span="6">
@@ -44,35 +43,35 @@
<p class="text">{{ dataForm.chipBom }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片总功率(MW)</p>
<p class="title">芯片总功率</p>
<p class="text">{{ dataForm.chipTotalPower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">{{ ['FTO投入量(片)', '钼电极投入量(片)'][ftype] }}</p>
<p class="text">{{ [dataForm.ftoInput, dataForm.molybdenumElectrodeInput][ftype] }}</p>
<p class="title">{{ ftype === 0 ? 'FTO投入量' : '钼电极投入量' }}</p>
<p class="text">{{ ftype === 0 ? dataForm.ftoInput : dataForm.molybdenumElectrodeInput }}</p>
</el-col>
<el-col :span="6">
<p class="title">{{ ['CSS稼动率(%)', 'PID6稼动率(%)'][ftype] }}</p>
<p class="title">{{ ftype === 0 ? 'CSS稼动率' : 'PID6稼动率' }}</p>
<p class="text">{{ dataForm.chipCssMarriageRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片段OEE(%)</p>
<p class="title">芯片段OEE</p>
<p class="text">{{ dataForm.chipOee }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片平均功率(W)</p>
<p class="title">芯片平均功率</p>
<p class="text">{{ dataForm.chipAveragePower }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">芯片人均产量(/)</p>
<p class="title">芯片人均产量</p>
<p class="text">{{ dataForm.chipAnnualAverageProduction }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片产能利用率(%)</p>
<p class="title">芯片产能利用率</p>
<p class="text">{{ dataForm.chipCapacityUtilizationRate }}</p>
</el-col>
</el-row>
@@ -85,72 +84,68 @@
<p class="text">{{ dataForm.componentBom }}</p>
</el-col>
<el-col :span="6">
<p class="title">封装线OEE(%)</p>
<p class="title">封装线OEE</p>
<p class="text">{{ dataForm.componentOee }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件良率(%)</p>
<p class="title">标准组件良率</p>
<p class="text">{{ dataForm.componentYieldRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件产量()</p>
<p class="title">标准组件产量</p>
<p class="text">{{ dataForm.componentYield }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">标准组件总功率(MW)</p>
<p class="title">标准组件总功率</p>
<p class="text">{{ dataForm.componentTotalPower }}</p>
</el-col>
<el-col :span="6">
<p class="title">封装产能利用率(%)</p>
<p class="title">封装产能利用率</p>
<p class="text">{{ dataForm.componentCapacityUtilizationRate }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件人均产量(/)</p>
<p class="title">标准组件人均产量</p>
<p class="text">{{ dataForm.componentAnnualAverageProduction }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件平均功率(W)</p>
<p class="title">标准组件平均功率</p>
<p class="text">{{ dataForm.componentAveragePower }}</p>
</el-col>
<el-col :span="6">
<p class="title">标准组件转化效率</p>
<p class="text">{{ dataForm.componentConversionEfficiency }}</p>
</el-col>
</el-row>
<small-title style=" margin: 0;padding: 26px 32px 24px;margin-bottom: 22px;" :no-padding="false">
{{ 'BIPV产品' }}
</small-title>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">产品产量()</p>
<p class="title">产品产量</p>
<p class="text">{{ dataForm.bipvProductOutput }}</p>
</el-col>
<el-col :span="6">
<p class="title">人均产量(/)</p>
<p class="title">人均产量</p>
<p class="text">{{ dataForm.bipvAnnualAverageProduction }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片使用量()</p>
<p class="title">芯片使用量</p>
<p class="text">{{ dataForm.bipvChipUsage }}</p>
</el-col>
<el-col :span="6">
<p class="title">芯片利用率(%)</p>
<p class="title">芯片利用率</p>
<p class="text">{{ dataForm.bipvChipUtilizationRate }}</p>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<p class="title">内部材料成本(/)</p>
<p class="title">内部材料成本</p>
<p class="text">{{ dataForm.bipvInsideMaterialCost }}</p>
</el-col>
<el-col :span="6">
<p class="title">OEM及委外材料成本(/)</p>
<p class="title">OEM及委外材料成本</p>
<p class="text">{{ dataForm.bipvOeeMaterialCost }}</p>
</el-col>
<el-col :span="6">
<p class="title">综合材料成本(/)</p>
<p class="title">综合材料成本</p>
<p class="text">{{ dataForm.bipvComprehensiveMaterialCost }}</p>
</el-col>
</el-row>
@@ -202,9 +197,35 @@ export default {
],
sectionList: [],
visible: false,
dataForm: {}
dataForm: {
id: undefined,
logTime: undefined,
source: 1,
detId: undefined,
workOrderId: null,
teamId: undefined,
num: undefined,
lineId: undefined,
description: undefined,
// description: undefined,
remark: undefined,
},
// materialList: [],
dataRule: {
// materialId: [{ required: true, message: "", trigger: "blur" }],
workOrderId: [{ required: true, message: "工单号不能为空", trigger: "change" }],
num: [{ required: true, message: "数量不能为空", trigger: "blur" }],
detId: [{ required: true, message: "报废原因不能为空", trigger: "change" }],
logTime: [{ required: true, message: "报废时间不能为空", trigger: "change" }],
}
};
},
mounted() {
this.getDict()
console.log('我看看', this.dataForm)
// this.getCurrentTime()
},
methods: {
init(id) {
this.visible = true
@@ -214,7 +235,102 @@ export default {
this.dataForm = res.data
})
}
}
},
// getCurrentTime() {
// // new Date().Format("yyyy-MM-dd HH:mm:ss")
// this.dataForm.logTime = new Date()
// // this.dataForm.logTime = year + "-" + month + "-" + day;
// console.log(this.dataForm.logTime);
// },
async getDict() {
// // 物料列表
// const res = await getList()
// this.typeList = res.data
// getWorkOrderList().then((res) => {
// console.log(res);
// // console.log(response);
// this.workOrderList = res.data.map((item) => {
// return {
// name: item.name,
// id: item.id
// }
// })
// // console.log(this.formConfig[0].selectOptions);
// // this.listQuery.total = response.data.total;
// })
// getLineList().then((res) => {
// console.log(res);
// // console.log(response);
// this.lineList = res.data.map((item) => {
// return {
// name: item.name,
// id: item.id
// }
// })
// // console.log(this.formConfig[0].selectOptions);
// // this.listQuery.total = response.data.total;
// })
// getDetList().then((res) => {
// console.log(res);
// // console.log(response);
// this.detList = res.data.map((item) => {
// return {
// name: item.content,
// id: item.id
// }
// })
// // console.log(this.formConfig[0].selectOptions);
// // this.listQuery.total = response.data.total;
// })
// getTeamList().then((res) => {
// console.log(res);
// // console.log(response);
// this.teamList = res.data.map((item) => {
// return {
// name: item.name,
// id: item.id
// }
// })
// // console.log(this.formConfig[0].selectOptions);
// // this.listQuery.total = response.data.total;
// })
// },
// async getWorksectionById(lineId) {
// if (lineId) {
// const { code, data } = await this.$axios({
// url: '/base/core-workshop-section/listByParentId',
// method: 'get',
// params: {
// id: lineId,
// },
// });
// if (code == 0) {
// console.log(data)
// this.sectionList = data.map((item) => {
// return {
// name: item.name,
// id: item.id,
// };
// });
// }
// } else {
// this.$axios({
// url: '/base/core-workshop-section/listAll',
// method: 'get',
// // params: {
// // id: lineId,
// // },
// }).then((res) => {
// // console.log(data)
// this.sectionList = res.data.map((item) => {
// return {
// name: item.name,
// id: item.id,
// };
// });
// })
// }
},
},
};
</script>
@@ -255,8 +371,5 @@ export default {
color: rgba(102,102,102,0.75);
padding-bottom: 20px;
}
.detailBox {
width: 98%;
}
</style>

View File

@@ -1,15 +1,15 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-02 16:35:01
* @LastEditTime: 2024-05-22 16:22:57
* @LastEditors: DY
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 32px)">
<ButtonNav v-show="false" :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px">
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 31px)">
<ButtonNav :menus="['碲化镉工厂', '铜铟镓硒工厂']" :button-mode="true" @change="changeFactory" style="margin-top: -10px">
</ButtonNav>
<div class="app-container" style="height: auto; flex-grow: 1;">
<div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
<el-form-item v-if="facType === 0" label="工厂名称" prop="factorys">
<el-select size="small" v-model="listQuery.factorys" placeholder="请选择工厂名称" multiple clearable>
@@ -24,39 +24,39 @@
</el-select>
</el-form-item>
<el-form-item label="时间维度" prop="date">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择" @change="clearTime">
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
<!-- <el-form-item v-show="timeSelect === 'day'" label="时间范围" prop="reportTime">
<el-date-picker v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" @change="changeDayTime" end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
</el-form-item> -->
<!-- <el-form-item v-show="timeSelect === 'week'" label="时间范围" prop="reportTime">
<el-date-picker v-model="listQuery.reportTime[0]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
<el-date-picker v-model="listQuery.reportTime[1]" type="week" format="yyyy 第 WW 周" placeholder="选择周"
style="width: 180px" @change="onValueChange">
</el-date-picker>
<!-- <span v-if="start && end" style="margin-left: 10px">
<span v-if="listQuery.reportTime[0] && listQuery.reportTime[1]" style="margin-left: 10px">
{{ date1 }} {{ date2 }} {{ weekNum }}
</span> -->
</el-form-item>
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM" range-separator="至" start-placeholder="开始月份"
</span>
</el-form-item> -->
<el-form-item v-show="listQuery.date !== 4" label="时间值" prop="reportTime">
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至" start-placeholder="开始月份"
end-placeholder="结束月份" @change="changeTime">
</el-date-picker>
</el-form-item>
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year"
<el-date-picker size="small" clearable v-model="start" value-format="timestamp" type="year"
placeholder="开始时间">
</el-date-picker>
~
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
<el-date-picker size="small" clearable v-model="end" value-format="timestamp" type="year" placeholder="结束时间"
@change="getYear">
</el-date-picker>
</el-form-item>
@@ -144,6 +144,7 @@
import { parseTime } from '@/utils/ruoyi';
import { prodTargetDiPage, prodTargetToPage, exportDiTargetExcel, exportToTargetExcel, delTarget, importToTarget, importDiTarget } from '@/api/produceData';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment'
import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
@@ -156,7 +157,7 @@ import {getBaseHeader} from "@/utils/request";
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { ButtonNav, detailOrUpdate, addOrUpdate },
components: { lineChart, ButtonNav, detailOrUpdate, addOrUpdate },
mixins: [basicPage],
data() {
return {
@@ -172,7 +173,7 @@ export default {
current: 1,
factorys: null,
total: 0,
date: 3,
date: undefined,
beginTime: undefined,
endTime: undefined,
reportTime: []
@@ -313,17 +314,9 @@ export default {
},
],
timeList: [
{
value: 1,
label: '日'
},
{
value: 2,
label: '周'
},
{
value: 3,
label: '月'
label:'月'
},
{
value: 4,
@@ -339,13 +332,13 @@ export default {
showOverflowtooltip: true
},
{
prop: 'targetTime',
prop: 'tagertTime',
label: '目标时间',
minWidth: 150,
showOverflowtooltip: true
},
{
prop: 'updateTime',
prop: 'createTime',
label: '提交时间',
filter: parseTime,
minWidth: 150,
@@ -413,23 +406,23 @@ export default {
},
],
// timeSelect:'month',
// startTimeStamp:null, //开始时间
// endTimeStamp:null, //结束时间
startTimeStamp:null, //开始时间
endTimeStamp:null, //结束时间
// date:'凯盛玻璃控股成员企业2024生产数据',
// reportTime: '',
// startTimeStamp: '',
// endTimeStamp: '',
startTimeStamp: '',
endTimeStamp: '',
tableData: [],
facType: 0
// proLineList: [],
// all: {}
};
},
computed: {
weekNum() {
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
},
},
// computed: {
// weekNum() {
// return Math.round((this.listQuery.reportTime[1] - this.listQuery.reportTime[0]) / (24 * 60 * 60 * 1000 * 7)) + 1
// },
// },
watch: {
facType(value) {
if (value === 0) {
@@ -449,21 +442,15 @@ export default {
})
this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel'
}
console.log(112, this.tableProps)
}
},
created() {
const currentMonth = new Date()
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
this.changeTime()
mounted() {
// this.getDict()
// this.getCurrentYearFirst()
this.getDataList()
},
methods: {
clearTime() {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
this.listQuery.reportTime = []
this.start = undefined
this.end = undefined
},
handleImport() {
this.upload.title = "生产目标导入";
this.upload.open = true;
@@ -473,6 +460,42 @@ export default {
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
// 文件上传成功处理
// handleFileSuccess(param, type) {
// console.log('带的', param.file)
// const formData = new FormData()
// formData.append('multipartFile', param.file)
// console.log('送送', param)
// importDiTarget(formData).then(res => {
// console.log(res)
// if (res.code !== 0) {
// this.$modal.msgError(response.msg)
// return;
// }
// this.upload.open = false;
// this.upload.isUploading = false;
// this.$refs.upload.clearFiles();
// }).catch(() => {
// this.upload.open = false
// this.upload.isUploading = false
// })
// // 拼接提示语
// // let data = response.data;
// // let text = '创建成功数量:' + data.createUsernames.length;
// // for (const username of data.createUsernames) {
// // text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
// // }
// // text += '<br />更新成功数量:' + data.updateUsernames.length;
// // for (const username of data.updateUsernames) {
// // text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username;
// // }
// // text += '<br />更新失败数量:' + Object.keys(data.failureUsernames).length;
// // for (const username in data.failureUsernames) {
// // text += '<br />&nbsp;&nbsp;&nbsp;&nbsp;' + username + '' + data.failureUsernames[username];
// // }
// this.$message.success('导入成功!');
// this.getDataList();
// },
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if (response.code !== 0) {
@@ -498,6 +521,11 @@ export default {
changeFactory($event) {
this.currentMenu = $event
this.facType = this.currentMenu === '碲化镉工厂' ? 0 : 1
// if (this.facType === 0) {
// this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/di-target-import-excel'
// } else {
// this.upload.url = process.env.VUE_APP_BASE_API + '/admin-api/ip/prod-target/to-target-import-excel'
// }
this.getDataList()
},
handleClick(val) {
@@ -508,6 +536,7 @@ export default {
this.$refs.addOrUpdate.init(val.data.id);
});
} else if (val.type === "delete") {
console.log('啊啊', val)
this.deleteHandle(val.data.id, val.data.factory, val.data._pageIndex)
} else {
this.otherMethods(val)
@@ -540,98 +569,84 @@ export default {
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
},
buttonClick() {
},
getYear(e) {
if (this.end && Number(this.end) - Number(this.start) > 10) {
if (this.end && e - this.start > 10 * 365*24*60*60*1000) {
this.$message({
message: '年份起止时间不能超过十年',
type: 'warning'
});
this.start = undefined
this.end = undefined
// console.log();
} else {
if (Number(this.end) < Number(this.start)) {
if (this.end < this.start) {
this.$message({
message: '结束年份不能小于开始年份',
type: 'warning'
});
this.start = undefined
this.end = undefined
} else {
this.listQuery.beginTime = Number(this.start)
this.listQuery.endTime = Number(this.end)
}
}
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
// console.log(e);
},
changeTime() {
if (this.listQuery.reportTime) {
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
if (years * 12 + months > 24) {
const numDays = this.listQuery.reportTime[1] - this.listQuery.reportTime[0]
if (numDays > 2*365*24*60*60*1000) {
this.$message({
message: '时间范围不能超过24个月',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
onValueChange(picker, k) { // 选中近k周后触发的操作
if (this.start && this.end) {
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
if (numDays > 168) {
console.log(numDays)
this.$message({
message: '周范围不能超过24周',
type: 'warning'
});
} else {
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
// 获取数据列表
multipliedByHundred(str) {
console.log(str);
// console.log(str)
if ( str != 0) {
let floatVal = parseFloat(str);
if (isNaN(floatVal)) {
return 0;
}
}
if (!this.start && !this.end) {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
}
},
changeDayTime() {
if (this.listQuery.reportTime) {
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
if (numDays > 30) {
this.$message({
message: '时间范围不能超过30天',
type: 'warning'
});
this.listQuery.reportTime = [];
} else {
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
floatVal = Math.round(str * 10000) / 100;
let strVal = floatVal.toString();
let searchVal = strVal.indexOf('.');
if (searchVal < 0) {
searchVal = strVal.length;
strVal += '.';
}
} else {
this.listQuery.beginTime = undefined
this.listQuery.endTime = undefined
while (strVal.length <= searchVal + 2) {
strVal += '0';
}
return parseFloat(strVal);
}
},
async getDataList() {
if (this.listQuery.date === 3) {
if (this.listQuery.reportTime?.length > 0) {
this.listQuery.beginTime = this.listQuery.reportTime[0] ? this.listQuery.reportTime[0] : undefined
this.listQuery.endTime = this.listQuery.reportTime[1] ? this.listQuery.reportTime[1] : undefined
}
}
if (this.listQuery.date === 4) {
if (this.listQuery.reportTime?.length > 0) {
this.listQuery.beginTime = this.start ? this.start : undefined
this.listQuery.endTime = this.end ? this.end : undefined
}
}
if (this.currentMenu === '碲化镉工厂') {
await prodTargetDiPage(this.listQuery).then(res => {
if (res.code === 0) {
this.tableData = res.data.records
this.tableData.forEach(item => {
const year = item.targetYear ? item.targetYear + '年' : ''
const month = item.targetMonth ? item.targetMonth + '月' : ''
item.tagertTime = year + month
})
this.listQuery.total = res.data.total
}
})
@@ -691,22 +706,11 @@ export default {
};
</script>
<style>
<style scoped>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
/* .blueTi */
.blueTip::before{
display: inline-block;
content: '';

View File

@@ -1,65 +0,0 @@
<!--
* @Author: zwq
* @Date: 2023-08-01 15:27:31
* @LastEditors: zwq
* @LastEditTime: 2023-08-01 16:25:54
* @Description:
-->
<template>
<div :class="[className, { 'p-0': noPadding }]">
<slot />
</div>
</template>
<script>
export default {
props: {
size: {
// 取值范围: xl lg md sm
type: String,
default: 'de',
validator: function (val) {
return ['xl', 'lg', 'de', 'md', 'sm'].indexOf(val) !== -1;
},
},
noPadding: {
type: Boolean,
default: false,
},
},
computed: {
className: function () {
return `${this.size}-title`;
},
},
};
</script>
<style lang="scss" scoped>
$pxls: (xl, 28px) (lg, 24px) (de, 20px) (md, 18px) (sm, 16px);
$mgr: 8px;
@each $size, $height in $pxls {
.#{$size}-title {
font-size: 18px;
line-height: $height;
color: #000;
font-weight: 500;
font-family: '微软雅黑', 'Microsoft YaHei', Arial, Helvetica, sans-serif;
&::before {
content: '';
display: inline-block;
vertical-align: top;
width: 4px;
height: $height + 2px;
border-radius: 1px;
margin-right: $mgr;
background-color: #0b58ff;
}
}
}
.p-0 {
padding: 0;
}
</style>

View File

@@ -1,490 +0,0 @@
<!--
* @Author: zhp
* @Date: 2023-11-06 15:15:30
* @LastEditTime: 2024-06-27 14:50:21
* @LastEditors: DY
* @Description:
-->
<template>
<el-drawer class="drawer" :visible.sync="visible" size="85%" @closed="$emit('destroy')">
<small-title slot="title" :no-padding="true">
{{ '详情' }}
<el-button type="primary" plain size="small" style="float: right" @click="exportDetail">导出</el-button>
</small-title>
<div ref="detail" class="detailBox">
<el-row :gutter="20">
<el-col :span="3">
<p class="title">工单号</p>
<p class="text">{{ dataForm.workOrderNumber }}</p>
</el-col>
<el-col :span="3">
<p class="title">订单号</p>
<p class="text">{{ dataForm.orderNumber }}</p>
</el-col>
<el-col :span="3">
<p class="title">工单类型</p>
<p class="text">{{ ['', '芯片工单', '组件类型', 'bipv类型'][dataForm.workOrderType] }}</p>
</el-col>
<el-col :span="3">
<p class="title">工单来源</p>
<p class="text">{{ ['', '手动', 'ERP'][dataForm.source] }}</p>
</el-col>
<el-col :span="3">
<p class="title">工艺流程</p>
<p class="text">{{ dataForm.process }}</p>
</el-col>
<el-col :span="3">
<p class="title">BOM</p>
<p class="text">{{ dataForm.bom }}</p>
</el-col>
<el-col :span="3">
<p class="title">工单状态</p>
<p class="text">{{ ['', '未开始', '生产中', '已完成'][dataForm.orderStatus] }}</p>
</el-col>
<el-col :span="3">
<p class="title">投入状态</p>
<p class="text">{{ getDictDataLabel('work_order_in_status', dataForm.inStatus) }}</p>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3">
<p class="title">计划投入量</p>
<p class="text">{{ dataForm.plannedInvestment }}</p>
</el-col>
<el-col :span="3">
<p class="title">目标产量</p>
<p class="text">{{ dataForm.targetProduction }}</p>
</el-col>
<el-col :span="3">
<p class="title">实际投入</p>
<p class="text">{{ dataForm.actualInvestment }}</p>
</el-col>
<el-col :span="3">
<p class="title">实际产出</p>
<p class="text">{{ dataForm.actualProduction }}</p>
</el-col>
<el-col :span="3">
<p class="title">创建时间</p>
<p class="text">{{ parseTime(dataForm.createTime) }}</p>
</el-col>
<el-col :span="3">
<p class="title">开始时间</p>
<p class="text">{{ dataForm.startDate?.length > 0 ? dataForm.startDate[0] + '-' + dataForm.startDate[1] + '-' + dataForm.startDate[2] : '' }}</p>
</el-col>
<el-col :span="3">
<p class="title">完成时间</p>
<p class="text">{{ dataForm.endDate?.length > 0 ? dataForm.endDate[0] + '-' + dataForm.endDate[1] + '-' + dataForm.endDate[2] : '' }}</p>
</el-col>
</el-row>
<div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
产品良率
</small-title>
<div ref="pie" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
历史趋势
</small-title>
<div ref="line" v-show="dataForm.orderStatus === 2" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col>
</el-row>
<div style="width: 100%; padding: 0 32px"><el-divider style="margin: 0"></el-divider></div>
<el-row :gutter="0" style="margin: 20px 32px">
<el-col :span="8">
<div>
<small-title slot="title" :no-padding="true">
生产明细
</small-title>
<div ref="bar" :style="{ height: '40vh', width: '100%' }" />
</div>
</el-col>
<el-col :span="16">
<div style="border-left: 1px solid #d1d3d8; width: 100%; padding-left: 32px">
<small-title slot="title" :no-padding="true">
待制品分布
</small-title>
<div ref="equipmentLine" :style="{ height: '40vh', width: '50vw' }" />
</div>
</el-col>
</el-row>
</div>
</el-drawer>
</template>
<script>
// import basicAdd from './basic-add';
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
import { getWorkOrderDetail } from '@/api/produceData/order';
import SmallTitle from './SmallTitle';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import { getDictDataLabel } from "@/utils/dict";
export default {
components: {
SmallTitle,
},
mixins: [resize],
props: {
date: {
type: Number,
default: 0
}
},
data() {
return {
lineChart: null,
pieChart: null,
barChart: null,
equipmentLineChart: null,
visible: false,
dataForm: {},
colorList: ['#3E8EF7', '#69E6D8', '#F7C739'] // pie颜色
}
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
mounted() {
// this.getCurrentTime()
},
methods: {
exportDetail() {
// 导出
const pdf = new jsPDF('l', 'pt', 'a4');
const canvas = document.createElement('canvas')
const element = this.$refs['detail'];
const width = pdf.internal.pageSize.getWidth()
const height = pdf.internal.pageSize.getHeight()
canvas.width = width * 2
canvas.height = height * 2
canvas.style.width = width + 'px'
canvas.style.height = height + 'px'
const options = {
// scale: 2,
dpi: 300,
canvas: canvas,
useCORS: true
};
html2canvas(element, options).then((canvas) => {
const imgData = canvas.toDataURL('image/png', 1.0);
pdf.addImage(imgData, 'PNG', 0, 0, width, height);
pdf.save(this.dataForm.workOrderNumber + '详情.pdf');
});
},
init(id) {
this.visible = true
this.$nextTick(() => {
this.initLineChart()
})
if (id) {
getWorkOrderDetail(id).then(res => {
if (res.code === 0) {
this.dataForm = res.data.prodWorkOrderDO
this.buildChart(this.dataForm)
// 在制品
const xAxisList = Object.keys(res.data.inProcessDis)
const yAxisList = Object.values(res.data.inProcessDis)
this.initEqLineChart(xAxisList, yAxisList)
// 趋势图
const seriesList = []
const dateList = []
res.data.his.forEach(element => {
seriesList.push(element.actualProduction)
dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
})
this.initLineChart(dateList, seriesList)
}
// if (this.dataForm.orderStatus === 1) {
// this.trend()
// }
})
// getEqNum(id).then(response => {
// if (response.code === 0) {
// const xAxisList = Object.keys(response.data)
// const yAxisList = Object.values(response.data)
// this.initEqLineChart(xAxisList, yAxisList)
// }
// })
}
},
trend() {
// 趋势图
getDailyTrend({ factory: this.dataForm.id }).then(trendRes => {
if (trendRes?.data.length > 0) {
const seriesList = []
const dateList = []
trendRes.data.forEach(element => {
seriesList.push(element.actualProduction)
dateList.push(element.recordTime[0] + '-' + element.recordTime[1] + '-' + element.recordTime[2])
})
this.initLineChart(dateList, seriesList)
}
})
},
buildChart(data) {
// 生产明细
const barList = [data.targetProduction, data.plannedInvestment, data.actualInvestment, data.actualProduction, data.wasteNum, data.reworkNum]
this.initChart(barList)
// 良品率
const pieList = [
{ value: data.actualProduction, name: '实际产出' },
{ value: data.wasteNum, name: '废品数量' },
{ value: data.reworkNum, name: '待再加工数量' }
]
this.initPieChart(pieList)
},
initChart(barData) {
this.barChart = echarts.init(this.$refs['bar'])
this.barChart.setOption({
// title: {
// text: '生产明细',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: '10%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: ['目标产量', '计划投入量', '实际投入', '实际产出', '废品数量', '待再加工数量'],
axisLabel: {
rotate: 25
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: barData,
type: 'bar',
barWidth: '40%',
label: {
show: true,
position: 'top'
}
}
]
}, true)
},
initPieChart(pieData) {
this.pieChart = echarts.init(this.$refs['pie'])
this.pieChart.setOption({
color: ['#3E8EF7', '#69E6D8', '#F7C739'],
title: {
// text: !isNaN((pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100) ? ( '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%') : '产品良率 -',
left: 'center'
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'item'
},
legend: {
bottom: 0,
left: 'center'
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: pieData,
label: {
show: true,
position: 'outside',
formatter: '{d|{d}%} \n {b|{b}}',
rich: {
d: {
color: 'inherit', // 系列色
verticalAlign: 'top'
},
b: {
color: '#8C8C8C',
verticalAlign: 'top'
}
}
}
}
]
}, true)
},
initEqLineChart(xAxisList, yAxisList) {
this.equipmentLineChart = echarts.init(this.$refs['equipmentLine'])
this.equipmentLineChart.setOption({
// title: {
// text: '待制品分布',
// left: 'center'
// // subtext: 'Fake Data'
// },
color: ['#3E8EF7'],
tooltip: {
trigger: 'axis'
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
calculable: true,
grid: {
top: '15%',
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
// width: '10%'
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: yAxisList,
type: 'bar',
barWidth: '50%',
label: {
show: true,
position: 'top'
}
}
]
}, true)
},
initLineChart(xAxisList, seriesList) {
this.lineChart = echarts.init(this.$refs['line'])
this.lineChart.setOption({
color: ['#3E8EF7'],
tooltip: {
trigger: 'item'
},
grid: {
top: '15%',
left: 0,
right: 0,
bottom: 0,
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisList,
axisLabel: {
rotate: 25
}
},
yAxis: {
type: 'value',
name: '单位/片',
axisLine: {
show: true
}
},
series: [
{
data: seriesList,
type: 'line',
label: {
show: true,
position: 'top'
}
}
]
}, true)
}
// getCurrentTime() {
// // new Date().Format("yyyy-MM-dd HH:mm:ss")
// this.dataForm.logTime = new Date()
// // this.dataForm.logTime = year + "-" + month + "-" + day;
// console.log(this.dataForm.logTime);
// },
},
};
</script>
<style scoped>
.drawer >>> .el-drawer {
border-radius: 8px 0 0 8px;
}
.drawer >>> .el-form-item__label {
padding: 0;
}
.drawer >>> .el-drawer__header {
margin: 0;
padding: 32px 32px 24px;
border-bottom: 1px solid #dcdfe6;
/* margin-bottom: 30px; */
}
.detailBox p {
margin: 0;
padding-left: 32px;
/* padding: 0 32px; */
}
.detailBox .title {
/* width: 56px; */
/* height: 14px; */
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: rgba(0, 0, 0, 0.85);
line-height: 16px;
text-align: left;
font-style: normal;
text-transform: none;
}
.detailBox .text {
font-size: 14px;
font-weight: 400;
color: rgba(102,102,102,0.75);
padding-bottom: 20px;
}
.detailBox {
padding-top: 30px;
overflow-x: hidden;
overflow-y: auto;
/* width: 99%; */
}
</style>

View File

@@ -1,403 +0,0 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-01 17:06:29
* @LastEditors: DY
* @Description:
-->
<template>
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
<el-row :gutter="10">
<el-col :span="4">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view">
<div style="padding: 10px 0; width: 100%">
<div class="topDiv">
<div style="width: 4px; height: 52px; background: #71CC8C; border-radius: 2px;"></div>
<div class="centerDiv">
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ inputNum }}</span>
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">在制工单数量</span>
</div>
<svg-icon icon-class="workProcess" style="width: 26px; height: 26px" />
</div>
</div>
</div>
</div>
</el-col>
<el-col :span="20">
<div class="app-container" style="padding: 16px; height: auto; text-align: left; border-radius: 8px;">
<!-- <p style="margin-bottom: 0">数据概览</p> -->
<div class="view">
<div style="padding: 10px 0; width: 100%" v-for="(item, index) in factorys" :key="index">
<div class="topDiv">
<div style="width: 4px; height: 52px; background: #3A79FF; border-radius: 2px;"></div>
<div class="centerDiv">
<span style="font-size: 30px; line-height: 30px; color: rgba(0,0,0,0.85);">{{ factoryNum[index] }}</span>
<span style="font-size: 14px; color: rgba(0,0,0,0.85);">{{item}}</span>
</div>
<svg-icon icon-class="factoryWorkOrder" style="width: 26px; height: 26px" />
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- <div class="app-container" style="margin-top: 8px; height: auto;">
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
</div> -->
<div class="app-container" style="margin-top: 8px;flex-grow: 1;">
<!-- <search-bar :formConfigs="formConfig2" ref="searchBarForm" style="margin-bottom: 0" /> -->
<search-bar :formConfigs="formConfig" ref="searchBarForm" @headBtnClick="buttonClick" />
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
:table-data="tableData" :max-height="tableH">
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
:method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination
:limit.sync="listQuery.pageSize"
:page.sync="listQuery.pageNo"
:total="listQuery.total"
@pagination="getDataList"
/>
</div>
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
</div>
</template>
<script>
// import { parseTime } from '../../core/mixins/code-filter';
import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
// import inputTable from './inputTable.vue';
import lineChart from './lineChart';
import moment from 'moment'
import tableHeightMixin from "@/mixins/tableHeightMixin";
// import ButtonNav from '@/components/ButtonNav'
import basicPage from '@/mixins/basic-page'
import AddOrUpdate from './add-or-updata';
import { factoryList, factoryArray } from "@/utils/constants";
// import { publicFormatter } from "@/utils/dict";
import statusChart from "./statusChart.vue";
// import FileSaver from 'file-saver'
// import * as XLSX from 'xlsx'
export default {
components: { lineChart, AddOrUpdate },
mixins: [basicPage, tableHeightMixin],
data() {
return {
factorys: ['瑞昌中建材', '邯郸中建材', '株洲中建材', '佳木斯中建材', '成都中建材', '凯盛光伏', '蚌埠兴科'],
factoryNum: [0, 0, 0, 0, 0, 0, 0],
inputNum: 0,
heightNum: 180,
factoryList,
factoryArray,
listQuery: {
pageSize: 20,
pageNo: 1,
factorys: undefined,
total: 0,
time: undefined,
orderStatus:undefined
},
detailOrUpdateVisible:false,
tableBtn: [
{
type: 'detail',
btnName: '详情',
},
// {
// type: 'delete',
// btnName: '删除',
// },
].filter((v) => v),
typeList: [
{
name: '芯片',
id: 0,
},
{
name: '标准组件',
id: 1,
},
{
name: 'BIPV产品',
id: 2,
},
],
formConfig: [
{
type: "select",
label: "工厂名称",
selectOptions: factoryArray,
labelField: 'name',
valueField: 'id',
param: "factory",
multiple: true,
filterable: true
},
{
type: "select",
label: "工单状态",
selectOptions: [
{
label: '未开始',
value: 1
},
{
label: '生产中',
value: 2
},
{
label: '已完成',
value: 3
}
],
labelField: "label",
valueField: "value",
param: "orderStatus",
multiple: true,
filterable: true
},
{
type: "datePicker",
label: "时间段",
dateType: "daterange",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
rangeSeparator: "-",
startPlaceholder: "开始日期",
endPlaceholder: "结束日期",
param: "timeSlot",
defaultSelect: [],
defaultTime: ["00:00:00", "23:59:59"],
width: 250,
},
{
type: "button",
btnName: "查询",
name: "search",
color: "primary",
},
{
type: "separate",
},
{
type: "button",
btnName: "导出",
name: "export",
color: "primary",
plain: true
},
],
formConfig2: [
{
type: 'title',
label: '工厂信息',
},
],
formConfig1: [
{
type: 'title',
label: '良品数量',
},
],
tableProps: [
{
prop: 'factory',
label: '工厂名称',
filter: (val) => factoryList[val],
minWidth: 220,
showOverflowtooltip: true
},
{
prop: 'workOrderNumber',
label: '工单号',
minWidth: 130,
showOverflowtooltip: true
// filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
},
{
prop: 'workOrderType',
label: '工单类型',
// filter: publicFormatter('workorder_status')
filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val],
},
{
prop: 'plannedInvestment',
label: '计划投入',
},
{
prop: 'actualInvestment',
label: '实际投入',
},
{
prop: 'targetProduction',
label: '目标产量',
},
{
prop: 'actualProduction',
label: '实际产量',
},
{
prop: 'productionProgress',
label: '生产进度',
filter: (val) => (val * 100).toFixed(2) + '%'
},
{
prop: 'orderStatus',
label: '工单状态',
subcomponent: statusChart
// filter: (val) => ['', '未开始', '生产中', '已完成'][val],
},
{
prop: 'startTime',
label: '开始时间',
minWidth: 100,
showOverflowtooltip: true
},
{
prop: 'endTime',
label: '完成时间',
minWidth: 100,
showOverflowtooltip: true
}
],
tableData: [],
xAxis: [],
lineData: {}
// data: {}
// proLineList: [],
// all: {}
};
},
created() {
const today = new Date()
const sevenDaysAgo = new Date(today.getTime() - (6 * 24 * 60 * 60 * 1000))
this.listQuery.time = [moment(sevenDaysAgo).format('yyyy-MM-DD'), moment(today).format('yyyy-MM-DD')]
this.formConfig[2].defaultSelect = this.listQuery.time
},
mounted() {
this.getOverView()
},
methods: {
getOverView() {
getOverView().then(res => {
// this.data = res.data
if (res.code === 0) {
for(const i in res.data) {
if (i === '在制工单数量') {
this.inputNum = res.data[i]
} else {
const index = this.factorys.indexOf(i)
if (index > -1) {
this.factoryNum[index] = res.data[i]
}
}
}
}
})
},
otherMethods(val) {
this.detailOrUpdateVisible = true;
// this.addOrEditTitle = "详情";
this.$nextTick(() => {
this.$refs.detailOrUpdate.init(val.data.id);
});
},
async getDataList() {
const res = await getWorkOrderPage(this.listQuery)
this.tableData = res.data.list
this.listQuery.total = res.data.total
if (this.listQuery.total > 0) {
this.tableData.forEach(item => {
item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
})
}
},
buttonClick(val) {
this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
switch (val.btnName) {
case 'search':
this.listQuery.pageNo = 1;
this.listQuery.pageSize = 20;
if (this.listQuery.time) {
this.getDataList();
} else {
this.$message.warning('请选择时间范围!')
}
break;
case 'export':
if (this.listQuery.time) {
this.handleExport();
} else {
this.$message.warning('请选择时间范围!')
}
break;
default:
console.log(val);
}
},
/** 导出按钮操作 */
handleExport() {
this.$modal.confirm('是否确认导出工单数据?').then(() => {
// 处理查询参数
// let params = {...this.listQuery};
// params.current = 1;
// params.size = 999;
this.exportLoading = true;
return exportExcel({
factorys: this.listQuery.factorys,
orderStatus: this.listQuery.orderStatus,
time: this.listQuery.time
});
}).then(response => {
this.$download.excel(response, '工单数据.xls');
this.exportLoading = false;
}).catch(() => {})
},
},
};
</script>
<style scoped>
.centerDiv {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.topDiv {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: flex-start;
flex: 1;
}
.view {
display: flex;
justify-content: space-around;
align-items: center;
flex: 1;
}
.blueTip::before{
display: inline-block;
content: '';
width: 4px;
height: 18px;
background: #0B58FF;
border-radius: 1px;
margin-right: 8PX;
margin-top: 8px;
}
.app-container {
margin: 0 0px 0;
background-color: #fff;
border-radius: 4px;
padding: 16px 16px 0;
height: calc(100vh - 40px);
overflow: auto;
}
</style>

View File

@@ -1,169 +0,0 @@
<!--
* @Author: zwq
* @Date: 2022-01-21 14:43:06
* @LastEditors: DY
* @LastEditTime: 2024-05-30 09:51:16
* @Description:
-->
<template>
<!-- <div> -->
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
<div :id="id" :class="className" :style="{ height: height, width: width }" />
<!-- </div> -->
</template>
<script>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from '@/mixins/resize'
export default {
name: 'LineChart',
mixins: [resize],
props: {
id: {
type: String,
default: 'reportChart'
},
className: {
type: String,
default: 'reportChart'
},
width: {
type: String,
default: '100%'
},
beilv: {
type: Number,
default: 1
},
height: {
type: String,
default: '30vh'
},
legendPosition: {
type: String,
default: 'center'
},
showLegend: {
type: Boolean,
default: false
},
legendData: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null
}
},
// mounted() {
// this.$nextTick(() => {
// this.initChart()
// })
// },
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart(xAxis, seriesList) {
this.chart = echarts.init(document.getElementById(this.id))
console.log(this.$parent);
this.chart.setOption({
title: {
text: '',
// subtext: 'Fake Data'
},
tooltip: {
trigger: 'axis'
},
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
legend: {
// data: ['工厂1', '工厂2'],
right: '90px',
top: '0%',
icon: 'rect',
itemWidth: 10,
itemHeight: 10,
itemGap: 40,
},
// toolbox: {
// show: true,
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
calculable: true,
xAxis: [
{
type: 'category',
// prettier-ignore
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
grid: {
top: '20%',
left: "1%",
right: "3%",
bottom: "1%",
containLabel: true
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}, true)
}
}
}
</script>
<style scoped>
/* .reportChart {
position: absolute;
height: 100%;
width: 100%;
top: 10px;
} */
</style>

View File

@@ -1,51 +0,0 @@
<!--
* @Author: Do not edit
* @Date: 2024-06-24 15:03:19
* @LastEditTime: 2024-06-24 15:07:42
* @LastEditors: DY
* @Description:
-->
<template>
<div>
<span class="dot" :class="myClass"></span>
<span>{{ state }}</span>
</div>
</template>
<script>
export default {
name: "statusChart",
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
computed: {
state() {
return ['', '未开始', '生产中', '已完成'][this.injectData.orderStatus]
},
myClass() {
return ['', 'yellow', 'blue', 'green'][this.injectData.orderStatus]
}
},
};
</script>
<style scoped>
.dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 3px;
vertical-align: middle;
margin-right: 8px;
}
.green {
background: #10DC76;
}
.yellow {
background: #FFBD02;
}
.blue {
background: #3B79FF;
}
</style>

View File

@@ -1,348 +0,0 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
</div>
<div class="containerBottom">
<div class="smallTitle">芯片OEE</div>
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
import {
chipoeeComparePage,
chipoeeCompareExport,
} from "@/api/report/benchmarking.js";
import moment from "moment";
export default {
name: "ChipOEEBM",
data() {
return {
factoryList: [
{ id: 0, name: "瑞昌" },
{ id: 1, name: "邯郸" },
],
tableProps: [],
tableProps1: [
{
prop: "factory",
label: "工厂名称",
filter: (val) => this.factoryList[val].name,
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
],
listQuery: {
current: 1,
size: 100,
},
tableData: [],
chartHeight: this.tableHeight(269) / 2,
tableH: this.tableHeight(269) / 2,
legendList: [
{ id: 1, name: "", type: 2, color: "#FFCE6A" },
{ id: 2, name: "", type: 1, color: "#8EF0AB" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/%",
series: [
{
name: "",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "chipOEEBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipOEEBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
window.addEventListener("resize", this._setTableHeight);
},
mounted() {
this.tableProp = this.tableProp1;
this.listQuery.type = 2;
this.listQuery.startDate = moment().format("yyyy-MM-DD");
this.listQuery.factory = [];
this.getList();
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
// 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新
if (this.$route.name === "ChipOEEBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
if (this.$route.name === "ChipOEEBM") {
this.chartNum++;
}
},
getSearch(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
this.getList();
},
getList() {
this.tableProps = [];
chipoeeComparePage({ ...this.listQuery }).then((res) => {
if (res.data && res.data.records.length > 0) {
let msg = res.data.records[0];
let arr = [
{
prop: "yoy",
label: msg.yoyColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "queryValue",
label: msg.queryColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
];
this.tableProps = this.tableProps1.concat(arr);
this.tableData = res.data.records;
// 设置图例
this.legendList[0].name = msg.targetColumn;
this.legendList[1].name = msg.yoyColumn;
this.legendList[2].name = msg.queryColumn;
this.chartMsg.series[0].name = msg.targetColumn;
this.chartMsg.series[1].name = msg.yoyColumn;
this.chartMsg.series[2].name = msg.queryColumn;
// 设置chartMsg的series的数据
this.setChartMsg(res.data.records);
} else {
// 重置
this.resetMsg();
}
});
},
setChartMsg(val) {
let xData = [];
let lineData = [];
let barData1 = [];
let barData2 = [];
for (let i = 0; i < val.length; i++) {
this.factoryList.map((item) => {
if (item.id === val[i].factory) {
xData.push(item.name);
}
});
lineData.push({
name: "%",
value: val[i].target || 0,
});
barData1.push({ name: "%", value: val[i].yoy || 0 });
barData2.push({
name: "%",
value: val[i].queryValue || 0,
});
}
this.chartMsg.xData = xData;
this.chartMsg.series[0].data = lineData;
this.chartMsg.series[1].data = barData1;
this.chartMsg.series[2].data = barData2;
this.chartMsg.xData = xData;
},
resetMsg() {
this.tableProps = this.tableProps1;
this.tableData = [];
this.chartMsg = {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/%",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
};
},
handleExport(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
let fileName = "芯片OEE对标.xls";
chipoeeCompareExport({ ...this.listQuery })
.then((response) => {
this.$download.excel(response, fileName);
this.$message.success("导出成功");
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped>
.containerTop {
height: 64px;
}
.containerTop,
.containerBottom {
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
height: calc(100vh - 201px);
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@@ -1,357 +0,0 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
</div>
<div class="containerBottom">
<div class="smallTitle">芯片产量</div>
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
import {
cPReportByDateRangePage,
cPReportByDateRangeExport,
} from "@/api/report/benchmarking.js";
import moment from "moment";
export default {
name: "ChipOutputBM",
data() {
return {
factoryList: [
{ id: 0, name: "瑞昌" },
{ id: 1, name: "邯郸" },
],
tableProps: [],
tableProps1: [
{
prop: "factory",
label: "工厂名称",
filter: (val) => this.factoryList[val].name,
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
],
listQuery: {
current: 1,
size: 100,
},
tableData: [],
chartHeight: this.tableHeight(269) / 2,
tableH: this.tableHeight(269) / 2,
legendList: [
{ id: 1, name: "", type: 2, color: "#FFCE6A" },
{ id: 2, name: "", type: 1, color: "#8EF0AB" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/片",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
position: [-10, -16],
// position: [-17, -16],
color: "#68C483",
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
},
chartId: "chipOutputBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipOutputBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
window.addEventListener("resize", this._setTableHeight);
},
mounted() {
this.tableProp = this.tableProp1;
this.listQuery.date = 2;
this.listQuery.queryTime = moment().format("yyyy-MM-DD");
this.listQuery.factorys = [];
this.getList();
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
// 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新
if (this.$route.name === "ChipOutputBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
if (this.$route.name === "ChipOutputBM") {
this.chartNum++;
}
},
getSearch(val) {
this.listQuery.date = val.type;
this.listQuery.queryTime = val.startDate;
this.listQuery.factorys = val.factory;
this.getList();
},
getList() {
this.tableProps = [];
cPReportByDateRangePage({ ...this.listQuery }).then((res) => {
if (res.data && res.data.length > 0) {
// 设置表头
let msg = res.data[0];
let arr = [
{
prop: "lastone",
label: msg.lastone.reportTime,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "currentone",
label: msg.currentone.reportTime,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "targetone",
label: msg.targetone.reportTime,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
];
this.tableProps = this.tableProps1.concat(arr);
// 整理表格数据
let tableArr = [];
res.data.forEach((item) => {
let obj = {};
obj.factory = item.factory;
obj.item = "芯片产量";
obj.unit = "片";
obj.lastone = item.lastone.total;
obj.currentone = item.currentone.total;
obj.targetone = item.targetone.total;
tableArr.push(obj);
});
this.tableData = tableArr;
// 设置图例
this.legendList[0].name = msg.targetone.reportTime;
this.legendList[1].name = msg.lastone.reportTime;
this.legendList[2].name = msg.currentone.reportTime;
this.chartMsg.series[0].name = msg.targetone.reportTime;
this.chartMsg.series[1].name = msg.lastone.reportTime;
this.chartMsg.series[2].name = msg.currentone.reportTime;
// 设置偏移量
switch (this.listQuery.type) {
case 0:
this.chartMsg.series[1].label.position = [-5, -16];
break;
case 1:
this.chartMsg.series[1].label.position = [-5, -16];
break;
case 2:
this.chartMsg.series[1].label.position = [-10, -16];
break;
default:
this.chartMsg.series[1].label.position = [-17, -16];
}
// 设置chartMsg的series的数据
this.setChartMsg(res.data);
} else {
// 重置
this.resetMsg();
}
});
},
setChartMsg(val) {
let xData = [];
let lineData = [];
let barData1 = [];
let barData2 = [];
for (let i = 0; i < val.length; i++) {
this.factoryList.map((item) => {
if (item.id === val[i].factory) {
xData.push(item.name);
}
});
lineData.push(val[i].targetone.total || 0);
barData1.push(val[i].lastone.total || 0);
barData2.push(val[i].currentone.total || 0);
}
this.chartMsg.xData = xData;
this.chartMsg.series[0].data = lineData;
this.chartMsg.series[1].data = barData1;
this.chartMsg.series[2].data = barData2;
this.chartMsg.xData = xData;
},
resetMsg() {
this.tableProps = this.tableProps1;
this.tableData = [];
this.chartMsg = {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/片",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
position: [-10, -16],
// position: [-17, -16],
color: "#68C483",
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
};
},
handleExport(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
let fileName = "芯片产量.xls";
cPReportByDateRangeExport({ ...this.listQuery })
.then((response) => {
this.$download.excel(response, fileName);
this.$message.success("导出成功");
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped>
.containerTop {
height: 64px;
}
.containerTop,
.containerBottom {
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
height: calc(100vh - 201px);
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@@ -1,344 +0,0 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
</div>
<div class="containerBottom">
<div class="smallTitle">芯片人均产量</div>
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
import {
chipAnnualAverageProductionPage,
chipAnnualAverageProductionExport,
} from "@/api/report/benchmarking.js";
import moment from "moment";
export default {
name: "ChipPerCapitaBM",
data() {
return {
factoryList: [
{ id: 0, name: "瑞昌" },
{ id: 1, name: "邯郸" },
],
tableProps: [],
tableProps1: [
{
prop: "factory",
label: "工厂名称",
filter: (val) => this.factoryList[val].name,
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
],
listQuery: {
current: 1,
size: 100,
},
tableData: [],
chartHeight: this.tableHeight(269) / 2,
tableH: this.tableHeight(269) / 2,
legendList: [
{ id: 1, name: "", type: 2, color: "#FFCE6A" },
{ id: 2, name: "", type: 1, color: "#8EF0AB" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位:片/人",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
position: [-10, -16],
// position: [-17, -16],
color: "#68C483",
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
},
chartId: "chipPerCapitaBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipPerCapitaBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
window.addEventListener("resize", this._setTableHeight);
},
mounted() {
this.tableProp = this.tableProp1;
this.listQuery.type = 2;
this.listQuery.startDate = moment().format("yyyy-MM-DD");
this.listQuery.factory = [];
this.getList();
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
// 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新
if (this.$route.name === "ChipPerCapitaBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
if (this.$route.name === "ChipPerCapitaBM") {
this.chartNum++;
}
},
getSearch(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
this.getList();
},
getList() {
this.tableProps = [];
chipAnnualAverageProductionPage({ ...this.listQuery }).then((res) => {
if (res.data && res.data.records.length > 0) {
let msg = res.data.records[0];
let arr = [
{
prop: "yoy",
label: msg.yoyColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "queryValue",
label: msg.queryColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
];
this.tableProps = this.tableProps1.concat(arr);
this.tableData = res.data.records;
// 设置图例
this.legendList[0].name = msg.targetColumn;
this.legendList[1].name = msg.yoyColumn;
this.legendList[2].name = msg.queryColumn;
this.chartMsg.series[0].name = msg.targetColumn;
this.chartMsg.series[1].name = msg.yoyColumn;
this.chartMsg.series[2].name = msg.queryColumn;
// 设置偏移量
switch (this.listQuery.type) {
case 0:
this.chartMsg.series[1].label.position = [-5, -16];
break;
case 1:
this.chartMsg.series[1].label.position = [-5, -16];
break;
case 2:
this.chartMsg.series[1].label.position = [-10, -16];
break;
default:
this.chartMsg.series[1].label.position = [-17, -16];
}
// 设置chartMsg的series的数据
this.setChartMsg(res.data.records);
} else {
// 重置
this.resetMsg();
}
});
},
setChartMsg(val) {
let xData = [];
let lineData = [];
let barData1 = [];
let barData2 = [];
for (let i = 0; i < val.length; i++) {
this.factoryList.map((item) => {
if (item.id === val[i].factory) {
xData.push(item.name);
}
});
lineData.push(val[i].target || 0);
barData1.push(val[i].yoy || 0);
barData2.push(val[i].queryValue || 0);
}
this.chartMsg.xData = xData;
this.chartMsg.series[0].data = lineData;
this.chartMsg.series[1].data = barData1;
this.chartMsg.series[2].data = barData2;
this.chartMsg.xData = xData;
},
resetMsg() {
this.tableProps = this.tableProps1;
this.tableData = [];
this.chartMsg = {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/片",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
// position: [-5, -16],
// position: [-5, -16],
position: [-10, -16],
// position: [-17, -16],
color: "#68C483",
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
},
},
],
};
},
handleExport(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
let fileName = "芯片人均产量对标.xls";
chipAnnualAverageProductionExport({ ...this.listQuery })
.then((response) => {
this.$download.excel(response, fileName);
this.$message.success("导出成功");
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped>
.containerTop {
height: 64px;
}
.containerTop,
.containerBottom {
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
height: calc(100vh - 201px);
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@@ -1,348 +0,0 @@
<template>
<div>
<div class="containerTop">
<bmSearchBar @getSearch="getSearch" @handleExport="handleExport" />
</div>
<div class="containerBottom">
<div class="smallTitle">芯片良率</div>
<bm-line-bar
:chartHeight="chartHeight"
:legendList="legendList"
:chartMsg="chartMsg"
:chartId="chartId"
:chartNum="chartNum"
/>
<base-table
:table-props="tableProps"
:page="listQuery.current"
:limit="listQuery.size"
:table-data="tableData"
:max-height="tableH"
/>
</div>
</div>
</template>
<script>
import bmSearchBar from "../components/bmSearchBar.vue";
import BmLineBar from "../components/bmLineBar.vue";
import {
chipyieldRatePage,
chipyieldRateExport,
} from "@/api/report/benchmarking.js";
import moment from "moment";
export default {
name: "ChipYieldBM",
data() {
return {
factoryList: [
{ id: 0, name: "瑞昌" },
{ id: 1, name: "邯郸" },
],
tableProps: [],
tableProps1: [
{
prop: "factory",
label: "工厂名称",
filter: (val) => this.factoryList[val].name,
minWidth: 150,
showOverflowtooltip: true,
},
{
prop: "item",
label: "科目",
minWidth: 120,
showOverflowtooltip: true,
},
{
prop: "unit",
label: "单位",
minWidth: 80,
showOverflowtooltip: true,
},
],
listQuery: {
current: 1,
size: 100,
},
tableData: [],
chartHeight: this.tableHeight(269) / 2,
tableH: this.tableHeight(269) / 2,
legendList: [
{ id: 1, name: "", type: 2, color: "#FFCE6A" },
{ id: 2, name: "", type: 1, color: "#8EF0AB" },
{ id: 3, name: "", type: 1, color: "#288AFF" },
],
chartMsg: {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/%",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
},
chartId: "chipYieldBMChart",
chartNum: 1,
};
},
components: {
bmSearchBar,
BmLineBar,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
// 监听左侧菜单栏是否展开
isOpen(val) {
if (this.$route.name === "ChipYieldBM") {
this.chartNum++;
}
},
},
created() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
window.addEventListener("resize", this._setTableHeight);
},
mounted() {
this.tableProp = this.tableProp1;
this.listQuery.type = 2;
this.listQuery.startDate = moment().format("yyyy-MM-DD");
this.listQuery.factory = [];
this.getList();
},
destroyed() {
window.removeEventListener("resize", this._setTableHeight);
},
activated() {
// 图重新加载,为了防止窗口变化后尺寸图显示不佳,数据不更新
if (this.$route.name === "ChipYieldBM") {
this.chartNum++;
}
},
methods: {
_setTableHeight() {
this.tableH = this.tableHeight(269) / 2;
this.chartHeight = this.tableHeight(269) / 2;
if (this.$route.name === "ChipYieldBM") {
this.chartNum++;
}
},
getSearch(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
this.getList();
},
getList() {
this.tableProps = [];
chipyieldRatePage({ ...this.listQuery }).then((res) => {
if (res.data && res.data.records.length > 0) {
let msg = res.data.records[0];
let arr = [
{
prop: "yoy",
label: msg.yoyColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "queryValue",
label: msg.queryColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
{
prop: "target",
label: msg.targetColumn,
filter: (val) => (val || val === 0 ? val : "-"),
minWidth: 150,
},
];
this.tableProps = this.tableProps1.concat(arr);
this.tableData = res.data.records;
// 设置图例
this.legendList[0].name = msg.targetColumn;
this.legendList[1].name = msg.yoyColumn;
this.legendList[2].name = msg.queryColumn;
this.chartMsg.series[0].name = msg.targetColumn;
this.chartMsg.series[1].name = msg.yoyColumn;
this.chartMsg.series[2].name = msg.queryColumn;
// 设置chartMsg的series的数据
this.setChartMsg(res.data.records);
} else {
// 重置
this.resetMsg();
}
});
},
setChartMsg(val) {
let xData = [];
let lineData = [];
let barData1 = [];
let barData2 = [];
for (let i = 0; i < val.length; i++) {
this.factoryList.map((item) => {
if (item.id === val[i].factory) {
xData.push(item.name);
}
});
lineData.push({
name: "%",
value: val[i].target || 0,
});
barData1.push({ name: "%", value: val[i].yoy || 0 });
barData2.push({
name: "%",
value: val[i].queryValue || 0,
});
}
this.chartMsg.xData = xData;
this.chartMsg.series[0].data = lineData;
this.chartMsg.series[1].data = barData1;
this.chartMsg.series[2].data = barData2;
this.chartMsg.xData = xData;
},
resetMsg() {
this.tableProps = this.tableProps1;
this.tableData = [];
this.chartMsg = {
color: ["#FFCE6A", "#8EF0AB", "#288AFF"],
xData: [],
yName: "单位/%",
series: [
{
name: "1",
data: [],
type: "line",
symbol: "circle",
symbolSize: 6,
label: {
show: true,
color: "#FFAE17",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "2",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [-18, -16],
color: "#68C483",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
{
name: "3",
data: [],
type: "bar",
barWidth: 20,
label: {
show: true,
position: [0, -16],
color: "#288AFF",
formatter: function (params) {
return params.value.toFixed(2) + "%";
},
},
},
],
};
},
handleExport(val) {
this.listQuery.type = val.type;
this.listQuery.startDate = val.startDate;
this.listQuery.factory = val.factory;
let fileName = "芯片良率对标.xls";
chipyieldRateExport({ ...this.listQuery })
.then((response) => {
this.$download.excel(response, fileName);
this.$message.success("导出成功");
})
.catch(() => {});
},
},
};
</script>
<style lang="scss" scoped>
.containerTop {
height: 64px;
}
.containerTop,
.containerBottom {
position: relative;
background-color: #fff;
border-radius: 8px;
padding: 16px;
}
.containerBottom {
height: calc(100vh - 201px);
margin-top: 8px;
.smallTitle {
font-size: 16px;
color: #000;
margin-bottom: 15px;
}
.smallTitle::before {
display: inline-block;
width: 4px;
height: 16px;
background: #0b58ff;
content: "";
margin-right: 8px;
vertical-align: -3px;
}
}
</style>

View File

@@ -1,157 +0,0 @@
<template>
<div
:id="chartId"
:style="{ width: '100%', height: chartHeight + 'px' }"
></div>
</template>
<script>
import * as echarts from "echarts";
import { debounce } from "@/utils/debounce";
export default {
name: "BaseChart",
data() {
return {
myChart: "",
option: {
color: [],
// color: ["#8EF0AB", "#63BDFF", "#288AFF"],
grid: {
left: 70,
right: 0,
bottom: 30,
top: 30,
},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
formatter: function (params) {
var res = `<span style='color:rgba(0,0,0,0.8)'>${params[0].axisValueLabel}</span>`;
for (var i = 0, l = params.length; i < l; i++) {
res +=
"<br/>" +
`${
params[i].seriesType === "line"
? '<img width="10" height="10" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${params[i].color}"></span>`
}` +
`<span style='display:inline-block;width:180px;color:rgba(0,0,0,0.8);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(0,0,0,0.48);font-size:14px;'>${
params[i].name === "%"
? (params[i].value ? params[i].value.toFixed(2) : "0.00") +
params[i].name
: String(params[i].value).replace(
/\B(?=(\d{3})+(?!\d))/g,
","
)
}</span>`;
}
return res;
},
},
xAxis: {
type: "category",
data: [],
axisTick: {
show: false,
},
axisPointer: {
type: "shadow",
},
},
yAxis: {
type: "value",
name: "",
nameTextStyle: {
fontSize: 12,
align: "right",
},
axisLabel: {},
},
series: [],
},
};
},
props: {
chartHeight: {
type: Number,
default: 300,
},
legendList: {
type: Array,
default: () => [],
},
chartMsg: {
type: Object,
default: () => {},
},
chartId: {
type: String,
default: "bmChart",
},
chartNum: {
type: Number,
default: 1,
},
},
watch: {
chartHeight: {
handler(newVal) {
this.chartHeight = newVal;
},
},
chartNum(val) {
this.canvasReset();
},
chartMsg: {
handler(newVal) {
this.canvasReset();
},
deep: true,
},
},
mounted() {
this.canvasReset();
},
methods: {
canvasReset() {
debounce(() => {
this.getMes();
}, 500)();
},
getMes() {
if (this.myChart) {
this.myChart.dispose();
}
var chartDom = document.getElementById(this.chartId);
this.myChart = echarts.init(chartDom);
this.option.color = this.chartMsg.color;
this.option.xAxis.data = this.chartMsg.xData;
this.option.yAxis.name = this.chartMsg.yName;
if (
this.chartMsg.series.length > 0 &&
this.chartMsg.series[0].data[0].name === "%"
) {
this.option.yAxis.axisLabel = {
formatter: function (value) {
return value + ".00%";
},
};
} else {
this.option.yAxis.axisLabel = {
formatter: function (value) {
return value;
},
};
}
// this.option.yAxis.axisLabel = this.chartMsg.yAxisLabel;
this.option.series = this.chartMsg.series;
this.myChart.setOption(this.option);
},
},
};
</script>

View File

@@ -1,156 +0,0 @@
<!-- 只适用于指标完成情况对标 -->
<template>
<div>
<!-- 图例 -->
<div
class="legend"
v-show="
this.chartMsg1.series[0].data.length > 0 ||
this.chartMsg2.series[0].data.length > 0
"
>
<span class="item" v-for="item in legendList" :key="item.id">
<span
v-if="item.type === 1"
class="block"
:style="{ backgroundColor: item.color }"
></span>
<span
v-if="item.type === 2"
class="line"
:style="{ backgroundColor: item.color }"
>
<span
class="line-block"
:style="{ backgroundColor: item.color }"
></span>
</span>
{{ item.name }}</span
>
</div>
<!-- 图 -->
<div>
<div
style="
display: inline-block;
width: 79%;
vertical-align: top;
padding-right: 20px;
"
>
<base-chart
v-show="this.chartMsg1.series[0].data.length > 0"
:chartHeight="chartHeight"
:chartWidth="chartWidth1"
:chartMsg="chartMsg1"
chartId="targetChartLeft"
:chartNum="chartNum"
/>
<!-- 暂无数据 -->
<div
:style="{ height: chartHeight + 'px' }"
v-show="this.chartMsg1.series[0].data.length === 0"
>
<div
class="no-data-bg"
style="position: relative; left: 50%; transform: translateX(-50%)"
></div>
</div>
</div>
<div style="display: inline-block; width: 20%; vertical-align: top">
<base-chart
v-show="this.chartMsg2.series[0].data.length > 0"
:chartHeight="chartHeight"
:chartWidth="chartWidth2"
:chartMsg="chartMsg2"
chartId="targetChartRight"
:chartNum="chartNum"
/>
<!-- 暂无数据 -->
<div
:style="{ height: chartHeight + 'px' }"
v-show="this.chartMsg2.series[0].data.length === 0"
>
<div
class="no-data-bg"
style="
position: relative;
left: 50%;
transform: translateX(-50%);
width: 80%;
"
></div>
</div>
</div>
</div>
</div>
</template>
<script>
import baseChart from "./baseChart.vue";
export default {
name: "bmBarComplete",
data() {
return {
chartWidth1: "60%",
chartWidth2: "20%",
};
},
props: {
chartHeight: {
type: Number,
default: 300,
},
legendList: {
type: Array,
default: () => [],
},
chartMsg1: {
type: Object,
default: () => {},
},
chartMsg2: {
type: Object,
default: () => {},
},
chartNum: {
type: Number,
default: 1,
},
},
components: { baseChart },
};
</script>
<style lang="scss" scoped>
.legend {
position: absolute;
right: 10px;
top: 15px;
.item {
display: inline-block;
margin-right: 10px;
font-size: 14px;
color: #8c8c8c;
.block {
width: 10px;
height: 10px;
display: inline-block;
margin-right: 4px;
}
.line {
width: 10px;
height: 10px;
border-radius: 5px;
display: inline-block;
margin-right: 4px;
position: relative;
.line-block {
position: absolute;
width: 20px;
height: 2px;
left: -5px;
top: 4px;
}
}
}
}
</style>

Some files were not shown because too many files have changed in this diff Show More