Reviewed-on: http://git.picaiba.com/mt-fe-group/yudao-init/pulls/36pull/48/head
@@ -8,10 +8,14 @@ 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: | |||
// contentBoxSize.inlineSize < this.MIN_WIDTH | |||
// ? this.MIN_WIDTH | |||
// : contentBoxSize.inlineSize, | |||
// width: | |||
// entry.contentRect.width < this.MIN_WIDTH | |||
// ? this.MIN_WIDTH | |||
// : entry.contentRect.width, | |||
height: contentBoxSize.blockSize, | |||
}); | |||
} else { | |||
@@ -4,8 +4,13 @@ | |||
<!-- <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 ['同比', '环比']" :key="i" :label="i" :active="i === than" | |||
@click="() => $emit('update:than', i)" /> | |||
<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)" /> --> | |||
</section> | |||
<div class="page-title">{{ companyName }}</div> | |||
<section class="menu2"> | |||
<div class="btn-group"> | |||
<el-tooltip class="item" effect="dark" content="导出" placement="top"> | |||
<button type="button" class="export-btn" @click="handleExport" /> | |||
@@ -16,11 +21,6 @@ | |||
</el-tooltip> | |||
</div> | |||
</section> | |||
<div class="page-title">{{ companyName }}</div> | |||
<section class="menu2"> | |||
<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> | |||
@@ -50,7 +50,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
// isFullscreen: false, | |||
isFullscreen: false, | |||
content:'全屏', | |||
dataList: [ | |||
{ id: 1, name: "日" }, | |||
@@ -109,12 +109,14 @@ export default { | |||
.factory-header > .menu2 { | |||
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; | |||
@@ -60,7 +60,7 @@ export default { | |||
const year = new Date().getFullYear(); | |||
if (this.period === '日' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${month}月${today}日`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
@@ -70,7 +70,7 @@ export default { | |||
]; | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年本周`, color: "#12f7f1" }, | |||
{ label: `${year-1}年本周`, color: "#12f7f1" }, | |||
{ label: `本周`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '周' && this.than === '环比') { | |||
@@ -80,7 +80,7 @@ export default { | |||
]; | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月`, color: "#12f7f1" }, | |||
{ label: `${month}月`, color: "#58adfa" }, | |||
{ label: `${month}月目标`, color: "#58adfa" }, | |||
// { label: `${month}月目标`, value: valueTuple[2] }, | |||
@@ -177,7 +177,7 @@ function getTemplate(period, dataList, than) { | |||
if (period === '日' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月${today}日`, | |||
name: `${year-1}年${month}月${today}日`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -201,7 +201,7 @@ function getTemplate(period, dataList, than) { | |||
} else if (period === '周' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年本周`, | |||
name: `${year-1}年本周`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -225,7 +225,7 @@ function getTemplate(period, dataList, than) { | |||
} else if (period === '月' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月`, | |||
name: `${year-1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -1,15 +1,15 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-10 11:10:54 | |||
* @LastEditTime: 2024-05-31 16:19:45 | |||
* @LastEditTime: 2024-06-06 10:04:49 | |||
* @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> | |||
@@ -43,15 +43,15 @@ export default { | |||
gap: 5px; | |||
position: relative; | |||
// &:after { | |||
// content: ""; | |||
// position: absolute; | |||
// left: 50%; | |||
// top: 0; | |||
// width: 3px; | |||
// height: 100%; | |||
// transform: translateX(-50%); | |||
// background: linear-gradient(to bottom, transparent, #00f2ff, transparent); | |||
// } | |||
&:after { | |||
content: ""; | |||
position: absolute; | |||
left: 50%; | |||
top: 0; | |||
width: 3px; | |||
height: 100%; | |||
transform: translateX(-50%); | |||
background: linear-gradient(to bottom, transparent, #00f2ff, transparent); | |||
} | |||
} | |||
</style> |
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-06-04 14:18:52 | |||
* @LastEditTime: 2024-06-06 13:55:10 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -39,7 +39,7 @@ export default { | |||
} | |||
}, | |||
computed: { | |||
data() { | |||
stdData() { | |||
return this.$store.getters.copilot.efficiency.stdRate | |||
}, | |||
cities() { | |||
@@ -65,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.data?.previous) { | |||
this.data?.previous.forEach( | |||
if (this.stdData?.previous) { | |||
this.stdData?.previous.forEach( | |||
(v, idx) => { | |||
_cities[idx].previous = v ?? 0; | |||
} | |||
); | |||
} | |||
if (this.data?.target) { | |||
this.data?.target.forEach( | |||
if (this.stdData?.target) { | |||
this.stdData?.target.forEach( | |||
(v, idx) => { | |||
_cities[idx].target = v ?? 0; | |||
} | |||
) | |||
} | |||
if (this.data?.current) { | |||
this.data?.current.forEach( | |||
if (this.stdData?.current) { | |||
this.stdData?.current.forEach( | |||
(v, idx) => { | |||
_cities[idx].current = v ?? 0; | |||
} | |||
@@ -123,7 +123,7 @@ export default { | |||
// flex: 1 1 auto; | |||
flex-direction: column; | |||
// display: -webkit-box; | |||
// flex-wrap: wrap; | |||
flex-wrap: wrap; | |||
// align-items: center; | |||
// grid-template-columns: repeat(2, 1fr); | |||
// grid-template-rows: repeat(4, 1fr); | |||
@@ -136,7 +136,7 @@ export default { | |||
// width: 50%; | |||
} | |||
.span-2 { | |||
flex: 1 1 auto; | |||
// flex-basis: 100%; | |||
// flex: 1 1 auto; | |||
flex-basis: 100%; | |||
} | |||
</style> |
@@ -60,7 +60,7 @@ export default { | |||
const year = new Date().getFullYear(); | |||
if (this.period === '日' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${month}月${today}日`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
@@ -70,7 +70,7 @@ export default { | |||
]; | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年本周`, color: "#12f7f1" }, | |||
{ label: `${year-1}年本周`, color: "#12f7f1" }, | |||
{ label: `本周`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '周' && this.than === '环比') { | |||
@@ -80,7 +80,7 @@ export default { | |||
]; | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月`, color: "#12f7f1" }, | |||
{ label: `${month}月`, color: "#58adfa" }, | |||
{ label: `${month}月目标`, color: "#58adfa" }, | |||
// { label: `${month}月目标`, value: valueTuple[2] }, | |||
@@ -168,7 +168,7 @@ function getTemplate(period, dataList,than) { | |||
if (period === '日' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月${today}日`, | |||
name: `${year-1}年${month}月${today}日`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -192,7 +192,7 @@ function getTemplate(period, dataList,than) { | |||
} else if (period === '周' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年本周`, | |||
name: `${year-1}年本周`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -216,7 +216,7 @@ function getTemplate(period, dataList,than) { | |||
} else if (period === '月' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月`, | |||
name: `${year-1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 13:22:43 | |||
* @LastEditTime: 2024-06-03 16:13:52 | |||
* @LastEditTime: 2024-06-06 15:12:58 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -303,6 +303,7 @@ export default { | |||
</script> | |||
<style scoped lang="scss"> | |||
.bar-chart-base { | |||
// position: relative; | |||
@@ -327,6 +328,9 @@ export default { | |||
margin-right: 0.22vw; | |||
} | |||
} | |||
.legend-item:nth-child(3) { | |||
margin-left: 1vw; | |||
} | |||
.legend-item:nth-child(3):before { | |||
// width: 12px; | |||
// height: 2px; | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-23 15:50:44 | |||
* @LastEditTime: 2024-06-03 16:14:03 | |||
* @LastEditTime: 2024-06-06 15:13:06 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -302,6 +302,7 @@ export default { | |||
</script> | |||
<style scoped lang="scss"> | |||
.bar-chart-base { | |||
// position: relative; | |||
@@ -326,7 +327,9 @@ export default { | |||
margin-right: 0.22vw; | |||
} | |||
} | |||
.legend-item:nth-child(3) { | |||
margin-left: 1vw; | |||
} | |||
.legend-item:nth-child(1):before { | |||
background-color: #12f7f1; | |||
} | |||
@@ -13,10 +13,11 @@ | |||
<!-- <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__value">{{ lgd.value }}</span> | |||
<span class="legend-item__label">{{ lgd.label }}</span> | |||
<span class="legend-item__value">{{ lgd.value }}</span> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -100,7 +101,7 @@ export default { | |||
if (this.period === '日' && this.than === '同比') { | |||
items = [ | |||
{ label: `${month}月${today}日良率`, }, | |||
{ label: `去年${month}月${today}日良率` }, | |||
{ label: `${year-1}年${month}月${today}日良率` }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
items = [ | |||
@@ -110,7 +111,7 @@ export default { | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `本周良率`, }, | |||
{ label: `去年本周良率` }, | |||
{ label: `${year-1}年本周良率` }, | |||
]; | |||
} else if (this.period === '周' && this.than === '环比') { | |||
items = [ | |||
@@ -120,7 +121,7 @@ export default { | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
{ label: `${month}月良率`, }, | |||
{ label: `去年${month}月良率`, }, | |||
{ label: `${year-1}年${month}月良率`, }, | |||
{ label: `${month}月目标良率`, }, | |||
]; | |||
} else if (this.period === '月' && this.than === '环比') { | |||
@@ -143,7 +144,7 @@ export default { | |||
月: `${month}月良率`, | |||
年: `${year}良率`, | |||
}[this.period]; | |||
console.log(vt[1]); | |||
const t = getOptions({ | |||
// single, | |||
color: this.color == 1 ? "#4CF0E8" : "#1065ff", | |||
@@ -173,7 +174,7 @@ export default { | |||
const year = new Date().getFullYear(); | |||
if (this.period === '日' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" }, | |||
{ label: `${year-1}年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0]) ) + "%" }, | |||
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
@@ -183,7 +184,7 @@ export default { | |||
]; | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | |||
{ 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])) + "%" }, | |||
]; | |||
@@ -194,24 +195,24 @@ export default { | |||
]; | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[0])) + "%" }, | |||
{ 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[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(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[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | |||
]; | |||
} else { | |||
items = [ | |||
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[1])) + "%" }, | |||
{ 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[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.formatNumber(this.valueTuple[2])) + "%" }, | |||
]; | |||
} | |||
return items | |||
@@ -247,6 +248,7 @@ export default { | |||
}, | |||
methods: { | |||
formatNumber(num) { | |||
console.log(num); | |||
// 判断是否为整数 | |||
if (Number.isInteger(num)) { | |||
return num; // 如果是整数,直接转换为字符串 | |||
@@ -270,6 +272,7 @@ export default { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
// padding: 0 3px; | |||
// justify-content: center; | |||
gap: 3px; | |||
backdrop-filter: blur(24px); | |||
@@ -281,7 +284,7 @@ export default { | |||
// margin-left: 5%; | |||
// width: 290px; | |||
flex: 1 1 auto; | |||
padding: 0 15%; | |||
padding: 0 20%; | |||
/* margin: 10%; */ | |||
height: 16vh; | |||
/* min-width: 300px; */ | |||
@@ -290,17 +293,24 @@ export default { | |||
.legend { | |||
height: 80px; | |||
display: flex; | |||
gap: 40px; | |||
justify-content: space-around; | |||
color: #fff; | |||
justify-content: flex-end; | |||
gap:20px; | |||
// justify-content: space-between; | |||
} | |||
// .legend:nth-child(3){ | |||
// margin-left: 30px; | |||
// } | |||
.legend-item { | |||
margin-left: 15px; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
// align-items: center; | |||
align-items: flex-start; | |||
gap: 3px; | |||
&:first-child { | |||
// margin-left: 5px; | |||
.legend-item__value { | |||
color: #0e61f5; | |||
} | |||
@@ -312,7 +322,40 @@ export default { | |||
} | |||
} | |||
} | |||
.legend-item__label { | |||
position: relative; | |||
} | |||
.legend-item__label::before { | |||
content: ""; | |||
position: absolute; | |||
width: 12px; | |||
height: 12px; | |||
background: #ccc; | |||
border-radius: 2px; | |||
top: 6px; | |||
left: -18px; | |||
} | |||
.legend-item:nth-child(2) .legend-item__label::before { | |||
background: #12fff5; | |||
} | |||
.legend-item:nth-child(2) .legend-item__value { | |||
color: #12fff5; | |||
} | |||
.legend-item:nth-child(1) .legend-item__label::before { | |||
background: #0f65ff; | |||
} | |||
.legend-item:nth-child(1) .legend-item__value { | |||
color: #0f65ff; | |||
} | |||
.legend-item:nth-child(3) .legend-item__label::before { | |||
background: #003982; | |||
} | |||
.legend-item__value { | |||
font-size: 24px; | |||
font-weight: 600; | |||
@@ -132,19 +132,19 @@ function calculateItems(period, valueTuple) { | |||
case "日": | |||
items = [ | |||
{ label: `${month}月${today}日累计`, value: valueTuple[1] }, | |||
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] }, | |||
{ label: `${year-1}年${month}月${today}日累计`, value: valueTuple[0] }, | |||
]; | |||
break; | |||
case "周": | |||
items = [ | |||
{ label: `本周累计`, value: valueTuple[1] }, | |||
{ label: `去年本周累计`, value: valueTuple[0] }, | |||
{ label: `${year-1}年本周累计`, value: valueTuple[0] }, | |||
]; | |||
break; | |||
case "月": | |||
items = [ | |||
{ label: `${month}月累计`, value: valueTuple[1] }, | |||
{ label: `去年${month}月累计`, value: valueTuple[0] }, | |||
{ label: `${year-1}年${month}月累计`, value: valueTuple[0] }, | |||
{ label: `${month}月目标`, value: valueTuple[2] }, | |||
]; | |||
break; | |||
@@ -6,7 +6,7 @@ | |||
--> | |||
<template> | |||
<div class="progress-bar" :data-title="title" :data-rate="value + '%'"> | |||
<div class="progress-bar" :data-title="title" :data-rate="current + '%'"> | |||
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div> | |||
</div> | |||
</template> | |||
@@ -20,6 +20,18 @@ 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, | |||
@@ -34,11 +46,16 @@ export default { | |||
}, | |||
computed: { | |||
dataRate() { | |||
return this.value == 0 | |||
? "-" | |||
: this.value > 1 | |||
? 100 + '%' | |||
: `${(parseFloat(this.value)).toFixed(0)}%`; | |||
// if (this.current != 0 && this.target != 0) { | |||
console.log( '1111111111', this.current, this.target); | |||
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 + '%' : this.previous >=100 ? 100 + '%' : this.previous + '%'; | |||
// } else if(this.previous != 0) { | |||
// return this.previous + '%' | |||
// } | |||
}, | |||
}, | |||
methods: {}, | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-07 10:25:10 | |||
* @LastEditTime: 2024-05-29 17:03:00 | |||
* @LastEditTime: 2024-06-06 15:14:29 | |||
* @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" :value="city.current" /> | |||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | |||
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" /> | |||
<ProgressBar :period="period" :title="titlePre" :previous="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" :value="city.current" /> | |||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | |||
<ProgressBar :period="period" :title="title" :target="city.target" :current="city.current" /> | |||
<ProgressBar :period="period" :title="titlePre" :previous="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" :value="city.target" /> | |||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | |||
<ProgressBar :period="period" :title="title" :value="city.current" /> | |||
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" /> | |||
<ProgressBar :period="period" :title="titlePre" :previous="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" :value="city.target" /> | |||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" /> | |||
<ProgressBar :period="period" :title="title" :value="city.current" /> | |||
<ProgressBar :period="period" :title="titleTarget" :target="city.target" :current="city.current" /> | |||
<ProgressBar :period="period" :title="titlePre" :previous="city.previous" /> | |||
<!-- <ProgressBar :period="period" :title="title" :value="city.current" /> --> | |||
</div> | |||
</div> | |||
</template> | |||
@@ -76,15 +76,15 @@ export default { | |||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1; | |||
const year = new Date().getFullYear(); | |||
if (this.period === '日' && this.than === '同比') { | |||
return `去年${month}月${today}日` | |||
return `${year-1}年${month}月${today}日` | |||
} else if (this.period === '日' && this.than === '环比') { | |||
return `${yesterday}日` | |||
} else if (this.period === '周' && this.than === '同比') { | |||
return `去年本周` | |||
return `${year-1}年本周` | |||
} else if (this.period === '周' && this.than === '环比') { | |||
return `上周` | |||
} else if (this.period === '月' && this.than === '同比') { | |||
return `去年${month}月` | |||
return `${year-1}年${month}月` | |||
} else if (this.period === '月' && this.than === '环比') { | |||
return `${lastMonth}月` | |||
} else { | |||
@@ -120,9 +120,13 @@ export default { | |||
const month = new Date().getMonth() + 1; | |||
const year = new Date().getFullYear(); | |||
if (this.period === '月') { | |||
return `${month}月目标` | |||
return `${month}月目标${this.city.target}%` | |||
} else if (this.period === '年') { | |||
return `${year}年目标` | |||
return `${year}年目标${this.city.target}%` | |||
} else if (this.period === '周') { | |||
return `本周目标${this.city.target}%` | |||
} else if (this.period === '日') { | |||
return `${month}月${today}日目标${this.city.target}%` | |||
} | |||
}, | |||
}, | |||
@@ -8,7 +8,7 @@ export default ({ | |||
preName, | |||
}) => ({ | |||
grid: { | |||
left: 0, | |||
left: '0%', | |||
right: 0, | |||
bottom: 0, | |||
top: 0, | |||
@@ -41,7 +41,7 @@ export default ({ | |||
radius: ["70%", "85%"], | |||
center: ["45%", "52%"], | |||
emptyCircleStyle: { | |||
color: "#042c5f33", | |||
color: "#003982", | |||
}, | |||
}, | |||
// 数据 series | |||
@@ -60,6 +60,9 @@ export default ({ | |||
{ | |||
value: currentSum, | |||
name: currentName, | |||
tooltip: { | |||
formatter: `${currentName} : ${currentSum}` | |||
}, | |||
selected: false, | |||
itemStyle: { | |||
borderJoin: "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 }, | |||
}, | |||
@@ -1,10 +1,10 @@ | |||
<template> | |||
<div class="factory-layout"> | |||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period" | |||
@update:than="updateThan" @update:period="updatePeriod" /> | |||
<FactoryDataHeader :companyName="companyName" :companyId="companyId" :period="period" | |||
@update:period="updatePeriod" /> | |||
<div class="factory-section"> | |||
<section class="top flex"> | |||
<db-container title="生产监控" icon="prod"> | |||
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than"> | |||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | |||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | |||
</db-container> | |||
@@ -4,19 +4,28 @@ | |||
<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> | |||
</template> | |||
<script> | |||
import { debounce } from "@/utils/debounce"; | |||
import * as echarts from "echarts"; | |||
// import CopilotButton from "./chartButton" | |||
export default { | |||
components: { | |||
// CopilotButton, | |||
}, | |||
name: "Energy", | |||
props: { | |||
// legend: { | |||
// type: Array, | |||
// required: true, | |||
// }, | |||
type: { | |||
type: String, | |||
default:'目标产量' | |||
}, | |||
energyCockpits: { | |||
type: Array, | |||
required: true, | |||
@@ -27,6 +36,15 @@ export default { | |||
isFullscreen: false, | |||
actualOptions: null, | |||
chart: "", | |||
// obj:{ | |||
// seriesArr: [], | |||
// targetProduceArr: [], | |||
// planIn: [], | |||
// acIn: [], | |||
// acProduceArr: [], | |||
// scrapNum: [], | |||
// processNum: [], | |||
// }, | |||
options: { | |||
color: ["#FFD160", "#2760FF", "#12FFF5"], | |||
grid: { | |||
@@ -172,6 +190,9 @@ export default { | |||
}, | |||
}, | |||
watch: { | |||
type(val) { | |||
}, | |||
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */ | |||
// isFullscreen(val) { | |||
// this.actualOptions.series.map((item) => { | |||
@@ -228,23 +249,80 @@ export default { | |||
}, 500)(); | |||
}, | |||
initChart() { | |||
console.log("this.energyCockpits", this.energyCockpits); | |||
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量']; | |||
// let n = 0; | |||
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 | |||
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); | |||
if (this.chart) { | |||
this.chart.dispose(); | |||
} | |||
this.chart = echarts.init(document.getElementById("factoryEnergyChart")); | |||
const actualOptions = JSON.parse(JSON.stringify(this.options)); | |||
if (this.type === '目标产量') { | |||
let orderXAxis = [] | |||
let targetProduceArr = [] | |||
if (this.energyCockpits) { | |||
this.energyCockpits.forEach(ele => { | |||
targetProduceArr.push(ele.targetProduction) | |||
orderXAxis.push(ele.workOrderNumber) | |||
}); | |||
} | |||
actualOptions.xAxis.data = orderXAxis; | |||
actualOptions.series[0].data = targetProduceArr; | |||
// this.initChart(targetProduceArr, orderXAxis) | |||
} else if (this.type === '计划投入') { | |||
let orderXAxis = [] | |||
let planIn = [] | |||
if (this.energyCockpits) { | |||
this.energyCockpits.forEach(ele => { | |||
planIn.push(ele.plannedInvestment) | |||
orderXAxis.push(ele.workOrderNumber) | |||
}); | |||
} | |||
actualOptions.xAxis.data = orderXAxis; | |||
actualOptions.series[0].data = planIn; | |||
} else if (this.type === '实际投入') { | |||
let orderXAxis = [] | |||
let acIn = [] | |||
if (this.energyCockpits) { | |||
this.energyCockpits.forEach(ele => { | |||
acIn.push(ele.actualInvestment) | |||
orderXAxis.push(ele.workOrderNumber) | |||
}); | |||
} | |||
actualOptions.xAxis.data = orderXAxis; | |||
actualOptions.series[0].data = acIn; | |||
} else if (this.type === '实际产出') { | |||
let orderXAxis = [] | |||
let acProduceArr = [] | |||
if (this.energyCockpits) { | |||
this.energyCockpits.forEach(ele => { | |||
acProduceArr.push(ele.actualProduction) | |||
orderXAxis.push(ele.workOrderNumber) | |||
}); | |||
} | |||
actualOptions.xAxis.data = orderXAxis; | |||
actualOptions.series[0].data = acProduceArr; | |||
} else if (this.type === '废品数量') { | |||
let orderXAxis = [] | |||
let scrapNum = [] | |||
if (this.energyCockpits) { | |||
this.energyCockpits.forEach(ele => { | |||
scrapNum.push(ele.wasteNum) | |||
orderXAxis.push(ele.workOrderNumber) | |||
}); | |||
} | |||
actualOptions.xAxis.data = orderXAxis; | |||
actualOptions.series[0].data = scrapNum; | |||
} else if (this.type === '待再加工') { | |||
let orderXAxis = [] | |||
let processNum = [] | |||
if (this.energyCockpits) { | |||
this.energyCockpits.forEach(ele => { | |||
console.log(ele.reworkNum); | |||
processNum.push(ele.reworkNum) | |||
orderXAxis.push(ele.workOrderNumber) | |||
}); | |||
} | |||
actualOptions.xAxis.data = orderXAxis; | |||
actualOptions.series[0].data = processNum; | |||
} | |||
// let seriesArr = [ | |||
// { | |||
@@ -286,13 +364,7 @@ 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; | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-30 08:58:39 | |||
* @LastEditTime: 2024-06-05 09:15:03 | |||
* @LastEditTime: 2024-06-07 09:29:45 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -106,7 +106,7 @@ export default { | |||
}, | |||
series: [ | |||
{ | |||
name: "fto", // this.series[0].name, | |||
name: "FTO", // this.series[0].name, | |||
type: "bar", | |||
barWidth: 12, | |||
itemStyle: { | |||
@@ -296,7 +296,7 @@ export default { | |||
.legend-item { | |||
position: relative; | |||
// font-size: 12px; | |||
margin-right: 1.3vw; | |||
margin-right:1.2vw; | |||
&::before { | |||
content: ""; | |||
@@ -308,7 +308,9 @@ export default { | |||
margin-right: 0.22vw; | |||
} | |||
} | |||
.legend-item:nth-child(3) { | |||
margin-left: 1vw; | |||
} | |||
.legend-item:nth-child(1):before { | |||
background-color: #12f7f1; | |||
} | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-29 14:48:06 | |||
* @LastEditTime: 2024-05-30 10:54:00 | |||
* @LastEditTime: 2024-06-07 09:30:17 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -41,7 +41,7 @@ export default { | |||
}, | |||
data() { | |||
// 城市数组的顺序必须是固定的 | |||
const cities = ["fto投入", "芯片产量", "标准组件产量"]; | |||
const cities = ["FTO投入", "芯片产量", "标准组件产量"]; | |||
return { | |||
// xAxis: cities, | |||
}; | |||
@@ -67,7 +67,7 @@ export default { | |||
const year = new Date().getFullYear(); | |||
if (this.period === 1 && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${month}月${today}日`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period ===1 && this.than === '环比') { | |||
@@ -77,7 +77,7 @@ export default { | |||
]; | |||
} else if (this.period === 2 && this.than === '同比') { | |||
items = [ | |||
{ label: `去年本周`, color: "#12f7f1" }, | |||
{ label: `${year-1}年本周`, color: "#12f7f1" }, | |||
{ label: `本周`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === 2 && this.than === '环比') { | |||
@@ -87,7 +87,7 @@ export default { | |||
]; | |||
} else if (this.period === 3 && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月`, color: "#12f7f1" }, | |||
{ label: `${month}月`, color: "#58adfa" }, | |||
{ label: `${month}月目标`, color: "#58adfa" }, | |||
// { label: `${month}月目标`, value: valueTuple[2] }, | |||
@@ -172,7 +172,7 @@ function getTemplate(period, dataList, than) { | |||
if (period === 1 && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月${today}日`, | |||
name: `${year-1}年${month}月${today}日`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -196,7 +196,7 @@ function getTemplate(period, dataList, than) { | |||
} else if (period === 2 && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年本周`, | |||
name: `${year-1}年本周`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -220,7 +220,7 @@ function getTemplate(period, dataList, than) { | |||
} else if (period === 3 && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月`, | |||
name: `${year-1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -8,7 +8,12 @@ | |||
<span class="title">工单情况</span> | |||
<span class="line"></span> | |||
</div> | |||
<barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase> | |||
<div class="button-type" style="margin-left: auto;position: absolute;right: 1%;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> | |||
</div> | |||
</div> | |||
@@ -16,14 +21,18 @@ | |||
<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)", | |||
@@ -39,6 +48,10 @@ export default { | |||
}; | |||
}, | |||
props: { | |||
type: { | |||
type: String, | |||
default: "目标产量", | |||
}, | |||
prodOrder: { | |||
type: Array, | |||
default: [], | |||
@@ -58,9 +71,18 @@ export default { | |||
}, | |||
}, | |||
mounted() { | |||
window.addEventListener("resize", this.tableReset); | |||
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); | |||
}); | |||
}, | |||
methods: { | |||
tableReset() { | |||
this.showTable = false; | |||
debounce(() => { | |||
@@ -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 : 0 }}</span> | |||
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput.toLocaleString() : 0 }}</span> | |||
</div> | |||
</div> | |||
<div class="std-box"> | |||
@@ -23,12 +23,12 @@ | |||
<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 : 0 | |||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber.toLocaleString() : 0 | |||
}}</span> | |||
</div> | |||
</div> | |||
@@ -38,12 +38,12 @@ | |||
<div> | |||
<span class="type">生产数量</span> | |||
<span class="num">{{ | |||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0 | |||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber.toLocaleString() : 0 | |||
}}</span> | |||
</div> | |||
<div> | |||
<span class="type1">良品率</span> | |||
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span> | |||
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate.toFixed(2) : 0 }}%</span> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -56,12 +56,12 @@ | |||
<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 : 0 | |||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber.toLocaleString() : 0 | |||
}}</span> | |||
</div> | |||
</div> | |||
@@ -71,12 +71,12 @@ | |||
<div> | |||
<span class="type">生产数量</span> | |||
<span class="num">{{ | |||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0 | |||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber.toLocaleString() : 0 | |||
}}</span> | |||
</div> | |||
<div> | |||
<span class="type1">良品率</span> | |||
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span> | |||
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate.toFixed(2) : 0 }}%</span> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -89,12 +89,12 @@ | |||
<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 : 0 | |||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber.toLocaleString() : 0 | |||
}}</span> | |||
</div> | |||
</div> | |||
@@ -104,12 +104,12 @@ | |||
<div> | |||
<span class="type">生产数量</span> | |||
<span class="num">{{ | |||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0 | |||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber.toLocaleString() : 0 | |||
}}</span> | |||
</div> | |||
<div> | |||
<span class="type1">良品率</span> | |||
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span> | |||
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate.toFixed(2) : 0 }}%</span> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -129,7 +129,6 @@ | |||
<script> | |||
import { number } from 'echarts'; | |||
import barChartBase from './ChipOee' | |||
export default { | |||
name: "ProdMonitor", | |||
components: { | |||
@@ -0,0 +1,99 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-06-06 14:22:56 | |||
* @LastEditTime: 2024-06-07 10:53:39 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
<template> | |||
<button | |||
class="copilot-btn" | |||
:class="[active ? 'active' : '']" | |||
@click="$emit('click', label)" | |||
> | |||
{{ label }} | |||
</button> | |||
</template> | |||
<script> | |||
export default { | |||
name: "CopilotButton", | |||
props: { | |||
label: { | |||
type: String, | |||
required: true, | |||
}, | |||
active: { | |||
type: Boolean, | |||
default: false, | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style> | |||
button { | |||
appearance: none; | |||
outline: none; | |||
border: none; | |||
background: none; | |||
} | |||
</style> | |||
<style scoped> | |||
.copilot-btn { | |||
/* flex: 1; */ | |||
/* position: relative; */ | |||
width: 88px; | |||
height: 32px; | |||
background: #01306C; | |||
/* border-radius: 4px 0px 0px 4px; */ | |||
backdrop-filter: blur(3px); | |||
/* text-align: center; | |||
padding: 12px; | |||
padding-left: 20px; | |||
color: #fff; | |||
font-size: 18px; */ | |||
font-family: PingFangSC, PingFang SC; | |||
font-weight: 400; | |||
font-size: 16px; | |||
color: #FFFFFF; | |||
line-height: 22px; | |||
letter-spacing: 5px; | |||
text-align: center; | |||
font-style: normal; | |||
letter-spacing: 10px; | |||
cursor: pointer; | |||
} | |||
.copilot-btn.active { | |||
background: #1D74D8; | |||
/* border-radius: 4px;; */ | |||
} | |||
/* .copilot-btn::before, | |||
.copilot-btn::after { | |||
content: ""; | |||
position: absolute; | |||
width: 16px; | |||
height: 16px; | |||
top: 0; | |||
background: transparent; | |||
border-style: solid; | |||
border-width: 2px; | |||
border-color: transparent; | |||
border-top-color: #007be4; | |||
} | |||
.copilot-btn::before { | |||
left: 0; | |||
border-left-color: #007be4; | |||
} | |||
.copilot-btn::after { | |||
right: 0; | |||
border-right-color: #007be4; | |||
} */ | |||
</style> |
@@ -0,0 +1,148 @@ | |||
<!-- | |||
* @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> |
@@ -8,9 +8,7 @@ | |||
<template> | |||
<div class="copilot-container"> | |||
<!-- refresh btn --> | |||
<button | |||
v-if="false" | |||
style=" | |||
<button v-if="false" style=" | |||
appearance: none; | |||
outline: none; | |||
border: none; | |||
@@ -20,54 +18,44 @@ | |||
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 --> | |||
<div class="corner tl"></div> | |||
<div class="corner tr"></div> | |||
<div class="corner bl"></div> | |||
<div class="corner br"></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']" | |||
> | |||
<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 class="button-than" style="margin-left: auto;"> | |||
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than" | |||
@click="() => $emit('update:than', i)" /> | |||
</div> | |||
</div> | |||
<div | |||
class="container-body" | |||
:class="[ | |||
side == 'left' ? 'body-gradient-to-right' : 'body-gradient-to-left', | |||
]" | |||
> | |||
<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"; | |||
import ContainerIconVue from "./ContainerIcon.vue" | |||
import CopilotButton from "./button.vue" | |||
export default { | |||
name: "DashboardContainer", | |||
components: { | |||
Icon: ContainerIconVue, | |||
CopilotButton | |||
}, | |||
props: { | |||
side: { | |||
@@ -78,15 +66,28 @@ export default { | |||
type: String, | |||
default: "cube", | |||
}, | |||
than: { | |||
type: String, | |||
}, | |||
title: { | |||
type: String, | |||
default: "Default Title", | |||
}, | |||
}, | |||
data() { | |||
return {}; | |||
return { | |||
}; | |||
}, | |||
computed: {}, | |||
mounted() { | |||
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: {}, | |||
}; | |||
</script> | |||
@@ -4,7 +4,7 @@ | |||
@update:than="updateThan" @update:period="updatePeriod" /> | |||
<div class="factory-section"> | |||
<section class="top flex"> | |||
<db-container title="生产监控" icon="prod"> | |||
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than"> | |||
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" | |||
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> | |||
</db-container> | |||
@@ -1,15 +1,15 @@ | |||
<template> | |||
<div class="factory-layout"> | |||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period" | |||
@update:than="updateThan" @update:period="updatePeriod" /> | |||
<FactoryDataHeader :companyName="companyName" :companyId="companyId" :period="period" | |||
@update:period="updatePeriod" /> | |||
<div class="factory-section"> | |||
<section class="top flex"> | |||
<db-container title="生产监控" icon="prod"> | |||
<db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than"> | |||
<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"> | |||
<order :prodOrder="prodOrder" /> | |||
<order @update:type="updateType" :type="type" :prodOrder="prodOrder" /> | |||
</left-container> | |||
<!-- <db-container title="" icon="store"> --> | |||
<!-- <store :stock="stock" /> --> | |||
@@ -49,6 +49,7 @@ export default { | |||
data() { | |||
return { | |||
companyId: 0, | |||
type:'目标产量', | |||
companyName: "瑞昌中建材光电材料有限公司", | |||
period: 1, | |||
show:false, | |||
@@ -76,6 +77,10 @@ export default { | |||
this.getMes(); | |||
}, | |||
methods: { | |||
updateType(val) { | |||
console.log(val) | |||
this.type = val | |||
}, | |||
updateCompany(obj) { | |||
this.companyId = obj.companyId; | |||
this.companyName = obj.companyName; | |||
@@ -58,7 +58,7 @@ export default { | |||
const year = new Date().getFullYear(); | |||
if (this.period === '日' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${month}月${today}日`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
@@ -68,7 +68,7 @@ export default { | |||
]; | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年本周`, color: "#12f7f1" }, | |||
{ label: `${year-1}年本周`, color: "#12f7f1" }, | |||
{ label: `本周`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '周' && this.than === '环比') { | |||
@@ -78,7 +78,7 @@ export default { | |||
]; | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月`, color: "#12f7f1" }, | |||
{ label: `${month}月`, color: "#58adfa" }, | |||
// { label: `${month}月目标`, value: valueTuple[2] }, | |||
]; | |||
@@ -163,7 +163,7 @@ function getTemplate(period, dataList,than) { | |||
if (period === '日' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月${today}日`, | |||
name: `${year-1}年${month}月${today}日`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -187,7 +187,7 @@ function getTemplate(period, dataList,than) { | |||
} else if (period === '周' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年本周`, | |||
name: `${year-1}年本周`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -211,7 +211,7 @@ function getTemplate(period, dataList,than) { | |||
} else if (period === '月' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月`, | |||
name: `${year-1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -58,7 +58,7 @@ export default { | |||
const year = new Date().getFullYear(); | |||
if (this.period === '日' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月${today}日`, color: "#12f7f1" }, | |||
{ label: `${month}月${today}日`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
@@ -68,7 +68,7 @@ export default { | |||
]; | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年本周`, color: "#12f7f1" }, | |||
{ label: `${year-1}年本周`, color: "#12f7f1" }, | |||
{ label: `本周`, color: "#58adfa" }, | |||
]; | |||
} else if (this.period === '周' && this.than === '环比') { | |||
@@ -78,7 +78,7 @@ export default { | |||
]; | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月`, color: "#12f7f1" }, | |||
{ label: `${year-1}年${month}月`, color: "#12f7f1" }, | |||
{ label: `${month}月`, color: "#58adfa" }, | |||
// { label: `${month}月目标`, value: valueTuple[2] }, | |||
]; | |||
@@ -165,7 +165,7 @@ function getTemplate(period, dataList,than) { | |||
if (period === '日' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月${today}日`, | |||
name: `${year-1}年${month}月${today}日`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -189,7 +189,7 @@ function getTemplate(period, dataList,than) { | |||
} else if (period === '周' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年本周`, | |||
name: `${year-1}年本周`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -213,7 +213,7 @@ function getTemplate(period, dataList,than) { | |||
} else if (period === '月' && than === '同比') { | |||
items = [ | |||
{ | |||
name: `去年${month}月`, | |||
name: `${year-1}年${month}月`, | |||
data: dataList ? dataList[0] : [], | |||
}, | |||
{ | |||
@@ -1,7 +1,7 @@ | |||
<!-- | |||
* @Author: zhp | |||
* @Date: 2024-05-20 13:32:59 | |||
* @LastEditTime: 2024-06-05 13:43:13 | |||
* @LastEditTime: 2024-06-06 08:42:04 | |||
* @LastEditors: zhp | |||
* @Description: | |||
--> | |||
@@ -114,7 +114,7 @@ export default { | |||
if (this.period === '日' && this.than === '同比') { | |||
items = [ | |||
{ label: `${month}月${today}日累计`,}, | |||
{ label: `去年${month}月${today}日累计` }, | |||
{ label: `${year-1}年${month}月${today}日累计` }, | |||
{ label: `${month}月${today}日目标`, }, | |||
]; | |||
} else if (this.period === '日' && this.than === '环比') { | |||
@@ -126,7 +126,7 @@ export default { | |||
} else if (this.period === '周' && this.than === '同比') { | |||
items = [ | |||
{ label: `本周累计`,}, | |||
{ label: `去年本周累计` }, | |||
{ label: `${year-1}年本周累计` }, | |||
{ label: `本周目标`, }, | |||
]; | |||
} else if (this.period === '周' && this.than === '环比') { | |||
@@ -138,7 +138,7 @@ export default { | |||
} else if (this.period === '月' && this.than === '同比') { | |||
items = [ | |||
{ label: `${month}月累计`,}, | |||
{ label: `去年${month}月累计`, }, | |||
{ label: `${year-1}年${month}月累计`, }, | |||
{ label: `${month}月目标`,}, | |||
]; | |||
} else if (this.period === '月' && this.than === '环比') { | |||
@@ -160,7 +160,7 @@ 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(this.valueTuple[2]- this.valueTuple[1]) | |||
return getOptions({ | |||
@@ -234,7 +234,7 @@ function calculateItems(period, valueTuple, than) { | |||
const year = new Date().getFullYear(); | |||
if (period === '日' && than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] }, | |||
{ label: `${year-1}年${month}月${today}日累计`, value: valueTuple[0] }, | |||
{ label: `${month}月${today}日累计`, value: valueTuple[1] }, | |||
{ label: `${month}月${today}日目标`, value: valueTuple[2] }, | |||
]; | |||
@@ -246,7 +246,7 @@ function calculateItems(period, valueTuple, than) { | |||
]; | |||
} else if (period === '周' && than === '同比') { | |||
items = [ | |||
{ label: `去年本周累计`, value: valueTuple[0] }, | |||
{ label: `${year-1}年本周累计`, value: valueTuple[0] }, | |||
{ label: `本周累计`, value: valueTuple[1] }, | |||
{ label: `本周目标`, value: valueTuple[2] }, | |||
]; | |||
@@ -258,7 +258,7 @@ function calculateItems(period, valueTuple, than) { | |||
]; | |||
} else if (period === '月' && than === '同比') { | |||
items = [ | |||
{ label: `去年${month}月累计`, value: valueTuple[0] }, | |||
{ label: `${year-1}年${month}月累计`, value: valueTuple[0] }, | |||
{ label: `${month}月累计`, value: valueTuple[1] }, | |||
{ label: `${month}月目标`, value: valueTuple[2] }, | |||
]; | |||