@@ -96,7 +96,7 @@ const actions = { | |||
let preData = dataArr.previousProdOutputOutDO | |||
let preFtoData = dataArr.previousProdOutputFtoDO | |||
// const targetArr = await getHomeInfo(); | |||
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO,preData,preFtoData); | |||
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetOutputDO,dataArr.prodOutputFtoDO,dataArr.previousProdOutputOutDO,preData,preFtoData); | |||
commit("SET_HOME_INFO", payload); | |||
}, | |||
/** 初始化驾驶舱数据 */ | |||
@@ -345,7 +345,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO | |||
if (preData && preData[0] != null) { | |||
for (const factory of preData) { | |||
const fId = getPreFactoryId(factory); | |||
chipInvest.previous[fId] = factory.previousYearInputNumber; | |||
// chipInvest.previous[fId] = factory.previousYearInputNumber; | |||
// chipOeeRate.current[fId] = factory.oee; | |||
chipOeeRate.previous[fId] = factory.previousYearOee; | |||
// 转化效率 | |||
@@ -83,6 +83,7 @@ export default { | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
align: "right", | |||
}, | |||
axisTick: { | |||
show: false, | |||
@@ -7,9 +7,13 @@ | |||
<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" @click="handleExport" /> | |||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']" | |||
@click="toggleFullScreen" /> | |||
<el-tooltip 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> | |||
</section> | |||
<div class="page-title">{{ companyName }}</div> | |||
@@ -46,7 +50,8 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
isFullscreen: false, | |||
// isFullscreen: false, | |||
content:'全屏', | |||
dataList: [ | |||
{ id: 1, name: "日" }, | |||
{ id: 2, name: "周" }, | |||
@@ -61,6 +66,7 @@ export default { | |||
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; | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-23 15:49:14 | |||
* @LastEditTime: 2024-05-31 16:06:50 | |||
* @LastEditTime: 2024-06-04 08:54:10 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -84,6 +84,7 @@ export default { | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
align: "right", | |||
}, | |||
axisTick: { | |||
show: false, | |||
@@ -0,0 +1,234 @@ | |||
<!-- | |||
* @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 :icon="icon"></Icon> | |||
<h2 class="container-title">{{ title }}</h2> | |||
</div> | |||
<div | |||
class="container-body" | |||
:class="[ | |||
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | |||
]" | |||
> | |||
<slot /> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import ContainerIconVue from "./ContainerIcon.vue"; | |||
export default { | |||
name: "DashboardContainer", | |||
components: { | |||
Icon: ContainerIconVue, | |||
}, | |||
props: { | |||
side: { | |||
type: String, | |||
default: "left", | |||
}, | |||
icon: { | |||
type: String, | |||
default: "cube", | |||
}, | |||
title: { | |||
type: String, | |||
default: "Default Title", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
}, | |||
computed: {}, | |||
methods: {}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"> | |||
.copilot-container { | |||
height: 0; | |||
flex: 1; | |||
display: flex; | |||
flex-direction: column; | |||
position: relative; | |||
box-shadow: inset 0 0 20px 1px #fff1; | |||
backdrop-filter: blur(4px); | |||
&::before { | |||
content: ""; | |||
position: absolute; | |||
display: inline-block; | |||
height: 100%; | |||
width: 0.11415vw; | |||
border-radius: 2px; | |||
top: 0%; | |||
left: 0; | |||
background: radial-gradient( | |||
circle at center, | |||
#024798 2%, | |||
#024798 30%, | |||
transparent | |||
); | |||
z-index: 1; | |||
} | |||
&::after { | |||
content: ""; | |||
position: absolute; | |||
display: inline-block; | |||
width: 60%; | |||
height: 0.31415vh; | |||
border-radius: 2px; | |||
left: 8%; | |||
bottom: 0; | |||
background: linear-gradient(to right, #024798, transparent); | |||
z-index: 0; | |||
} | |||
.container-head { | |||
// height: 40px; | |||
height: 3.8vh; | |||
padding: 8px; | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
.container-title { | |||
font-size: 1.18vw; | |||
line-height: 1.39vw; | |||
font-weight: normal; | |||
letter-spacing: 2px; | |||
} | |||
} | |||
.container-body { | |||
padding: 12px; | |||
display: flex; | |||
flex-direction: column; | |||
flex: 1; | |||
height: 0; | |||
} | |||
.corner { | |||
z-index: 1; | |||
position: absolute; | |||
// width: 16px; | |||
// height: 16px; | |||
width: 0.95vw; | |||
height: 0.95vw; | |||
} | |||
.corner.tl { | |||
border-top: 2px solid #0175dc; | |||
border-left: 2px solid #0175dc; | |||
top: 0; | |||
left: 0; | |||
} | |||
.corner.tr { | |||
top: 0; | |||
right: 0; | |||
border-top: 2px solid #0175dc; | |||
border-right: 2px solid #0175dc; | |||
} | |||
.corner.bl { | |||
// width: 20px; | |||
// height: 20px; | |||
width: 1.064vw; | |||
height: 1.064vw; | |||
bottom: 0; | |||
left: 0; | |||
// border-left: 10px solid #0175dc; | |||
// border-bottom: 10px solid #0175dc; | |||
// border-top: 10px solid transparent; | |||
// border-right: 10px solid transparent; | |||
border-left: 0.532vw solid transparent; | |||
border-bottom: .6vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid transparent; | |||
} | |||
.corner.br { | |||
bottom: 0; | |||
right: 0; | |||
// width: 20px; | |||
// height: 20px; | |||
width: 1.064vw; | |||
height: 1.064vw; | |||
border-left: 0.532vw solid transparent; | |||
border-bottom: 0.532vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid #0175dc; | |||
// border-left: 10px solid transparent; | |||
// border-bottom: 10px solid #0175dc; | |||
// border-top: 10px solid transparent; | |||
// border-right: 10px solid #0175dc; | |||
// transform: rotate(-90deg); | |||
} | |||
.gradient-to-right { | |||
background: linear-gradient(to right, #0c3f68cc, transparent); | |||
} | |||
.gradient-to-left { | |||
background: linear-gradient(to left, #0c3f68cc, transparent); | |||
} | |||
.body-gradient-to-right { | |||
background: linear-gradient(to right, #0003, transparent); | |||
} | |||
.body-gradient-to-left { | |||
background: linear-gradient(to left, #0003, transparent); | |||
} | |||
} | |||
</style> |
@@ -1,8 +1,8 @@ | |||
<!-- | |||
<!-- | |||
filename: Container.vue | |||
author: liubin | |||
date: 2024-04-09 10:44:09 | |||
description: | |||
description: | |||
--> | |||
<template> | |||
@@ -41,8 +41,8 @@ | |||
<!-- decoration --> | |||
<div class="corner tl"></div> | |||
<div class="corner tr"></div> | |||
<div v-if="side == 'left'" class="corner bl"></div> | |||
<div v-if="side == 'right'" class="corner br"></div> | |||
<div class="corner bl"></div> | |||
<div class="corner br"></div> | |||
<!-- content --> | |||
<div | |||
class="container-head" | |||
@@ -207,10 +207,11 @@ export default { | |||
// 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: 0.532vw solid #0175dc; | |||
border-bottom: .6vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid #0175dc; | |||
border-right: 0.532vw solid transparent; | |||
} | |||
.gradient-to-right { |
@@ -0,0 +1,239 @@ | |||
<!-- | |||
* @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: | |||
--> | |||
<template> | |||
<div class="copilot-container"> | |||
<!-- refresh btn --> | |||
<button | |||
v-if="0" | |||
style=" | |||
appearance: none; | |||
outline: none; | |||
border: none; | |||
background: none; | |||
color: #fff; | |||
cursor: pointer; | |||
position: absolute; | |||
top: 8px; | |||
right: 8px; | |||
" | |||
@click="$emit('refresh')" | |||
>rotate | |||
<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 :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; | |||
border-left: 0.532vw solid transparent; | |||
border-bottom: 0.532vw solid #0175dc; | |||
border-top: 0.532vw solid transparent; | |||
border-right: 0.532vw solid #0175dc; | |||
} | |||
.gradient-to-right { | |||
background: linear-gradient(to right, #0c3f68cc, transparent); | |||
} | |||
.gradient-to-left { | |||
background: linear-gradient(to left, #0c3f68cc, transparent); | |||
} | |||
.body-gradient-to-right { | |||
background: linear-gradient(to right, #0003, transparent); | |||
} | |||
.body-gradient-to-left { | |||
background: linear-gradient(to left, #0003, transparent); | |||
} | |||
} | |||
</style> |
@@ -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, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-06-03 16:40:45 | |||
* @LastEditTime: 2024-06-04 14:18:52 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -33,7 +33,15 @@ export default { | |||
default: "同比", | |||
}, | |||
}, | |||
data() { | |||
return { | |||
// data: null | |||
} | |||
}, | |||
computed: { | |||
data() { | |||
return this.$store.getters.copilot.efficiency.stdRate | |||
}, | |||
cities() { | |||
console.log('ztl', this.$store.getters.copilot.efficiency.stdRate) | |||
// let getterName = ""; | |||
@@ -57,22 +65,22 @@ export default { | |||
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | |||
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, | |||
] | |||
if (this.$store.getters.copilot?.efficiency.stdRate?.previous) { | |||
this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach( | |||
if (this.data?.previous) { | |||
this.data?.previous.forEach( | |||
(v, idx) => { | |||
_cities[idx].previous = v ?? 0; | |||
} | |||
); | |||
} | |||
if (this.$store.getters.copilot?.efficiency.stdRate?.target) { | |||
this.$store.getters.copilot?.efficiency.stdRate?.target.forEach( | |||
if (this.data?.target) { | |||
this.data?.target.forEach( | |||
(v, idx) => { | |||
_cities[idx].target = v ?? 0; | |||
} | |||
) | |||
} | |||
if (this.$store.getters.copilot?.efficiency.stdRate?.current) { | |||
this.$store.getters.copilot?.efficiency.stdRate?.current.forEach( | |||
if (this.data?.current) { | |||
this.data?.current.forEach( | |||
(v, idx) => { | |||
_cities[idx].current = v ?? 0; | |||
} | |||
@@ -86,19 +94,24 @@ export default { | |||
return arr; | |||
}, | |||
}, | |||
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 }, | |||
// ], | |||
}; | |||
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 }, | |||
// // ], | |||
// }; | |||
// }, | |||
methods: {}, | |||
}; | |||
</script> | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:04:53 | |||
* @LastEditTime: 2024-06-03 16:08:27 | |||
* @LastEditTime: 2024-06-05 09:45:47 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -12,17 +12,17 @@ | |||
<Container title="芯片良率" icon="chip2"> | |||
<ChipRate :period="period" :than="than" /> | |||
</Container> | |||
<Container title="标准组件良率" icon="std"> | |||
<left-container title="标准组件良率" icon="std"> | |||
<StdRate :period="period" :than="than" /> | |||
</Container> | |||
</left-container> | |||
</section> | |||
<section class="bottom flex"> | |||
<Container title="芯片OEE" icon="chip"> | |||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" /> | |||
</Container> | |||
<Container title="转化效率" icon="cube"> | |||
<left-container title="转化效率" icon="cube"> | |||
<TransformRate :transformRate="transformRate" :period="period" :than="than" /> | |||
</Container> | |||
</left-container> | |||
</section> | |||
@@ -30,7 +30,8 @@ | |||
</template> | |||
<script> | |||
import Container from "@/views/copilot/components/Container.vue"; | |||
import Container from "@/views/copilot/components/rightContainer.vue"; | |||
import leftContainer from "@/views/copilot/components/leftContainer.vue"; | |||
import ChipOeeVue from "./components/ChipOee.vue"; | |||
import ChipRateVue from "./components/ChipRate.vue"; | |||
import StdRateVue from "./components/StdRate.vue"; | |||
@@ -40,6 +41,7 @@ export default { | |||
name: "efficiencyCopilot", | |||
components: { | |||
Container, | |||
leftContainer, | |||
ChipOee: ChipOeeVue, | |||
ChipRate: ChipRateVue, | |||
StdRate: StdRateVue, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-20 16:04:18 | |||
* @LastEditTime: 2024-06-03 15:45:58 | |||
* @LastEditTime: 2024-06-03 16:46:11 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -25,7 +25,7 @@ import CopilotHeaderVue from "./components/CopilotHeader.vue"; | |||
import EfficiencyCopilot from "./efficiency/index.vue"; | |||
export default { | |||
name: "CopilotContainer", | |||
name: "copilotEfficiencyContainer", | |||
components: { | |||
CopilotHeaderVue, | |||
EfficiencyCopilot, | |||
@@ -8,9 +8,9 @@ | |||
<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"> | |||
<left-container title="工单监控" icon="order"> | |||
<order :prodOrder="prodOrder" /> | |||
</db-container> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
<!-- </db-container> --> | |||
@@ -26,7 +26,8 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import Container from "./components/rightContainer.vue"; | |||
import leftContainer from "./components/leftContainer.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import { deepClone } from "@/utils"; | |||
// import Store from "./components/Store.vue"; | |||
@@ -38,6 +39,7 @@ export default { | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
LeftContainer: leftContainer, | |||
ProdMonitor, | |||
// Store, | |||
// Energy, | |||
@@ -8,9 +8,9 @@ | |||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | |||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | |||
</db-container> | |||
<db-container title="工单监控" icon="order"> | |||
<left-container title="工单监控" icon="order"> | |||
<order :prodOrder="prodOrder" /> | |||
</db-container> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
<!-- </db-container> --> | |||
@@ -26,7 +26,8 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import Container from "./components/rightContainer.vue"; | |||
import leftContainer from "./components/leftContainer.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import { deepClone } from "@/utils"; | |||
// import Store from "./components/Store.vue"; | |||
@@ -38,6 +39,7 @@ export default { | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
LeftContainer: leftContainer, | |||
ProdMonitor, | |||
// Store, | |||
// Energy, | |||
@@ -231,7 +231,13 @@ export default { | |||
console.log("this.energyCockpits", this.energyCockpits); | |||
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量']; | |||
// let n = 0; | |||
let seriesArr =[] | |||
let seriesArr = [] | |||
// let arr = [] | |||
// if (this.energyCockpits) { | |||
// this.energyCockpits.forEach(ele => { | |||
// arr.push() | |||
// }); | |||
// } | |||
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 | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-30 08:58:39 | |||
* @LastEditTime: 2024-05-31 15:52:28 | |||
* @LastEditTime: 2024-06-05 09:15:03 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -83,6 +83,7 @@ export default { | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
align: "right", | |||
}, | |||
axisTick: { | |||
show: false, | |||
@@ -173,32 +174,11 @@ export default { | |||
}, | |||
{ | |||
name: "", // "2024年目标值", | |||
type: "bar", | |||
type: "line", | |||
barWidth: 12, | |||
itemStyle: { | |||
borderRadius: [10, 10, 0, 0], | |||
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 | |||
}, | |||
color:'#f3c000' | |||
}, | |||
data: [], // this.series[0].data, | |||
}, | |||
@@ -336,8 +316,33 @@ export default { | |||
.legend-item:nth-child(2):before { | |||
background-color: #58adfa; | |||
} | |||
.legend-item:nth-child(3):before { | |||
background-color: #f3c000; | |||
} | |||
.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%); | |||
} | |||
} | |||
</style> |
@@ -23,7 +23,7 @@ | |||
<div class="separate"> | |||
<div> | |||
<span class="type">玻璃类型</span> | |||
<span class="type-name">标准组检产量</span> | |||
<span class="type-name">标准组件产量</span> | |||
</div> | |||
<div> | |||
<span class="type">良品数量</span> | |||
@@ -0,0 +1,241 @@ | |||
<!-- | |||
* @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 :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> |
@@ -0,0 +1,233 @@ | |||
<!-- | |||
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 :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> |
@@ -8,9 +8,9 @@ | |||
<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"> | |||
<left-container title="工单监控" icon="order"> | |||
<order :prodOrder="prodOrder" /> | |||
</db-container> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
<!-- </db-container> --> | |||
@@ -26,7 +26,8 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import Container from "./components/rightContainer.vue"; | |||
import leftContainer from "./components/leftContainer.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import { deepClone } from "@/utils"; | |||
// import Store from "./components/Store.vue"; | |||
@@ -38,6 +39,7 @@ export default { | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
LeftContainer: leftContainer, | |||
ProdMonitor, | |||
// Store, | |||
// Energy, | |||
@@ -8,9 +8,9 @@ | |||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | |||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | |||
</db-container> | |||
<db-container title="工单监控" icon="order"> | |||
<left-container title="工单监控" icon="order"> | |||
<order :prodOrder="prodOrder" /> | |||
</db-container> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
<!-- </db-container> --> | |||
@@ -26,7 +26,9 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import Container from "./components/rightContainer.vue"; | |||
import leftContainer from "./components/leftContainer.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import { deepClone } from "@/utils"; | |||
// import Store from "./components/Store.vue"; | |||
@@ -38,6 +40,7 @@ export default { | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
LeftContainer:leftContainer, | |||
ProdMonitor, | |||
// Store, | |||
// Energy, | |||
@@ -8,9 +8,9 @@ | |||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | |||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | |||
</db-container> | |||
<db-container title="工单监控" icon="order"> | |||
<left-container title="工单监控" icon="order"> | |||
<order :prodOrder="prodOrder" /> | |||
</db-container> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
<!-- </db-container> --> | |||
@@ -26,7 +26,8 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import Container from "./components/rightContainer.vue"; | |||
import leftContainer from "./components/leftContainer.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import { deepClone } from "@/utils"; | |||
// import Store from "./components/Store.vue"; | |||
@@ -38,6 +39,7 @@ export default { | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
LeftContainer: leftContainer, | |||
ProdMonitor, | |||
// Store, | |||
// Energy, | |||
@@ -8,9 +8,9 @@ | |||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | |||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | |||
</db-container> | |||
<db-container title="工单监控" icon="order"> | |||
<left-container title="工单监控" icon="order"> | |||
<order :prodOrder="prodOrder" /> | |||
</db-container> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
<!-- </db-container> --> | |||
@@ -26,7 +26,8 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import Container from "./components/rightContainer.vue"; | |||
import leftContainer from "./components/leftContainer.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import { deepClone } from "@/utils"; | |||
// import Store from "./components/Store.vue"; | |||
@@ -38,6 +39,7 @@ export default { | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
LeftContainer: leftContainer, | |||
ProdMonitor, | |||
// Store, | |||
// Energy, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-21 13:24:03 | |||
* @LastEditTime: 2024-05-21 13:24:03 | |||
* @LastEditTime: 2024-06-05 09:43:30 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -37,7 +37,7 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
// import Container from "./components/Container.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import Store from "./components/Store.vue"; | |||
import Energy from "./components/Energy.vue"; | |||
@@ -47,7 +47,7 @@ export default { | |||
name: "factoryData", | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
// DbContainer: Container, | |||
ProdMonitor, | |||
Store, | |||
Energy, | |||
@@ -8,9 +8,9 @@ | |||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | |||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | |||
</db-container> | |||
<db-container title="工单监控" icon="order"> | |||
<left-container title="工单监控" icon="order"> | |||
<order :prodOrder="prodOrder" /> | |||
</db-container> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
<!-- </db-container> --> | |||
@@ -26,7 +26,9 @@ | |||
</template> | |||
<script> | |||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; | |||
import Container from "./components/Container.vue"; | |||
import Container from "./components/rightContainer.vue"; | |||
import leftContainer from "./components/leftContainer.vue"; | |||
import ProdMonitor from "./components/ProdMonitor.vue"; | |||
import { deepClone } from "@/utils"; | |||
// import Store from "./components/Store.vue"; | |||
@@ -38,6 +40,7 @@ export default { | |||
components: { | |||
FactoryDataHeader, | |||
DbContainer: Container, | |||
LeftContainer: leftContainer, | |||
ProdMonitor, | |||
// Store, | |||
// Energy, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-20 13:32:59 | |||
* @LastEditTime: 2024-06-03 16:26:24 | |||
* @LastEditTime: 2024-06-05 13:43:13 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -115,21 +115,25 @@ export default { | |||
items = [ | |||
{ label: `${month}月${today}日累计`,}, | |||
{ label: `去年${month}月${today}日累计` }, | |||
{ label: `${month}月${today}日目标`, }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
items = [ | |||
{ label: `${month}月${today}日累计`}, | |||
{ label: `${yesterday}日累计`}, | |||
{ label: `${yesterday}日累计` }, | |||
{ label: `${month}月${today}日目标`, }, | |||
]; | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `本周累计`,}, | |||
{ label: `去年本周累计`}, | |||
{ label: `去年本周累计` }, | |||
{ label: `本周目标`, }, | |||
]; | |||
} else if (this.period === '周' && this.than === '环比') { | |||
items = [ | |||
{ label: `本周累计`,}, | |||
{ label: `上周累计`,}, | |||
{ label: `上周累计`, }, | |||
{ label: `本周目标`, }, | |||
]; | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
@@ -156,9 +160,9 @@ export default { | |||
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0 | |||
? "100%" : '0%', | |||
subtitle = | |||
this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`; | |||
this.period == "日" ? `${month}月${today}日累计完成` : this.period == "周" ? `本周累计完成` : this.period == "月" ? `${month}月累计完成` : `${year}年累计完成`; | |||
console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],) | |||
console.log(items) | |||
console.log(this.valueTuple[2]- this.valueTuple[1]) | |||
return getOptions({ | |||
titleValue, | |||
subtitle, | |||
@@ -166,7 +170,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, | |||
}); | |||
}, | |||
@@ -213,7 +217,8 @@ export default { | |||
}, | |||
}; | |||
function calculateItems(period, valueTuple,than) { | |||
function calculateItems(period, valueTuple, than) { | |||
console.log('valueTuple', valueTuple); | |||
let items = []; | |||
var day1 = new Date(); | |||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); | |||
@@ -231,21 +236,25 @@ function calculateItems(period, valueTuple,than) { | |||
items = [ | |||
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] }, | |||
{ label: `${month}月${today}日累计`, value: valueTuple[1] }, | |||
{ label: `${month}月${today}日目标`, value: valueTuple[2] }, | |||
]; | |||
} else if (period === '日' && than === '环比') { | |||
items = [ | |||
{ label: `${yesterday}日累计`, value: valueTuple[0] }, | |||
{ label: `${month}月${today}日累计`, value: valueTuple[1] }, | |||
{ label: `${month}月${today}日目标`, value: valueTuple[2] }, | |||
]; | |||
} else if (period === '周' && than === '同比') { | |||
items = [ | |||
{ label: `去年本周累计`, value: valueTuple[0] }, | |||
{ label: `本周累计`, value: valueTuple[1] }, | |||
{ label: `本周目标`, value: valueTuple[2] }, | |||
]; | |||
} else if (period === '周' && than === '环比') { | |||
items = [ | |||
{ label: `上周累计`, value: valueTuple[0] }, | |||
{ label: `本周累计`, value: valueTuple[1] }, | |||
{ label: `本周目标`, value: valueTuple[2] }, | |||
]; | |||
} else if (period === '月' && than === '同比') { | |||
items = [ | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-10 11:10:54 | |||
* @LastEditTime: 2024-05-28 13:36:07 | |||
* @LastEditTime: 2024-06-05 09:49:46 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -9,29 +9,32 @@ | |||
<template> | |||
<div class="yield-copilot"> | |||
<section class="top flex"> | |||
<db-container class="std-yield" title="标准组件产出" icon="std"> | |||
<right-container class="std-yield" title="标准组件产出" icon="std"> | |||
<std-output v-if="show" :period="period" :than="than" /> | |||
</db-container> | |||
</right-container> | |||
<db-container class="chip-yield" title="芯片产出" icon="chip2"> | |||
<chip-output v-if="show" :period="period" :than="than" /> | |||
</db-container> | |||
<db-container class="bipv-yield" title="BIPV产出" icon="bipv"> | |||
<left-container class="bipv-yield" title="BIPV产出" icon="bipv"> | |||
<bipv-output v-if="show" :period="period" :than="than" /> | |||
</db-container> | |||
</left-container> | |||
</section> | |||
<section class="bottom flex"> | |||
<db-container class="fto-involve" title="FTO投入"> | |||
<right-container class="fto-involve" title="FTO投入"> | |||
<fto-invest :period="period" :than="than" /> | |||
</db-container> | |||
<db-container class="chip-involve" title="芯片投入" icon="chip"> | |||
</right-container> | |||
<left-container class="chip-involve" title="芯片投入" icon="chip"> | |||
<chip-invest :period="period" :than="than" /> | |||
</db-container> | |||
</left-container> | |||
</section> | |||
</div> | |||
</template> | |||
<script> | |||
import Container from "@/views/copilot/components/Container.vue"; | |||
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 StdOutput from "./components/StdOutput.vue"; | |||
import ChipOutput from "./components/ChipOutput.vue"; | |||
import FtoInvest from "./components/FtoInvest.vue"; | |||
@@ -41,7 +44,9 @@ import ChipInvest from "./components/ChipInvest.vue"; | |||
export default { | |||
name: "YieldCopilot", | |||
components: { | |||
DbContainer: Container, | |||
DbContainer: twoContainer, | |||
leftContainer, | |||
rightContainer, | |||
StdOutput, | |||
ChipOutput, | |||
BipvOutput, | |||
@@ -61,6 +61,9 @@ export default ({ | |||
value: currentSum, | |||
name: currentName, | |||
selected: false, | |||
tooltip: { | |||
formatter: `${currentName} : ${currentSum}` | |||
}, | |||
itemStyle: { | |||
borderJoin: "round", | |||
borderCap: "round", | |||
@@ -80,10 +83,11 @@ export default ({ | |||
}, | |||
}, | |||
{ | |||
value:currentSum == 0 | |||
? 1 | |||
: 0, | |||
name: "未达成累计", | |||
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), | |||
name: currentName, | |||
tooltip: { | |||
formatter: `${currentName} : ${currentSum}` | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
}, | |||
@@ -106,6 +110,9 @@ export default ({ | |||
value: previousSum, | |||
name: preName, | |||
selected: false, | |||
tooltip: { | |||
formatter: `${preName} : ${previousSum}` | |||
}, | |||
itemStyle: { | |||
borderJoin: "round", | |||
borderCap: "round", | |||
@@ -125,10 +132,12 @@ export default ({ | |||
}, | |||
}, | |||
{ | |||
value:previousSum == 0 | |||
? 1 | |||
: 0, | |||
name: "-", | |||
value:previousSum === 0 ? 1 : 0, | |||
name: preName, | |||
tooltip: { | |||
formatter: `${preName} : ${previousSum}` | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
}, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-04-28 13:42:51 | |||
* @LastEditTime: 2024-05-31 16:11:56 | |||
* @LastEditTime: 2024-06-05 14:12:31 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -98,9 +98,12 @@ export default { | |||
}, | |||
data: [ | |||
{ | |||
value: 90, | |||
value: 0, | |||
name: `${year}累计产出`, | |||
selected: false, | |||
tooltip: { | |||
formatter: null, | |||
}, | |||
itemStyle: { | |||
borderJoin: "round", | |||
borderCap: "round", | |||
@@ -120,8 +123,11 @@ export default { | |||
}, | |||
}, | |||
{ | |||
value: 20, | |||
name: "-", | |||
value: 0, | |||
name: `${year}目标`, | |||
tooltip: { | |||
formatter: null, | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
}, | |||
@@ -141,9 +147,12 @@ export default { | |||
}, | |||
data: [ | |||
{ | |||
value: 90, | |||
value: 0, | |||
name: `${year - 1}累计产出`, | |||
selected: false, | |||
tooltip: { | |||
formatter: null, | |||
}, | |||
itemStyle: { | |||
borderJoin: "round", | |||
borderCap: "round", | |||
@@ -164,7 +173,10 @@ export default { | |||
}, | |||
{ | |||
value: 0, | |||
name: "-", | |||
name: `${year - 1}累计产出`, | |||
tooltip: { | |||
formatter:null, | |||
}, | |||
itemStyle: { color: "transparent" }, | |||
label: { show: false }, | |||
}, | |||
@@ -209,7 +221,9 @@ export default { | |||
}; | |||
}, | |||
actualOptions() { | |||
const year = new Date().getFullYear() | |||
const options = JSON.parse(JSON.stringify(this.options)); | |||
// console.log('options', options); | |||
// 标题 | |||
if (!this.output.target) options.title.text = "0%"; | |||
else | |||
@@ -221,20 +235,29 @@ export default { | |||
this.output.current == 0 | |||
) { | |||
options.series[1].data[0].value = 0; | |||
options.series[1].data[1].value = 100; | |||
options.series[1].data[1].value = 1; | |||
options.series[1].data[0].tooltip.formatter = year + '累计完成:0'; | |||
options.series[1].data[1].tooltip.formatter = year + '累计完成:0'; | |||
} else { | |||
options.series[1].data[0].value = this.output.current; | |||
options.series[1].data[1].value = | |||
this.output.target - this.output.current; | |||
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current; | |||
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current; | |||
} | |||
// 内环 | |||
if (this.output.previous == 0) { | |||
options.series[2].data[0].value = 0; | |||
options.series[2].data[1].value = 100; | |||
options.series[2].data[1].value = 1; | |||
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0; | |||
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0; | |||
} else { | |||
options.series[2].data[0].value = this.output.previous; | |||
options.series[2].data[1].value = 0; | |||
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; | |||
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; | |||
} | |||
console.log('options', options); | |||
return options; | |||
}, | |||
}, | |||
@@ -86,6 +86,7 @@ export default { | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
align:'right' | |||
}, | |||
axisTick: { | |||
show: false, | |||
@@ -113,10 +114,11 @@ export default { | |||
barWidth: 12, | |||
label: { | |||
show: true, //开启显示 | |||
align: 'right', //在上方显示 | |||
position: 'top', //在上方显示 | |||
textStyle: { //数值样式 | |||
color: '#DFF1FE', | |||
fontSize: 16 | |||
fontSize: 12 | |||
} | |||
}, | |||
itemStyle: { | |||
@@ -156,10 +158,11 @@ export default { | |||
barWidth: 12, | |||
label: { | |||
show: true, //开启显示 | |||
align: 'left', //在上方显示 | |||
position: 'top', //在上方显示 | |||
textStyle: { //数值样式 | |||
color: '#DFF1FE', | |||
fontSize: 16 | |||
fontSize: 12 | |||
} | |||
}, | |||
itemStyle: { | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-04-28 13:42:51 | |||
* @LastEditTime: 2024-05-31 16:13:47 | |||
* @LastEditTime: 2024-06-04 15:35:54 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -92,6 +92,7 @@ export default { | |||
nameTextStyle: { | |||
color: "#fff", | |||
fontSize: 12, | |||
align: 'right' | |||
}, | |||
axisTick: { | |||
show: false, | |||
@@ -5,8 +5,8 @@ | |||
<!-- <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="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> --> | |||
@@ -69,11 +69,11 @@ const LOCATIONS = [ | |||
// 蚌埠2 | |||
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' }, | |||
// 江西 瑞昌 | |||
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:68.8,lty:52, path: 'factoryData/factory-data' }, | |||
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' }, | |||
// 湖南 株洲 | |||
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' }, | |||
// 邯郸 | |||
{ x: 58, y: 45, tx: 47, ty: 34, lx: 58.7, ly: 34, ltx: 53, lty: 34, path: 'factoryData/hdIndex' }, | |||
{ x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' }, | |||
]; | |||
// rcLine.style.left = `66.8%`; | |||
// rcLine.style.top = `52%`; | |||
@@ -395,9 +395,9 @@ export default { | |||
.hdLine { | |||
position: absolute; | |||
left: 58.7%; | |||
/* left: 58.7%; */ | |||
width: 1px; | |||
top: 34%; | |||
/* top: 34%; */ | |||
display: inline-block; | |||
/* // x: 60, y: 58, */ | |||
height: 6vw; | |||
@@ -405,9 +405,9 @@ export default { | |||
} | |||
.hdLineTwo { | |||
position: absolute; | |||
left: 53%; | |||
/* left: 53%; */ | |||
width: 5vw; | |||
top: 34%; | |||
/* top: 34%; */ | |||
display: inline-block; | |||
/* // x: 60, y: 58, */ | |||
height: 1px; | |||