Merge branch 'projects/mescc/develop' into projects/mescc/zjl
This commit is contained in:
commit
3d7e3d828c
4
.env.dev
4
.env.dev
@ -1,8 +1,8 @@
|
||||
###
|
||||
# @Author: zhp
|
||||
# @Date: 2024-04-28 13:42:51
|
||||
# @LastEditTime: 2024-06-05 16:07:26
|
||||
# @LastEditors: DY
|
||||
# @LastEditTime: 2024-06-11 08:33:19
|
||||
# @LastEditors: zhp
|
||||
# @Description:
|
||||
###
|
||||
# 开发环境配置
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -15,8 +15,9 @@
|
||||
<!-- </div> -->
|
||||
<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,12 +36,23 @@ export default {
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
chart: "",
|
||||
data: [],
|
||||
orderXAxis:[],
|
||||
// obj:{
|
||||
// seriesArr: [],
|
||||
// targetProduceArr: [],
|
||||
// planIn: [],
|
||||
// acIn: [],
|
||||
// acProduceArr: [],
|
||||
// scrapNum: [],
|
||||
// processNum: [],
|
||||
// },
|
||||
options: {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "7%",
|
||||
right: "7%",
|
||||
bottom: "8%",
|
||||
bottom: "15%",
|
||||
top: "15%",
|
||||
},
|
||||
tooltip: {
|
||||
@ -48,6 +68,7 @@ export default {
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
rotate:45,
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
@ -172,6 +193,9 @@ export default {
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.initChart()
|
||||
},
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
// isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
@ -228,23 +252,63 @@ 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.type === '目标产量') {
|
||||
this.orderXAxis = []
|
||||
this.data = []
|
||||
if (this.energyCockpits) {
|
||||
this.energyCockpits.forEach(ele => {
|
||||
this.data.push(ele.targetProduction)
|
||||
this.orderXAxis.push(ele.workOrderNumber)
|
||||
});
|
||||
}
|
||||
// this.initChart(targetProduceArr, orderXAxis)
|
||||
} else if (this.type === '计划投入') {
|
||||
this.orderXAxis = []
|
||||
this.data = []
|
||||
if (this.energyCockpits) {
|
||||
this.energyCockpits.forEach(ele => {
|
||||
this.data.push(ele.plannedInvestment)
|
||||
this.orderXAxis.push(ele.workOrderNumber)
|
||||
});
|
||||
}
|
||||
} else if (this.type === '实际投入') {
|
||||
this.orderXAxis = []
|
||||
this.data = []
|
||||
if (this.energyCockpits) {
|
||||
this.energyCockpits.forEach(ele => {
|
||||
this.data.push(ele.actualInvestment)
|
||||
this.orderXAxis.push(ele.workOrderNumber)
|
||||
});
|
||||
}
|
||||
} else if (this.type === '实际产出') {
|
||||
this.orderXAxis = []
|
||||
this.data = []
|
||||
if (this.energyCockpits) {
|
||||
this.energyCockpits.forEach(ele => {
|
||||
this.data.push(ele.actualProduction)
|
||||
this.orderXAxis.push(ele.workOrderNumber)
|
||||
});
|
||||
}
|
||||
} else if (this.type === '废品数量') {
|
||||
this.orderXAxis = []
|
||||
this.data = []
|
||||
if (this.energyCockpits) {
|
||||
this.energyCockpits.forEach(ele => {
|
||||
this.data.push(ele.wasteNum)
|
||||
this.orderXAxis.push(ele.workOrderNumber)
|
||||
});
|
||||
}
|
||||
} else if (this.type === '待再加工') {
|
||||
this.orderXAxis = []
|
||||
this.data = []
|
||||
if (this.energyCockpits) {
|
||||
this.energyCockpits.forEach(ele => {
|
||||
console.log(ele.reworkNum);
|
||||
this.data.push(ele.reworkNum)
|
||||
this.orderXAxis.push(ele.workOrderNumber)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// let seriesArr = [
|
||||
// {
|
||||
@ -286,18 +350,19 @@ export default {
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
actualOptions.xAxis.data = orderXAxis;
|
||||
actualOptions.series[0].data = seriesArr;
|
||||
|
||||
// actualOptions.series[0].name = seriesArr[0].name;
|
||||
// actualOptions.series[1].data = seriesArr[1].data;
|
||||
// actualOptions.series[1].name = seriesArr[1].name;
|
||||
// actualOptions.series[2].data = seriesArr[2].data;
|
||||
// actualOptions.series[2].name = seriesArr[2].name;
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
actualOptions.xAxis.data = this.orderXAxis;
|
||||
actualOptions.series[0].data = this.data;
|
||||
this.actualOptions = actualOptions;
|
||||
this.chart.setOption(actualOptions);
|
||||
},
|
||||
|
||||
@ -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 14:11:01
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@ -41,7 +41,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
// 城市数组的顺序必须是固定的
|
||||
const cities = ["fto投入", "芯片产量", "标准组件产量"];
|
||||
const cities = ["FTO投入", "芯片产量", "标准组件产量"];
|
||||
return {
|
||||
// xAxis: cities,
|
||||
};
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
computed: {
|
||||
xAxis() {
|
||||
console.log(' this.companyId', this.companyId);
|
||||
return this.companyId === 0 ? ["fto投入", "芯片产量", "标准组件产量"] : ["fto投入", "芯片产量", "标准组件产量", 'BIPV产量'];
|
||||
return this.companyId === 0 ? ["FTO投入", "芯片产量", "标准组件产量"] : ["FTO投入", "芯片产量", "标准组件产量", 'BIPV产量'];
|
||||
},
|
||||
legend() {
|
||||
let items = [];
|
||||
@ -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: {
|
||||
|
||||
99
src/views/copilot/factoryData/components/button.vue
Normal file
99
src/views/copilot/factoryData/components/button.vue
Normal file
@ -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>
|
||||
148
src/views/copilot/factoryData/components/chartButton.vue
Normal file
148
src/views/copilot/factoryData/components/chartButton.vue
Normal file
@ -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,22 +18,11 @@
|
||||
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 -->
|
||||
@ -44,30 +31,31 @@
|
||||
<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
|
||||
class="container-body"
|
||||
:class="[
|
||||
</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";
|
||||
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,12 +4,12 @@
|
||||
@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>
|
||||
<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" /> -->
|
||||
@ -47,6 +47,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: '目标产量',
|
||||
companyId: 1,
|
||||
companyName: "邯郸中建材光电材料有限公司",
|
||||
period: 1,
|
||||
@ -75,6 +76,10 @@ export default {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateType(val) {
|
||||
console.log(val)
|
||||
this.type = val
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
|
||||
@ -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] },
|
||||
];
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-06 15:15:30
|
||||
* @LastEditTime: 2024-06-05 15:28:07
|
||||
* @LastEditTime: 2024-06-07 10:28:51
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-drawer class="drawer" :visible.sync="visible" size="55%" @closed="$emit('destroy')">
|
||||
<el-drawer class="drawer" :visible.sync="visible" size="60%" @closed="$emit('destroy')">
|
||||
<small-title slot="title" :no-padding="true">
|
||||
{{ '碲化镉工厂生产数据详情' }}
|
||||
</small-title>
|
||||
@ -22,7 +22,7 @@
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<p class="title">时间</p>
|
||||
<p class="text">{{ dataForm.reportDate.length > 0 ? dataForm.reportDate[0] + '年' + dataForm.reportDate[1] + '月' + dataForm.reportDate[2] + '日' : '' }}</p>
|
||||
<p class="text">{{ dataForm.reportDate?.length > 0 ? dataForm.reportDate[0] + '年' + dataForm.reportDate[1] + '月' + dataForm.reportDate[2] + '日' : '' }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
@ -350,7 +350,6 @@ export default {
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.detailBox p {
|
||||
margin: 0;
|
||||
@ -374,5 +373,9 @@ export default {
|
||||
color: rgba(102,102,102,0.75);
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.detailBox {
|
||||
width: 98%;
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-06-04 14:13:23
|
||||
* @LastEditTime: 2024-06-07 09:41:56
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -10,17 +10,17 @@
|
||||
<div class="app-container" style="padding: 16px 24px 0;height: auto; flex-grow: 1;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="时间维度" prop="date">
|
||||
<el-select size="small" clearable v-model="listQuery.mode" placeholder="请选择">
|
||||
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
|
||||
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.mode === 0 || listQuery.mode === ''" label="时间范围" prop="reportTime">
|
||||
<el-form-item v-show="listQuery.date === 0 || listQuery.date === ''" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
|
||||
start-placeholder="开始日期" value-format="timestamp" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.mode === 1" label="时间范围" prop="reportTime">
|
||||
<el-form-item v-show="listQuery.date === 1" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
style="width: 180px" @change="onValueChange">
|
||||
</el-date-picker>
|
||||
@ -32,12 +32,12 @@
|
||||
{{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.mode === 2" label="时间范围" prop="reportTime">
|
||||
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="monthrange" value-format="timestamp" range-separator="至"
|
||||
start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.mode === 3" label="时间范围" prop="reportTime">
|
||||
<el-form-item v-show="listQuery.date === 3" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.start" format="yyyy-MM-dd" value-format="timestamp" type="year"
|
||||
placeholder="开始时间">
|
||||
</el-date-picker>
|
||||
@ -94,7 +94,7 @@
|
||||
@pagination="getDataList"
|
||||
/>
|
||||
</div>
|
||||
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.mode" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
|
||||
<add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date" @refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" />
|
||||
<!-- <inputTable :date="date" :data="tableData" :time="[startTimeStamp, endTimeStamp]" :sum="all"
|
||||
:type="listQuery.reportType" @refreshDataList="getDataList" /> -->
|
||||
<!-- <pagination
|
||||
@ -129,7 +129,7 @@ export default {
|
||||
current: 1,
|
||||
factorys: undefined,
|
||||
total: 0,
|
||||
mode: 0,
|
||||
date: 0,
|
||||
type:undefined,
|
||||
// reportType: 2,
|
||||
beginTime: undefined,
|
||||
@ -353,7 +353,7 @@ export default {
|
||||
beginTime: this.listQuery.beginTime,
|
||||
endTime: this.listQuery.endTime,
|
||||
factorys: this.listQuery.factorys,
|
||||
mode: this.listQuery.mode,
|
||||
date: this.listQuery.date,
|
||||
type: this.listQuery.type
|
||||
}).then(resp => {
|
||||
console.log('Aaa', resp.data)
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-11-06 15:15:30
|
||||
* @LastEditTime: 2024-06-05 15:39:35
|
||||
* @LastEditTime: 2024-06-07 14:15:00
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -43,7 +43,7 @@
|
||||
</el-col>
|
||||
<el-col :span="3">
|
||||
<p class="title">投入状态</p>
|
||||
<p class="text">{{ dataForm.inStatus }}</p>
|
||||
<p class="text">{{ getDictDataLabel('work_order_in_status', dataForm.inStatus) }}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
@ -98,6 +98,7 @@ import { getWorkOrderDetail } from '@/api/produceData/order';
|
||||
import SmallTitle from './SmallTitle';
|
||||
import jsPDF from 'jspdf';
|
||||
import html2canvas from 'html2canvas';
|
||||
import { getDictDataLabel } from "@/utils/dict";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -266,7 +267,7 @@ export default {
|
||||
this.pieChart = echarts.init(this.$refs['pie'])
|
||||
this.pieChart.setOption({
|
||||
title: {
|
||||
text: '产品良率',
|
||||
text: '产品良率 ' + (pieData[0].value / (pieData[0].value + pieData[1].value)).toFixed(4) * 100 + '%',
|
||||
left: 'center'
|
||||
// subtext: 'Fake Data'
|
||||
},
|
||||
@ -280,7 +281,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
// name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-06-03 15:15:18
|
||||
* @LastEditTime: 2024-06-07 10:35:48
|
||||
* @LastEditors: DY
|
||||
* @Description:
|
||||
-->
|
||||
@ -47,6 +47,7 @@ import moment from 'moment'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
import AddOrUpdate from './add-or-updata';
|
||||
import { factoryList, factoryArray } from "@/utils/constants";
|
||||
import { publicFormatter } from "@/utils/dict";
|
||||
|
||||
// import FileSaver from 'file-saver'
|
||||
// import * as XLSX from 'xlsx'
|
||||
@ -183,7 +184,8 @@ export default {
|
||||
{
|
||||
prop: 'workOrderType',
|
||||
label: '工单类型',
|
||||
filter: (val) => ['', '芯片订单', '组件类型', 'bipv类型'][val],
|
||||
// filter: publicFormatter('workorder_status')
|
||||
filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val],
|
||||
},
|
||||
{
|
||||
prop: 'plannedInvestment',
|
||||
@ -209,7 +211,8 @@ export default {
|
||||
{
|
||||
prop: 'orderStatus',
|
||||
label: '工单状态',
|
||||
filter: (val) => ['未开始', '生产中', '已完成'][val],
|
||||
filter: publicFormatter('workorder_status')
|
||||
// filter: (val) => ['未开始', '生产中', '已完成'][val],
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
|
||||
148
src/views/report/components/chartButton.vue
Normal file
148
src/views/report/components/chartButton.vue
Normal file
@ -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>
|
||||
218
src/views/report/components/lineChart.vue
Normal file
218
src/views/report/components/lineChart.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-11 09:48:40
|
||||
* @LastEditTime: 2024-06-11 10:22:05
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<!-- <div> -->
|
||||
<!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
|
||||
<div :id="id" :class="className" style="height: 100%,width: 100%;;" />
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { debounce } from "@/utils/debounce";
|
||||
export default {
|
||||
name: 'OverviewBar',
|
||||
// mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'reportChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: 'reportChart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
legendPosition: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
showLegend: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
legendData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
mounted() {
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
this.canvasReset();
|
||||
window.addEventListener("resize", this.canvasReset);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener("resize", this.canvasReset);
|
||||
},
|
||||
methods: {
|
||||
canvasReset() {
|
||||
debounce(() => {
|
||||
this.initChart();
|
||||
}, 500)();
|
||||
},
|
||||
initChart() {
|
||||
console.log(1111)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
console.log(this.$parent);
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: '',
|
||||
// subtext: 'Fake Data'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: { top: 100, right: 90, bottom: 10, left: 10, containLabel: true },
|
||||
legend: {
|
||||
data: ['芯片总功率', '标准组件总功率', '转化效率'],
|
||||
right: '90px',
|
||||
top: '0%',
|
||||
icon: 'rect',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 40,
|
||||
},
|
||||
// toolbox: {
|
||||
// show: true,
|
||||
// feature: {
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// magicType: { show: true, type: ['line', 'bar'] },
|
||||
// restore: { show: true },
|
||||
// saveAsImage: { show: true }
|
||||
// }
|
||||
// },
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// prettier-ignore
|
||||
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
// name: 'Temperature',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
}
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: "1%",
|
||||
right: "3%",
|
||||
bottom: "1%",
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '芯片总功率',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: 'rgba(142, 240, 171, 1)', //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: 'rgba(142, 240, 171, 1)' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '标准组件总功率',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#288AFF', //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: '#288AFF' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '转化效率',
|
||||
type: 'bar',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#FFCE6A', //改变折线点的颜色
|
||||
lineStyle: {
|
||||
color: '#FFCE6A' //改变折线颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .reportChart {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 10px;
|
||||
} */
|
||||
</style>
|
||||
460
src/views/report/comprehensiveData.vue
Normal file
460
src/views/report/comprehensiveData.vue
Normal file
@ -0,0 +1,460 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-04-15 10:49:13
|
||||
* @LastEditTime: 2024-06-07 16:22:57
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
|
||||
<!-- <div class="app-container"
|
||||
style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
|
||||
<p style="margin-bottom: 0">数据概览</p>
|
||||
<div class="view">
|
||||
<div v-for="(item, index) in data" :key="index">
|
||||
<p style="color: rgb(194,128,255)">{{ item }}</p>
|
||||
<p>{{ index }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="" style="height: auto;">
|
||||
<ButtonNav style="padding: 0;" :menus="['邯郸', '瑞昌']" :button-mode="true" @change="currentMenu = $event">
|
||||
<!-- <template v-slot:tab1>
|
||||
<div style="margin: 20px; background: #f001;">
|
||||
Page1: 状态时序图
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:tab2>
|
||||
<div style="margin: 20px">
|
||||
Page2: 产量时序图
|
||||
</div>
|
||||
</template> -->
|
||||
</ButtonNav>
|
||||
</div>
|
||||
<div class="app-container" style="margin-top: 8px;flex-grow: 1; height: auto;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="时间维度" prop="date">
|
||||
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
|
||||
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
style="width: 180px" @change="onValueChange">
|
||||
</el-date-picker>
|
||||
至
|
||||
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
style="width: 180px" @change="onValueChange">
|
||||
</el-date-picker>
|
||||
<!-- <span v-if="start && end" style="margin-left: 10px">
|
||||
{{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
|
||||
</span> -->
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
|
||||
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM"
|
||||
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间">
|
||||
</el-date-picker>
|
||||
~
|
||||
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
|
||||
@change="getYear">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="玻璃类型" prop="type">
|
||||
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="玻璃类型" prop="type">
|
||||
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
|
||||
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||||
<!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||
:table-data="tableData">
|
||||
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
|
||||
:method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
</div>
|
||||
<!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
|
||||
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { parseTime } from '../../core/mixins/code-filter';
|
||||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
|
||||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
|
||||
// import inputTable from './inputTable.vue';
|
||||
// import lineChart from './lineChart';
|
||||
import moment from 'moment'
|
||||
import ButtonNav from '@/components/ButtonNav'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
// import AddOrUpdate from './add-or-updata';
|
||||
import { factoryList, factoryArray } from "@/utils/constants";
|
||||
import { publicFormatter } from "@/utils/dict";
|
||||
|
||||
// import FileSaver from 'file-saver'
|
||||
// import * as XLSX from 'xlsx'
|
||||
export default {
|
||||
components: { ButtonNav },
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
factoryList,
|
||||
factoryArray,
|
||||
start: undefined,
|
||||
end: undefined,
|
||||
listQuery: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
factorys: null,
|
||||
total: 0,
|
||||
date: 3,
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
reportTime: []
|
||||
},
|
||||
timeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '日'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '周'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '月'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '年'
|
||||
}
|
||||
],
|
||||
detailOrUpdateVisible: false,
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: '详情',
|
||||
},
|
||||
// {
|
||||
// type: 'delete',
|
||||
// btnName: '删除',
|
||||
// },
|
||||
].filter((v) => v),
|
||||
typeList: [
|
||||
{
|
||||
name: '芯片',
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: '标准组件',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'BIPV产品',
|
||||
id: 2,
|
||||
},
|
||||
],
|
||||
tableProps: [
|
||||
{
|
||||
prop: 'factory',
|
||||
label: '玻璃类型',
|
||||
fixed:true,
|
||||
// filter: (val) => factoryList[val],
|
||||
// minWidth: 200,
|
||||
// showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '科目/日期',
|
||||
fixed: true,
|
||||
// filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
|
||||
},
|
||||
{
|
||||
prop: 'workOrderType',
|
||||
label: '单位',
|
||||
fixed: true,
|
||||
// filter: publicFormatter('workorder_status')
|
||||
// filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val],
|
||||
},
|
||||
{
|
||||
prop: 'plannedInvestment',
|
||||
label: '计划投入',
|
||||
},
|
||||
{
|
||||
prop: 'actualInvestment',
|
||||
label: '实际投入',
|
||||
},
|
||||
{
|
||||
prop: 'targetProduction',
|
||||
label: '目标产量',
|
||||
},
|
||||
{
|
||||
prop: 'actualProduction',
|
||||
label: '实际产量',
|
||||
},
|
||||
{
|
||||
prop: 'productionProgress',
|
||||
label: '生产进度',
|
||||
filter: (val) => (val * 100) + '%'
|
||||
},
|
||||
{
|
||||
prop: 'orderStatus',
|
||||
label: '工单状态',
|
||||
filter: publicFormatter('workorder_status')
|
||||
// filter: (val) => ['未开始', '生产中', '已完成'][val],
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '开始时间',
|
||||
minWidth: 100,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'endTime',
|
||||
label: '完成时间',
|
||||
minWidth: 100,
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
xAxis: [],
|
||||
lineData: {},
|
||||
data: {}
|
||||
// proLineList: [],
|
||||
// all: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
weekNum() {
|
||||
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const currentMonth = new Date()
|
||||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
|
||||
this.changeTime()
|
||||
},
|
||||
mounted() {
|
||||
this.getOverView()
|
||||
const currentMonth = new Date()
|
||||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
|
||||
this.changeTime()
|
||||
},
|
||||
methods: {
|
||||
getYear(e) {
|
||||
if (this.end && Number(this.end) - Number(this.start) > 10) {
|
||||
this.$message({
|
||||
message: '年份起止时间不能超过十年',
|
||||
type: 'warning'
|
||||
});
|
||||
this.start = undefined
|
||||
this.end = undefined
|
||||
// console.log();
|
||||
} else {
|
||||
if (Number(this.end) < Number(this.start)) {
|
||||
this.$message({
|
||||
message: '结束年份不能小于开始年份',
|
||||
type: 'warning'
|
||||
});
|
||||
this.start = undefined
|
||||
this.end = undefined
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(this.start)
|
||||
this.listQuery.endTime = Number(this.end)
|
||||
}
|
||||
}
|
||||
if (!this.start && !this.end) {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
// console.log(e);
|
||||
},
|
||||
changeTime() {
|
||||
if (this.listQuery.reportTime) {
|
||||
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
|
||||
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
|
||||
if (years * 12 + months > 24) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过24个月',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
|
||||
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
|
||||
}
|
||||
} else {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
},
|
||||
onValueChange(picker, k) { // 选中近k周后触发的操作
|
||||
if (this.start && this.end) {
|
||||
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
|
||||
if (numDays > 168) {
|
||||
console.log(numDays)
|
||||
this.$message({
|
||||
message: '周范围不能超过24周',
|
||||
type: 'warning'
|
||||
});
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
|
||||
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
|
||||
}
|
||||
}
|
||||
if (!this.start && !this.end) {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
},
|
||||
changeDayTime() {
|
||||
if (this.listQuery.reportTime) {
|
||||
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
|
||||
if (numDays > 30) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过30天',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
|
||||
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
|
||||
}
|
||||
} else {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
},
|
||||
getOverView() {
|
||||
// getOverView().then(res => {
|
||||
// this.data = res.data
|
||||
// console.log('aa', res.data)
|
||||
// })
|
||||
},
|
||||
otherMethods(val) {
|
||||
this.detailOrUpdateVisible = true;
|
||||
// this.addOrEditTitle = "详情";
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.detailOrUpdate.init(val.data.id);
|
||||
});
|
||||
},
|
||||
async getDataList() {
|
||||
// const res = await getWorkOrderPage(this.listQuery)
|
||||
// this.tableData = res.data.list
|
||||
// this.listQuery.total = res.data.total
|
||||
// if (this.listQuery.total > 0) {
|
||||
// this.tableData.forEach(item => {
|
||||
// item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
|
||||
// item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
buttonClick(val) {
|
||||
this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
|
||||
this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
|
||||
this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 20;
|
||||
if (this.listQuery.time) {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.$message.warning('请选择时间范围！')
|
||||
}
|
||||
break;
|
||||
case 'export':
|
||||
if (this.listQuery.time) {
|
||||
this.handleExport();
|
||||
} else {
|
||||
this.$message.warning('请选择时间范围！')
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
// this.$modal.confirm('是否确认导出工单数据?').then(() => {
|
||||
// // 处理查询参数
|
||||
// // let params = {...this.listQuery};
|
||||
// // params.current = 1;
|
||||
// // params.size = 999;
|
||||
// this.exportLoading = true;
|
||||
// return exportExcel({
|
||||
// factorys: this.listQuery.factorys,
|
||||
// orderStatus: this.listQuery.orderStatus,
|
||||
// time: this.listQuery.time
|
||||
// });
|
||||
// }).then(response => {
|
||||
// this.$download.excel(response, '工单数据.xls');
|
||||
// this.exportLoading = false;
|
||||
// }).catch(() => { })
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .blueTip { */
|
||||
/* padding-bottom: 10px; */
|
||||
/* } */
|
||||
/* .blueTi */
|
||||
.view {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8PX;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
margin: 0 0px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 16px 0;
|
||||
height: calc(100vh - 134px);
|
||||
overflow: auto;
|
||||
}
|
||||
.noBack{
|
||||
background-color:black;
|
||||
}
|
||||
</style>
|
||||
450
src/views/report/produceConversion.vue
Normal file
450
src/views/report/produceConversion.vue
Normal file
@ -0,0 +1,450 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-06-11 08:45:34
|
||||
* @LastEditTime: 2024-06-11 11:08:27
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; min-height: calc(100vh - 96px - 35px)">
|
||||
<!-- <div class="app-container"
|
||||
style="margin-top: 8px; padding: 0 16px; height: auto; font-size: 20px; text-align: center;">
|
||||
<p style="margin-bottom: 0">数据概览</p>
|
||||
<div class="view">
|
||||
<div v-for="(item, index) in data" :key="index">
|
||||
<p style="color: rgb(194,128,255)">{{ item }}</p>
|
||||
<p>{{ index }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="app-container" style="flex: 1;min-height: 40vh;">
|
||||
<el-form :model="listQuery" :inline="true" ref="dataForm" class="blueTip">
|
||||
<el-form-item label="时间维度" prop="date">
|
||||
<el-select size="small" clearable v-model="listQuery.date" placeholder="请选择">
|
||||
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 1 || listQuery.date === ''" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
|
||||
start-placeholder="开始日期" value-format="yyyyMMdd" @change="changeDayTime" end-placeholder="结束日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 2" label="时间范围" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="start" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
style="width: 180px" @change="onValueChange">
|
||||
</el-date-picker>
|
||||
至
|
||||
<el-date-picker size="small" clearable v-model="end" type="week" format="yyyy 第 WW 周" placeholder="选择周"
|
||||
style="width: 180px" @change="onValueChange">
|
||||
</el-date-picker>
|
||||
<!-- <span v-if="start && end" style="margin-left: 10px">
|
||||
{{ date1 }} 至 {{ date2 }}，共 {{ weekNum }} 周
|
||||
</span> -->
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 3" label="时间值" prop="reportTime">
|
||||
<el-date-picker size="small" v-model="listQuery.reportTime" type="monthrange" value-format="yyyyMM"
|
||||
range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" @change="changeTime">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="listQuery.date === 4" label="时间值" prop="reportTime">
|
||||
<el-date-picker size="small" clearable v-model="start" value-format="yyyy" type="year" placeholder="开始时间">
|
||||
</el-date-picker>
|
||||
~
|
||||
<el-date-picker size="small" clearable v-model="end" value-format="yyyy" type="year" placeholder="结束时间"
|
||||
@change="getYear">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="玻璃类型" prop="type">
|
||||
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<!-- <el-form-item label="玻璃类型" prop="type">
|
||||
<el-select v-model="listQuery.type" placeholder="请选择玻璃类型">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="small" @click="getDataList">查询</el-button>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<!-- <el-button type="primary" size="small" plain @click="handleImport">导入</el-button> -->
|
||||
<el-button type="primary" size="small" plain @click="handleExport">导出</el-button>
|
||||
<!-- <el-button type="success" size="small" plain @click="addFactory">新增</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<line-chart ref="lineChart" style="height: 90%; width: 100%"></line-chart>
|
||||
</div>
|
||||
<div class="app-container" style="margin-top: 8px;flex: 1">
|
||||
<base-table :table-props="tableProps" :page="listQuery.pageNo" :limit="listQuery.pageSize"
|
||||
:table-data="tableData">
|
||||
<method-btn v-if="tableBtn.length" slot="handleBtn" label="操作" :width="120" fixed="right"
|
||||
:method-list="tableBtn" @clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination :limit.sync="listQuery.pageSize" :page.sync="listQuery.pageNo" :total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
</div>
|
||||
<!-- <add-or-update v-if="detailOrUpdateVisible" ref="detailOrUpdate" :date="listQuery.date"
|
||||
@refreshDataList="successSubmit" @destroy="detailOrUpdateVisible = false" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { parseTime } from '../../core/mixins/code-filter';
|
||||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/api/produceData/order';
|
||||
// import { getWorkOrderPage, exportExcel, getOverView } from '@/components/buttonNav'
|
||||
// import inputTable from './inputTable.vue';
|
||||
// import lineChart from './lineChart';
|
||||
import moment from 'moment'
|
||||
import ButtonNav from '@/components/ButtonNav'
|
||||
import basicPage from '@/mixins/basic-page'
|
||||
// import AddOrUpdate from './add-or-updata';
|
||||
import { factoryList, factoryArray } from "@/utils/constants";
|
||||
import { publicFormatter } from "@/utils/dict";
|
||||
import lineChart from "./components/lineChart";
|
||||
|
||||
// import FileSaver from 'file-saver'
|
||||
// import * as XLSX from 'xlsx'
|
||||
export default {
|
||||
components: { ButtonNav, lineChart },
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
factoryList,
|
||||
factoryArray,
|
||||
start: undefined,
|
||||
end: undefined,
|
||||
listQuery: {
|
||||
size: 10,
|
||||
current: 1,
|
||||
factorys: null,
|
||||
total: 0,
|
||||
date: 3,
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
reportTime: []
|
||||
},
|
||||
timeList: [
|
||||
{
|
||||
value: 1,
|
||||
label: '日'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '周'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '月'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '年'
|
||||
}
|
||||
],
|
||||
detailOrUpdateVisible: false,
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'detail',
|
||||
btnName: '详情',
|
||||
},
|
||||
// {
|
||||
// type: 'delete',
|
||||
// btnName: '删除',
|
||||
// },
|
||||
].filter((v) => v),
|
||||
typeList: [
|
||||
{
|
||||
name: '芯片',
|
||||
id: 0,
|
||||
},
|
||||
{
|
||||
name: '标准组件',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: 'BIPV产品',
|
||||
id: 2,
|
||||
},
|
||||
],
|
||||
tableProps: [
|
||||
{
|
||||
prop: 'factory',
|
||||
label: '玻璃类型',
|
||||
fixed:true,
|
||||
// filter: (val) => factoryList[val],
|
||||
// minWidth: 200,
|
||||
// showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'workOrderNumber',
|
||||
label: '科目/日期',
|
||||
fixed: true,
|
||||
// filter: (val) => ['玻璃芯片', '标准组件', 'BIPV', '定制组件'][val]
|
||||
},
|
||||
{
|
||||
prop: 'workOrderType',
|
||||
label: '单位',
|
||||
fixed: true,
|
||||
// filter: publicFormatter('workorder_status')
|
||||
// filter: (val) => ['', '芯片工单', '组件类型', 'bipv类型'][val],
|
||||
},
|
||||
{
|
||||
prop: 'plannedInvestment',
|
||||
label: '计划投入',
|
||||
},
|
||||
{
|
||||
prop: 'actualInvestment',
|
||||
label: '实际投入',
|
||||
},
|
||||
{
|
||||
prop: 'targetProduction',
|
||||
label: '目标产量',
|
||||
},
|
||||
{
|
||||
prop: 'actualProduction',
|
||||
label: '实际产量',
|
||||
},
|
||||
{
|
||||
prop: 'productionProgress',
|
||||
label: '生产进度',
|
||||
filter: (val) => (val * 100) + '%'
|
||||
},
|
||||
{
|
||||
prop: 'orderStatus',
|
||||
label: '工单状态',
|
||||
filter: publicFormatter('workorder_status')
|
||||
// filter: (val) => ['未开始', '生产中', '已完成'][val],
|
||||
},
|
||||
{
|
||||
prop: 'startTime',
|
||||
label: '开始时间',
|
||||
minWidth: 100,
|
||||
showOverflowtooltip: true
|
||||
},
|
||||
{
|
||||
prop: 'endTime',
|
||||
label: '完成时间',
|
||||
minWidth: 100,
|
||||
showOverflowtooltip: true
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
xAxis: [],
|
||||
lineData: {},
|
||||
data: {}
|
||||
// proLineList: [],
|
||||
// all: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
weekNum() {
|
||||
return Math.round((this.end - this.start) / (24 * 60 * 60 * 1000 * 7)) + 1
|
||||
},
|
||||
},
|
||||
created() {
|
||||
const currentMonth = new Date()
|
||||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
|
||||
this.changeTime()
|
||||
},
|
||||
mounted() {
|
||||
this.getOverView()
|
||||
const currentMonth = new Date()
|
||||
this.listQuery.reportTime = [moment(currentMonth).format('yyyyMM'), moment(currentMonth).format('yyyyMM')]
|
||||
this.changeTime()
|
||||
},
|
||||
methods: {
|
||||
getYear(e) {
|
||||
if (this.end && Number(this.end) - Number(this.start) > 10) {
|
||||
this.$message({
|
||||
message: '年份起止时间不能超过十年',
|
||||
type: 'warning'
|
||||
});
|
||||
this.start = undefined
|
||||
this.end = undefined
|
||||
// console.log();
|
||||
} else {
|
||||
if (Number(this.end) < Number(this.start)) {
|
||||
this.$message({
|
||||
message: '结束年份不能小于开始年份',
|
||||
type: 'warning'
|
||||
});
|
||||
this.start = undefined
|
||||
this.end = undefined
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(this.start)
|
||||
this.listQuery.endTime = Number(this.end)
|
||||
}
|
||||
}
|
||||
if (!this.start && !this.end) {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
// console.log(e);
|
||||
},
|
||||
changeTime() {
|
||||
if (this.listQuery.reportTime) {
|
||||
const years = Number(this.listQuery.reportTime[1].slice(0, 4)) - Number(this.listQuery.reportTime[0].slice(0, 4))
|
||||
const months = Number(this.listQuery.reportTime[1].slice(4)) - Number(this.listQuery.reportTime[0].slice(4))
|
||||
if (years * 12 + months > 24) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过24个月',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
|
||||
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
|
||||
}
|
||||
} else {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
},
|
||||
onValueChange(picker, k) { // 选中近k周后触发的操作
|
||||
if (this.start && this.end) {
|
||||
this.date1 = moment(this.start.getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
this.date2 = moment(this.end.getTime() + 5 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss')
|
||||
const numDays = (new Date(this.date2).getTime() - new Date(this.date1).getTime()) / (24 * 3600 * 1000);
|
||||
if (numDays > 168) {
|
||||
console.log(numDays)
|
||||
this.$message({
|
||||
message: '周范围不能超过24周',
|
||||
type: 'warning'
|
||||
});
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(moment(this.start.getTime()).format('YYYYWW'))
|
||||
this.listQuery.endTime = Number(moment(this.end.getTime()).format('YYYYWW'))
|
||||
}
|
||||
}
|
||||
if (!this.start && !this.end) {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
},
|
||||
changeDayTime() {
|
||||
if (this.listQuery.reportTime) {
|
||||
const numDays = Number(this.listQuery.reportTime[1]) - Number(this.listQuery.reportTime[0])
|
||||
if (numDays > 30) {
|
||||
this.$message({
|
||||
message: '时间范围不能超过30天',
|
||||
type: 'warning'
|
||||
});
|
||||
this.listQuery.reportTime = [];
|
||||
} else {
|
||||
this.listQuery.beginTime = Number(this.listQuery.reportTime[0])
|
||||
this.listQuery.endTime = Number(this.listQuery.reportTime[1])
|
||||
}
|
||||
} else {
|
||||
this.listQuery.beginTime = undefined
|
||||
this.listQuery.endTime = undefined
|
||||
}
|
||||
},
|
||||
getOverView() {
|
||||
// getOverView().then(res => {
|
||||
// this.data = res.data
|
||||
// console.log('aa', res.data)
|
||||
// })
|
||||
},
|
||||
otherMethods(val) {
|
||||
this.detailOrUpdateVisible = true;
|
||||
// this.addOrEditTitle = "详情";
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.detailOrUpdate.init(val.data.id);
|
||||
});
|
||||
},
|
||||
async getDataList() {
|
||||
// const res = await getWorkOrderPage(this.listQuery)
|
||||
// this.tableData = res.data.list
|
||||
// this.listQuery.total = res.data.total
|
||||
// if (this.listQuery.total > 0) {
|
||||
// this.tableData.forEach(item => {
|
||||
// item.startTime = item.startDate ? item.startDate[0] + '-' + item.startDate[1] + '-' + item.startDate[2] : '--'
|
||||
// item.endTime = item.endDate ? item.endDate[0] + '-' + item.endDate[1] + '-' + item.endDate[2] : '--'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
buttonClick(val) {
|
||||
this.listQuery.factorys = val.factory?.length > 0 ? val.factory : undefined
|
||||
this.listQuery.orderStatus = val.orderStatus?.length > 0 ? val.orderStatus : undefined
|
||||
this.listQuery.time = val.timeSlot?.length > 0 ? val.timeSlot : undefined
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 20;
|
||||
if (this.listQuery.time) {
|
||||
this.getDataList();
|
||||
} else {
|
||||
this.$message.warning('请选择时间范围！')
|
||||
}
|
||||
break;
|
||||
case 'export':
|
||||
if (this.listQuery.time) {
|
||||
this.handleExport();
|
||||
} else {
|
||||
this.$message.warning('请选择时间范围！')
|
||||
}
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
// this.$modal.confirm('是否确认导出工单数据?').then(() => {
|
||||
// // 处理查询参数
|
||||
// // let params = {...this.listQuery};
|
||||
// // params.current = 1;
|
||||
// // params.size = 999;
|
||||
// this.exportLoading = true;
|
||||
// return exportExcel({
|
||||
// factorys: this.listQuery.factorys,
|
||||
// orderStatus: this.listQuery.orderStatus,
|
||||
// time: this.listQuery.time
|
||||
// });
|
||||
// }).then(response => {
|
||||
// this.$download.excel(response, '工单数据.xls');
|
||||
// this.exportLoading = false;
|
||||
// }).catch(() => { })
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .blueTip { */
|
||||
/* padding-bottom: 10px; */
|
||||
/* } */
|
||||
/* .blueTi */
|
||||
.view {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.blueTip::before {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #0B58FF;
|
||||
border-radius: 1px;
|
||||
margin-right: 8PX;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
margin: 0 0px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 16px 0;
|
||||
height: calc(100vh - 134px);
|
||||
overflow: auto;
|
||||
}
|
||||
.noBack{
|
||||
background-color:black;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user