mt-fe-group/yudao-init
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

projects/mescc/zhp #33

Merged
juzi merged 2 commits from projects/mescc/zhp into projects/mescc/develop 2024-06-05 14:16:55 +08:00
Conversation 0 Commits 2 Files Changed 31 +1188 -140
31 changed files with 1188 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 69f953fb0c - Show all commits

4
src/store/modules/home.js
View File

@ -96,7 +96,7 @@ const actions = {
let preData = dataArr.previousProdOutputOutDO let preData = dataArr.previousProdOutputOutDO
let preFtoData = dataArr.previousProdOutputFtoDO let preFtoData = dataArr.previousProdOutputFtoDO
// const targetArr = await getHomeInfo(); // const targetArr = await getHomeInfo();
const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetDO,dataArr.prodOutputFtoDO,preData,preFtoData); const payload = splitCurrentAndPrevious(dataArr.prodOutputOutDO, dataArr.prodTargetOutputDO,dataArr.prodOutputFtoDO,dataArr.previousProdOutputOutDO,preData,preFtoData);
commit("SET_HOME_INFO", payload); commit("SET_HOME_INFO", payload);
}, },
/** 初始化驾驶舱数据 */ /** 初始化驾驶舱数据 */
@ -345,7 +345,7 @@ function splitCurrentAndPreviousA(factoryListResponse, targetListResponse, prodO
if (preData && preData[0] != null) { if (preData && preData[0] != null) {
for (const factory of preData) { for (const factory of preData) {
const fId = getPreFactoryId(factory); const fId = getPreFactoryId(factory);
chipInvest.previous[fId] = factory.previousYearInputNumber; // chipInvest.previous[fId] = factory.previousYearInputNumber;
// chipOeeRate.current[fId] = factory.oee; // chipOeeRate.current[fId] = factory.oee;
chipOeeRate.previous[fId] = factory.previousYearOee; chipOeeRate.previous[fId] = factory.previousYearOee;
// 转化效率 // 转化效率

1
src/views/copilot/components/BarChartBase.vue
View File

@ -83,6 +83,7 @@ export default {
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,

8
src/views/copilot/components/FactoryDataHeader.vue
View File

@ -7,9 +7,13 @@
<CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than" <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
@click="() => $emit('update:than', i)" /> @click="() => $emit('update:than', i)" />
<div class="btn-group"> <div class="btn-group">
<el-tooltip class="item" effect="dark" content="导出" placement="top">
<button type="button" class="export-btn" @click="handleExport" /> <button type="button" class="export-btn" @click="handleExport" />
</el-tooltip>
<el-tooltip class="item" effect="dark" :content="isFullscreen === false ? '退出全屏' : '全屏'" placement="top">
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']" <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
@click="toggleFullScreen" /> @click="toggleFullScreen" />
</el-tooltip>
</div> </div>
</section> </section>
<div class="page-title">{{ companyName }}</div> <div class="page-title">{{ companyName }}</div>
@ -46,7 +50,8 @@ export default {
}, },
data() { data() {
return { return {
isFullscreen: false, // isFullscreen: false,
content:'全屏',
dataList: [ dataList: [
{ id: 1, name: "日" }, { id: 1, name: "日" },
{ id: 2, name: "周" }, { id: 2, name: "周" },
@ -61,6 +66,7 @@ export default {
exportFactoryDataExcel({ exportFactoryDataExcel({
factoryId: this.companyId, factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3, timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
compare: this.than === '同比' ? 1 : 2
}).then(response => { }).then(response => {
this.$download.excel(response, `${this.companyName}生产数据.xls`); this.$download.excel(response, `${this.companyName}生产数据.xls`);
// this.exportLoading = false; // this.exportLoading = false;

3
src/views/copilot/components/ftoBarChartBase.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:49:14 * @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-05-31 16:06:50 * @LastEditTime: 2024-06-04 08:54:10
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -84,6 +84,7 @@ export default {
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,

234
src/views/copilot/components/leftContainer.vue Normal file
View File

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

9
src/views/copilot/factoryData/components/Container.vue → src/views/copilot/components/rightContainer.vue
View File

@ -41,8 +41,8 @@
<!-- decoration --> <!-- decoration -->
<div class="corner tl"></div> <div class="corner tl"></div>
<div class="corner tr"></div> <div class="corner tr"></div>
<div v-if="side == 'left'" class="corner bl"></div> <div class="corner bl"></div>
<div v-if="side == 'right'" class="corner br"></div> <div class="corner br"></div>
<!-- content --> <!-- content -->
<div <div
class="container-head" class="container-head"
@ -207,10 +207,11 @@ export default {
// border-bottom: 10px solid #0175dc; // border-bottom: 10px solid #0175dc;
// border-top: 10px solid transparent; // border-top: 10px solid transparent;
// border-right: 10px solid #0175dc; // border-right: 10px solid #0175dc;
// transform: rotate(-90deg);
border-left: 0.532vw solid transparent; border-left: 0.532vw solid transparent;
border-bottom: 0.532vw solid #0175dc; border-bottom: .6vw solid #0175dc;
border-top: 0.532vw solid transparent; border-top: 0.532vw solid transparent;
border-right: 0.532vw solid #0175dc; border-right: 0.532vw solid transparent;
} }
.gradient-to-right { .gradient-to-right {

239
src/views/copilot/components/twoContainer.vue Normal file
View File

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

2
src/views/copilot/container.vue
View File

@ -25,7 +25,7 @@ import YieldCopilot from "./yield/index.vue";
// import EfficiencyCopilot from "./efficiency/index.vue"; // import EfficiencyCopilot from "./efficiency/index.vue";
export default { export default {
name: "CopilotContainer", name: "copilotContainer",
components: { components: {
CopilotHeaderVue, CopilotHeaderVue,
YieldCopilot, YieldCopilot,

51
src/views/copilot/efficiency/components/StdRate.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:25:10 * @Date: 2024-05-07 10:25:10
* @LastEditTime: 2024-06-03 16:40:45 * @LastEditTime: 2024-06-04 14:18:52
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -33,7 +33,15 @@ export default {
default: "同比", default: "同比",
}, },
}, },
data() {
return {
// data: null
}
},
computed: { computed: {
data() {
return this.$store.getters.copilot.efficiency.stdRate
},
cities() { cities() {
console.log('ztl', this.$store.getters.copilot.efficiency.stdRate) console.log('ztl', this.$store.getters.copilot.efficiency.stdRate)
// let getterName = ""; // let getterName = "";
@ -57,22 +65,22 @@ export default {
{ name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, { name: "凯盛光伏", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
{ name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, }, { name: "蚌埠", target: 0, previous: 0, current: 0, componentYield: 0, goodNumber: 0, },
] ]
if (this.$store.getters.copilot?.efficiency.stdRate?.previous) { if (this.data?.previous) {
this.$store.getters.copilot?.efficiency.stdRate?.previous.forEach( this.data?.previous.forEach(
(v, idx) => { (v, idx) => {
_cities[idx].previous = v ?? 0; _cities[idx].previous = v ?? 0;
} }
); );
} }
if (this.$store.getters.copilot?.efficiency.stdRate?.target) { if (this.data?.target) {
this.$store.getters.copilot?.efficiency.stdRate?.target.forEach( this.data?.target.forEach(
(v, idx) => { (v, idx) => {
_cities[idx].target = v ?? 0; _cities[idx].target = v ?? 0;
} }
) )
} }
if (this.$store.getters.copilot?.efficiency.stdRate?.current) { if (this.data?.current) {
this.$store.getters.copilot?.efficiency.stdRate?.current.forEach( this.data?.current.forEach(
(v, idx) => { (v, idx) => {
_cities[idx].current = v ?? 0; _cities[idx].current = v ?? 0;
} }
@ -86,19 +94,24 @@ export default {
return arr; return arr;
}, },
}, },
data() { watch: {
return { period() {
// cities: [ this.data = this.$store.getters.copilot.efficiency.stdRate
// { name: "瑞昌", target: 100, total: 200, current: 20 }, }
// { name: "邯郸", target: 200, total: 300, current: 20 },
// { name: "株洲", target: 300, total: 400, current: 20 },
// { name: "佳木斯", target: 400, total: 500, current: 20 },
// { name: "成都", target: 500, total: 600, current: 20 },
// { name: "凯盛光伏", target: 400, total: 500, current: 20 },
// { name: "蚌埠", target: 500, total: 600, current: 20 },
// ],
};
}, },
// data() {
// return {
// // cities: [
// // { name: "瑞昌", target: 100, total: 200, current: 20 },
// // { name: "邯郸", target: 200, total: 300, current: 20 },
// // { name: "株洲", target: 300, total: 400, current: 20 },
// // { name: "佳木斯", target: 400, total: 500, current: 20 },
// // { name: "成都", target: 500, total: 600, current: 20 },
// // { name: "凯盛光伏", target: 400, total: 500, current: 20 },
// // { name: "蚌埠", target: 500, total: 600, current: 20 },
// // ],
// };
// },
methods: {}, methods: {},
}; };
</script> </script>

14
src/views/copilot/efficiency/index.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 10:04:53 * @Date: 2024-05-07 10:04:53
* @LastEditTime: 2024-06-03 16:08:27 * @LastEditTime: 2024-06-05 09:45:47
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -12,17 +12,17 @@
<Container title="芯片良率" icon="chip2"> <Container title="芯片良率" icon="chip2">
<ChipRate :period="period" :than="than" /> <ChipRate :period="period" :than="than" />
</Container> </Container>
<Container title="标准组件良率" icon="std"> <left-container title="标准组件良率" icon="std">
<StdRate :period="period" :than="than" /> <StdRate :period="period" :than="than" />
</Container> </left-container>
</section> </section>
<section class="bottom flex"> <section class="bottom flex">
<Container title="芯片OEE" icon="chip"> <Container title="芯片OEE" icon="chip">
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" /> <ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
</Container> </Container>
<Container title="转化效率" icon="cube"> <left-container title="转化效率" icon="cube">
<TransformRate :transformRate="transformRate" :period="period" :than="than" /> <TransformRate :transformRate="transformRate" :period="period" :than="than" />
</Container> </left-container>
</section> </section>
@ -30,7 +30,8 @@
</template> </template>
<script> <script>
import Container from "@/views/copilot/components/Container.vue"; import Container from "@/views/copilot/components/rightContainer.vue";
import leftContainer from "@/views/copilot/components/leftContainer.vue";
import ChipOeeVue from "./components/ChipOee.vue"; import ChipOeeVue from "./components/ChipOee.vue";
import ChipRateVue from "./components/ChipRate.vue"; import ChipRateVue from "./components/ChipRate.vue";
import StdRateVue from "./components/StdRate.vue"; import StdRateVue from "./components/StdRate.vue";
@ -40,6 +41,7 @@ export default {
name: "efficiencyCopilot", name: "efficiencyCopilot",
components: { components: {
Container, Container,
leftContainer,
ChipOee: ChipOeeVue, ChipOee: ChipOeeVue,
ChipRate: ChipRateVue, ChipRate: ChipRateVue,
StdRate: StdRateVue, StdRate: StdRateVue,

4
src/views/copilot/efficiencyContainer.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-20 16:04:18 * @Date: 2024-05-20 16:04:18
* @LastEditTime: 2024-06-03 15:45:58 * @LastEditTime: 2024-06-03 16:46:11
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -25,7 +25,7 @@ import CopilotHeaderVue from "./components/CopilotHeader.vue";
import EfficiencyCopilot from "./efficiency/index.vue"; import EfficiencyCopilot from "./efficiency/index.vue";
export default { export default {
name: "CopilotContainer", name: "copilotEfficiencyContainer",
components: { components: {
CopilotHeaderVue, CopilotHeaderVue,
EfficiencyCopilot, EfficiencyCopilot,

8
src/views/copilot/factoryData/bbIndex.vue
View File

@ -8,9 +8,9 @@
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<db-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" /> <order :prodOrder="prodOrder" />
</db-container> </left-container>
<!-- <db-container title="" icon="store"> --> <!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> --> <!-- <store :stock="stock" /> -->
<!-- </db-container> --> <!-- </db-container> -->
@ -26,7 +26,8 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
@ -38,6 +39,7 @@ export default {
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, DbContainer: Container,
LeftContainer: leftContainer,
ProdMonitor, ProdMonitor,
// Store, // Store,
// Energy, // Energy,

8
src/views/copilot/factoryData/cdIndex.vue
View File

@ -8,9 +8,9 @@
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<db-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" /> <order :prodOrder="prodOrder" />
</db-container> </left-container>
<!-- <db-container title="" icon="store"> --> <!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> --> <!-- <store :stock="stock" /> -->
<!-- </db-container> --> <!-- </db-container> -->
@ -26,7 +26,8 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
@ -38,6 +39,7 @@ export default {
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, DbContainer: Container,
LeftContainer: leftContainer,
ProdMonitor, ProdMonitor,
// Store, // Store,
// Energy, // Energy,

8
src/views/copilot/factoryData/components/BarChartBase.vue
View File

@ -231,7 +231,13 @@ export default {
console.log("this.energyCockpits", this.energyCockpits); console.log("this.energyCockpits", this.energyCockpits);
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量']; let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
// let n = 0; // let n = 0;
let seriesArr =[] let seriesArr = []
// let arr = []
// if (this.energyCockpits) {
// this.energyCockpits.forEach(ele => {
// arr.push()
// });
// }
seriesArr[0] = this.energyCockpits.length != 0 && this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0 seriesArr[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[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[2] = this.energyCockpits.length != 0 && this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0

53
src/views/copilot/factoryData/components/BarChartChipOEE.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-30 08:58:39 * @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-05-31 15:52:28 * @LastEditTime: 2024-06-05 09:15:03
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -83,6 +83,7 @@ export default {
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -173,32 +174,11 @@ export default {
}, },
{ {
name: "", // "2024年目标值", name: "", // "2024年目标值",
type: "bar", type: "line",
barWidth: 12, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color:'#f3c000'
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#f3c000", // 0% 处的颜色
},
{
offset: 1,
color: "#f3c00033",
},
{
offset: 1,
color: "transparent", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
}, },
data: [], // this.series[0].data, data: [], // this.series[0].data,
}, },
@ -337,7 +317,32 @@ export default {
background-color: #58adfa; background-color: #58adfa;
} }
.legend-item:nth-child(3):before { .legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000; background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -0.951vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
} }
} }
</style> </style>

2
src/views/copilot/factoryData/components/ProdMonitor.vue
View File

@ -23,7 +23,7 @@
<div class="separate"> <div class="separate">
<div> <div>
<span class="type">玻璃类型</span> <span class="type">玻璃类型</span>
<span class="type-name">标准组检产量</span> <span class="type-name">标准组件产量</span>
</div> </div>
<div> <div>
<span class="type">良品数量</span> <span class="type">良品数量</span>

241
src/views/copilot/factoryData/components/leftContainer.vue Normal file
View File

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

233
src/views/copilot/factoryData/components/rightContainer.vue Normal file
View File

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

8
src/views/copilot/factoryData/hdIndex.vue
View File

@ -8,9 +8,9 @@
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<db-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" /> <order :prodOrder="prodOrder" />
</db-container> </left-container>
<!-- <db-container title="" icon="store"> --> <!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> --> <!-- <store :stock="stock" /> -->
<!-- </db-container> --> <!-- </db-container> -->
@ -26,7 +26,8 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
@ -38,6 +39,7 @@ export default {
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, DbContainer: Container,
LeftContainer: leftContainer,
ProdMonitor, ProdMonitor,
// Store, // Store,
// Energy, // Energy,

9
src/views/copilot/factoryData/index.vue
View File

@ -8,9 +8,9 @@
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<db-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" /> <order :prodOrder="prodOrder" />
</db-container> </left-container>
<!-- <db-container title="" icon="store"> --> <!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> --> <!-- <store :stock="stock" /> -->
<!-- </db-container> --> <!-- </db-container> -->
@ -26,7 +26,9 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
@ -38,6 +40,7 @@ export default {
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, DbContainer: Container,
LeftContainer:leftContainer,
ProdMonitor, ProdMonitor,
// Store, // Store,
// Energy, // Energy,

8
src/views/copilot/factoryData/jmsIndex.vue
View File

@ -8,9 +8,9 @@
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<db-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" /> <order :prodOrder="prodOrder" />
</db-container> </left-container>
<!-- <db-container title="" icon="store"> --> <!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> --> <!-- <store :stock="stock" /> -->
<!-- </db-container> --> <!-- </db-container> -->
@ -26,7 +26,8 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
@ -38,6 +39,7 @@ export default {
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, DbContainer: Container,
LeftContainer: leftContainer,
ProdMonitor, ProdMonitor,
// Store, // Store,
// Energy, // Energy,

8
src/views/copilot/factoryData/ksIndex.vue
View File

@ -8,9 +8,9 @@
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<db-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" /> <order :prodOrder="prodOrder" />
</db-container> </left-container>
<!-- <db-container title="" icon="store"> --> <!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> --> <!-- <store :stock="stock" /> -->
<!-- </db-container> --> <!-- </db-container> -->
@ -26,7 +26,8 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
@ -38,6 +39,7 @@ export default {
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, DbContainer: Container,
LeftContainer: leftContainer,
ProdMonitor, ProdMonitor,
// Store, // Store,
// Energy, // Energy,

6
src/views/copilot/factoryData/oldIndex.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-21 13:24:03 * @Date: 2024-05-21 13:24:03
* @LastEditTime: 2024-05-21 13:24:03 * @LastEditTime: 2024-06-05 09:43:30
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -37,7 +37,7 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; // import Container from "./components/Container.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import Store from "./components/Store.vue"; import Store from "./components/Store.vue";
import Energy from "./components/Energy.vue"; import Energy from "./components/Energy.vue";
@ -47,7 +47,7 @@ export default {
name: "factoryData", name: "factoryData",
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, // DbContainer: Container,
ProdMonitor, ProdMonitor,
Store, Store,
Energy, Energy,

9
src/views/copilot/factoryData/zzIndex.vue
View File

@ -8,9 +8,9 @@
<prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data"
:prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
</db-container> </db-container>
<db-container title="工单监控" icon="order"> <left-container title="工单监控" icon="order">
<order :prodOrder="prodOrder" /> <order :prodOrder="prodOrder" />
</db-container> </left-container>
<!-- <db-container title="" icon="store"> --> <!-- <db-container title="" icon="store"> -->
<!-- <store :stock="stock" /> --> <!-- <store :stock="stock" /> -->
<!-- </db-container> --> <!-- </db-container> -->
@ -26,7 +26,9 @@
</template> </template>
<script> <script>
import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
import Container from "./components/Container.vue"; import Container from "./components/rightContainer.vue";
import leftContainer from "./components/leftContainer.vue";
import ProdMonitor from "./components/ProdMonitor.vue"; import ProdMonitor from "./components/ProdMonitor.vue";
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Store from "./components/Store.vue"; // import Store from "./components/Store.vue";
@ -38,6 +40,7 @@ export default {
components: { components: {
FactoryDataHeader, FactoryDataHeader,
DbContainer: Container, DbContainer: Container,
LeftContainer: leftContainer,
ProdMonitor, ProdMonitor,
// Store, // Store,
// Energy, // Energy,

25
src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-20 13:32:59 * @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-06-03 16:26:24 * @LastEditTime: 2024-06-05 13:43:13
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -115,21 +115,25 @@ export default {
items = [ items = [
{ label: `${month}月${today}日累计`,}, { label: `${month}月${today}日累计`,},
{ label: `去年${month}月${today}日累计` }, { label: `去年${month}月${today}日累计` },
{ label: `${month}月${today}日目标`, },
]; ];
} else if (this.period === '日' && this.than === '环比') { } else if (this.period === '日' && this.than === '环比') {
items = [ items = [
{ label: `${month}月${today}日累计`}, { label: `${month}月${today}日累计`},
{ label: `${yesterday}日累计`}, { label: `${yesterday}日累计` },
{ label: `${month}月${today}日目标`, },
]; ];
} else if (this.period === '周' && this.than === '同比') { } else if (this.period === '周' && this.than === '同比') {
items = [ items = [
{ label: `本周累计`,}, { label: `本周累计`,},
{ label: `去年本周累计`}, { label: `去年本周累计` },
{ label: `本周目标`, },
]; ];
} else if (this.period === '周' && this.than === '环比') { } else if (this.period === '周' && this.than === '环比') {
items = [ items = [
{ label: `本周累计`,}, { label: `本周累计`,},
{ label: `上周累计`,}, { label: `上周累计`, },
{ label: `本周目标`, },
]; ];
} else if (this.period === '月' && this.than === '同比') { } else if (this.period === '月' && this.than === '同比') {
items = [ items = [
@ -156,9 +160,9 @@ export default {
: (vt[1] != 0 && vt[1] != null) && vt[2] == 0 : (vt[1] != 0 && vt[1] != null) && vt[2] == 0
? "100%" : '0%', ? "100%" : '0%',
subtitle = 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[0], this.valueTuple[1], this.valueTuple[2],)
console.log(items) console.log(this.valueTuple[2]- this.valueTuple[1])
return getOptions({ return getOptions({
titleValue, titleValue,
subtitle, subtitle,
@ -166,7 +170,7 @@ export default {
preName: items[1].label, preName: items[1].label,
previousSum: this.valueTuple[0], previousSum: this.valueTuple[0],
currentSum: this.valueTuple[1], currentSum: this.valueTuple[1],
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 , targetSum: this.valueTuple[2] ? this.valueTuple[2] :0,
}); });
}, },
@ -213,7 +217,8 @@ export default {
}, },
}; };
function calculateItems(period, valueTuple,than) { function calculateItems(period, valueTuple, than) {
console.log('valueTuple', valueTuple);
let items = []; let items = [];
var day1 = new Date(); var day1 = new Date();
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000); day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
@ -231,21 +236,25 @@ function calculateItems(period, valueTuple,than) {
items = [ items = [
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] }, { label: `去年${month}月${today}日累计`, value: valueTuple[0] },
{ label: `${month}月${today}日累计`, value: valueTuple[1] }, { label: `${month}月${today}日累计`, value: valueTuple[1] },
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
]; ];
} else if (period === '日' && than === '环比') { } else if (period === '日' && than === '环比') {
items = [ items = [
{ label: `${yesterday}日累计`, value: valueTuple[0] }, { label: `${yesterday}日累计`, value: valueTuple[0] },
{ label: `${month}月${today}日累计`, value: valueTuple[1] }, { label: `${month}月${today}日累计`, value: valueTuple[1] },
{ label: `${month}月${today}日目标`, value: valueTuple[2] },
]; ];
} else if (period === '周' && than === '同比') { } else if (period === '周' && than === '同比') {
items = [ items = [
{ label: `去年本周累计`, value: valueTuple[0] }, { label: `去年本周累计`, value: valueTuple[0] },
{ label: `本周累计`, value: valueTuple[1] }, { label: `本周累计`, value: valueTuple[1] },
{ label: `本周目标`, value: valueTuple[2] },
]; ];
} else if (period === '周' && than === '环比') { } else if (period === '周' && than === '环比') {
items = [ items = [
{ label: `上周累计`, value: valueTuple[0] }, { label: `上周累计`, value: valueTuple[0] },
{ label: `本周累计`, value: valueTuple[1] }, { label: `本周累计`, value: valueTuple[1] },
{ label: `本周目标`, value: valueTuple[2] },
]; ];
} else if (period === '月' && than === '同比') { } else if (period === '月' && than === '同比') {
items = [ items = [

27
src/views/copilot/yield/index.vue
View File

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

25
src/views/copilot/yield/options/double-ring-chart-options.js
View File

@ -61,6 +61,9 @@ export default ({
value: currentSum, value: currentSum,
name: currentName, name: currentName,
selected: false, selected: false,
tooltip: {
formatter: `${currentName} : ${currentSum}`
},
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
borderCap: "round", borderCap: "round",
@ -80,10 +83,11 @@ export default ({
}, },
}, },
{ {
value:currentSum == 0 value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
? 1 name: currentName,
: 0, tooltip: {
name: "未达成累计", formatter: `${currentName} : ${currentSum}`
},
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
}, },
@ -106,6 +110,9 @@ export default ({
value: previousSum, value: previousSum,
name: preName, name: preName,
selected: false, selected: false,
tooltip: {
formatter: `${preName} : ${previousSum}`
},
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
borderCap: "round", borderCap: "round",
@ -125,10 +132,12 @@ export default ({
}, },
}, },
{ {
value:previousSum == 0
? 1 value:previousSum === 0 ? 1 : 0,
: 0, name: preName,
name: "-", tooltip: {
formatter: `${preName} : ${previousSum}`
},
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
}, },

39
src/views/dashboard/charts/ChipYieldChart.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-28 13:42:51 * @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-31 16:11:56 * @LastEditTime: 2024-06-05 14:12:31
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -98,9 +98,12 @@ export default {
}, },
data: [ data: [
{ {
value: 90, value: 0,
name: `${year}累计产出`, name: `${year}累计产出`,
selected: false, selected: false,
tooltip: {
formatter: null,
},
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
borderCap: "round", borderCap: "round",
@ -120,8 +123,11 @@ export default {
}, },
}, },
{ {
value: 20, value: 0,
name: "-", name: `${year}目标`,
tooltip: {
formatter: null,
},
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
}, },
@ -141,9 +147,12 @@ export default {
}, },
data: [ data: [
{ {
value: 90, value: 0,
name: `${year - 1}累计产出`, name: `${year - 1}累计产出`,
selected: false, selected: false,
tooltip: {
formatter: null,
},
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
borderCap: "round", borderCap: "round",
@ -164,7 +173,10 @@ export default {
}, },
{ {
value: 0, value: 0,
name: "-", name: `${year - 1}累计产出`,
tooltip: {
formatter:null,
},
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
}, },
@ -209,7 +221,9 @@ export default {
}; };
}, },
actualOptions() { actualOptions() {
const year = new Date().getFullYear()
const options = JSON.parse(JSON.stringify(this.options)); const options = JSON.parse(JSON.stringify(this.options));
// console.log('options', options);
// 标题 // 标题
if (!this.output.target) options.title.text = "0%"; if (!this.output.target) options.title.text = "0%";
else else
@ -221,20 +235,29 @@ export default {
this.output.current == 0 this.output.current == 0
) { ) {
options.series[1].data[0].value = 0; options.series[1].data[0].value = 0;
options.series[1].data[1].value = 100; options.series[1].data[1].value = 1;
options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
} else { } else {
options.series[1].data[0].value = this.output.current; options.series[1].data[0].value = this.output.current;
options.series[1].data[1].value = options.series[1].data[1].value =
this.output.target - this.output.current; this.output.target - this.output.current;
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
} }
// 内环 // 内环
if (this.output.previous == 0) { if (this.output.previous == 0) {
options.series[2].data[0].value = 0; options.series[2].data[0].value = 0;
options.series[2].data[1].value = 100; options.series[2].data[1].value = 1;
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
} else { } else {
options.series[2].data[0].value = this.output.previous; options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0; options.series[2].data[1].value = 0;
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
} }
console.log('options', options);
return options; return options;
}, },
}, },

7
src/views/dashboard/charts/LeftChartBase.vue
View File

@ -86,6 +86,7 @@ export default {
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
align:'right'
}, },
axisTick: { axisTick: {
show: false, show: false,
@ -113,10 +114,11 @@ export default {
barWidth: 12, barWidth: 12,
label: { label: {
show: true, //开启显示 show: true, //开启显示
align: 'right', //在上方显示
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: '#DFF1FE', color: '#DFF1FE',
fontSize: 16 fontSize: 12
} }
}, },
itemStyle: { itemStyle: {
@ -156,10 +158,11 @@ export default {
barWidth: 12, barWidth: 12,
label: { label: {
show: true, //开启显示 show: true, //开启显示
align: 'left', //在上方显示
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: '#DFF1FE', color: '#DFF1FE',
fontSize: 16 fontSize: 12
} }
}, },
itemStyle: { itemStyle: {

3
src/views/dashboard/charts/RightChartBase.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-28 13:42:51 * @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-05-31 16:13:47 * @LastEditTime: 2024-06-04 15:35:54
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -92,6 +92,7 @@ export default {
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
align: 'right'
}, },
axisTick: { axisTick: {
show: false, show: false,

16
src/views/index.vue
View File

@ -5,8 +5,8 @@
<!-- <div v-if="visible" class="zzLine"></div> --> <!-- <div v-if="visible" class="zzLine"></div> -->
<!-- <div v-if="visible" class="rcLine"></div> --> <!-- <div v-if="visible" class="rcLine"></div> -->
<!-- <div v-if="visible" class="rcLineTwo"></div> --> <!-- <div v-if="visible" class="rcLineTwo"></div> -->
<div v-if="visible" class="hdLine"></div> <!-- <div v-if="visible" class="hdLine"></div> -->
<div v-if="visible" class="hdLineTwo"></div> <!-- <div v-if="visible" class="hdLineTwo"></div> -->
<!-- <div v-if="visible" class="ksLine"></div> --> <!-- <div v-if="visible" class="ksLine"></div> -->
<!-- <div v-if="visible" class="bbLine"></div> --> <!-- <div v-if="visible" class="bbLine"></div> -->
<!-- <div v-if="visible" class="bbLineTwo"></div> --> <!-- <div v-if="visible" class="bbLineTwo"></div> -->
@ -69,11 +69,11 @@ const LOCATIONS = [
// 蚌埠2 // 蚌埠2
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' }, // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
// 江西 瑞昌 // 江西 瑞昌
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:68.8,lty:52, path: 'factoryData/factory-data' }, { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' },
// 湖南 株洲 // 湖南 株洲
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' }, // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
// 邯郸 // 邯郸
{ x: 58, y: 45, tx: 47, ty: 34, lx: 58.7, ly: 34, ltx: 53, lty: 34, path: 'factoryData/hdIndex' }, { x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
]; ];
// rcLine.style.left = `66.8%`; // rcLine.style.left = `66.8%`;
// rcLine.style.top = `52%`; // rcLine.style.top = `52%`;
@ -395,9 +395,9 @@ export default {
.hdLine { .hdLine {
position: absolute; position: absolute;
left: 58.7%; /* left: 58.7%; */
width: 1px; width: 1px;
top: 34%; /* top: 34%; */
display: inline-block; display: inline-block;
/* // x: 60, y: 58, */ /* // x: 60, y: 58, */
height: 6vw; height: 6vw;
@ -405,9 +405,9 @@ export default {
} }
.hdLineTwo { .hdLineTwo {
position: absolute; position: absolute;
left: 53%; /* left: 53%; */
width: 5vw; width: 5vw;
top: 34%; /* top: 34%; */
display: inline-block; display: inline-block;
/* // x: 60, y: 58, */ /* // x: 60, y: 58, */
height: 1px; height: 1px;