This commit is contained in:
2024-05-20 14:54:18 +08:00
parent 18e50722b0
commit aec811827d
16 changed files with 1826 additions and 910 deletions

View File

@@ -9,11 +9,11 @@
</section>
<section class="menu2">
<CopilotButton
v-for="i in ['日', '周', '月', '年']"
:key="i"
:label="i"
:active="i === period"
@click="() => $emit('update:period', i)"
v-for="i in dataList"
:key="i.id"
:label="i.name"
:active="i.id === period"
@click="() => $emit('update:period', i.id)"
/>
<div class="btn-group">
<button type="button" class="export-btn" />
@@ -42,15 +42,21 @@ export default {
type: String,
},
companyId: {
type: String,
type: Number,
},
period: {
type: String,
type: Number,
},
},
data() {
return {
isFullscreen: false,
dataList: [
{ id: 1, name: "日" },
{ id: 2, name: "周" },
{ id: 3, name: "月" },
{ id: 4, name: "年" },
],
};
},
computed: {},

View File

@@ -26,20 +26,20 @@ export default {
type: String,
},
companyId: {
type: String,
type: Number,
},
},
data() {
return {
isOpen: false,
company: [
{ id: "1", name: "瑞昌中建材光电材料有限公司" },
{ id: "2", name: "邯郸中建材光电材料有限公司" },
{ id: "3", name: "株洲中建材光电材料有限公司" },
{ id: "4", name: "佳木斯中建材光电材料有限公司" },
{ id: "5", name: "成都中建材光电材料有限公司" },
{ id: "6", name: "凯盛中建材光电材料有限公司" },
{ id: "7", name: "蚌埠中建材光电材料有限公司" },
{ id: 0, name: "瑞昌中建材光电材料有限公司" },
{ id: 1, name: "邯郸中建材光电材料有限公司" },
{ id: 2, name: "株洲中建材光电材料有限公司" },
{ id: 3, name: "佳木斯中建材光电材料有限公司" },
{ id: 4, name: "成都中建材光电材料有限公司" },
{ id: 5, name: "凯盛中建材光电材料有限公司" },
{ id: 6, name: "蚌埠中建材光电材料有限公司" },
],
};
},

View File

@@ -0,0 +1,27 @@
<template>
<div class="notmsg">暂无数据</div>
</template>
<script>
export default {
name: 'NotMsg',
components: {},
data() {
return {
};
},
computed: {
},
methods: {
},
};
</script>
<style scoped lang="scss">
.notmsg {
padding-top: 72px;
color: rgba(255, 255, 255, 0.4);
text-align: center;
font-size: 24px;
}
</style>

View File

@@ -1,36 +1,37 @@
<template>
<div class="left-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
>{{ item.label }}</span
>
<div>
<div class="left-chart-base">
<NotMsg v-show="notMsg" />
<div class="legend" v-show="!notMsg">
<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%"
v-show="!notMsg"
></div>
</div>
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
import NotMsg from "./../../components/NotMsg";
export default {
name: "Energy",
components: { NotMsg },
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
energyCockpits: {
type: Array,
required: true,
},
@@ -39,6 +40,7 @@ export default {
return {
isFullscreen: false,
actualOptions: null,
notMsg: false,
chart: "",
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
@@ -65,7 +67,7 @@ export default {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
data: this.xAxis,
data: [],
},
yAxis: [
{
@@ -190,6 +192,11 @@ export default {
},
};
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
/** 全屏状态切换时,对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
@@ -216,6 +223,12 @@ export default {
// this.actualOptions = actualOptions;
// this.initOptions(actualOptions);
// },
energyCockpits() {
this.initChart();
},
isOpen(val) {
this.canvasReset();
},
},
mounted() {
// if (screenfull.isEnabled) {
@@ -241,17 +254,63 @@ export default {
}, 500)();
},
initChart() {
let energyxAxis = [];
let n = 0;
let seriesArr = [
{
name: "水",
energyType: 1,
data: [],
},
{
name: "电",
energyType: 2,
data: [],
},
{
name: "气",
energyType: 3,
data: [],
},
];
if (this.energyCockpits.length > 0) {
this.notMsg = false;
let dataArr = this.energyCockpits.map((item) => {
return item.groupName;
});
energyxAxis = Array.from(new Set(dataArr));
n = energyxAxis.length;
seriesArr[0].data = Array.from({ length: n }, () => 0);
seriesArr[1].data = Array.from({ length: n }, () => 0);
seriesArr[2].data = Array.from({ length: n }, () => 0);
for (let i = 0; i < this.energyCockpits.length; i++) {
for (let j = 0; j < energyxAxis.length; j++) {
if (this.energyCockpits[i].groupName === energyxAxis[j]) {
if (this.energyCockpits[i].energyType === 1) {
seriesArr[0].data[j] = this.energyCockpits[i].totalEnergyValue;
} else if (this.energyCockpits[i].energyType === 2) {
seriesArr[1].data[j] = this.energyCockpits[i].totalEnergyValue;
} else if (this.energyCockpits[i].energyType === 3) {
seriesArr[2].data[j] = this.energyCockpits[i].totalEnergyValue;
}
}
}
}
} else {
this.notMsg = true;
}
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById("factoryEnergyChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = this.series[0].data;
actualOptions.series[0].name = this.series[0].name;
actualOptions.series[1].data = this.series[1].data;
actualOptions.series[1].name = this.series[1].name;
actualOptions.series[2].data = this.series[2].data;
actualOptions.series[2].name = this.series[2].name;
actualOptions.xAxis.data = energyxAxis;
actualOptions.series[0].data = seriesArr[0].data;
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;
this.actualOptions = actualOptions;
this.chart.setOption(actualOptions);
},

View File

@@ -1,8 +1,9 @@
<template>
<dv-scroll-board
v-if="aa"
v-if="showTable"
:config="config"
style="width: 100%; height: 100%"
ref="orderScrollBoard"
/>
</template>
<script>
@@ -11,7 +12,7 @@ export default {
name: "Order",
data() {
return {
aa: true,
showTable: true,
config: {
header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
headerBGC: "rgba(0, 106, 205, 0.22)",
@@ -26,51 +27,87 @@ export default {
},
};
},
props: {
prodOrder: {
type: Array,
default: [],
},
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
watch: {
isOpen(val) {
this.tableReset();
},
prodOrder() {
this.getTableList();
},
},
mounted() {
this.getTableList();
this.tableReset();
window.addEventListener("resize", this.tableReset);
},
methods: {
tableReset() {
this.aa = false;
this.showTable = false;
debounce(() => {
this.initTable();
}, 500)();
},
initTable() {
this.aa = true;
this.showTable = true;
},
getTableList() {
let _this = this;
setTimeout(
(function name() {
_this.config.data = [
["1", "行1列1", "行1列2", "行1列3", "50%"],
["2", "行2列1", "行2列2", "行2列3", "50%"],
["3", "行3列1", "行3列2", "行3列3", "50%"],
["4", "行4列1", "行4列2", "行4列3", "50%"],
["5", "行5列1", "行5列2", "行5列3", "50%"],
["6", "行6列1", "行6列2", "行6列3", "50%"],
["7", "行7列1", "行7列2", "行7列3", "50%"],
["8", "行8列1", "行8列2", "行8列3", "50%"],
["9", "行9列1", "行9列2", "行9列3", "50%"],
["10", "行10列1", "行10列2", "行10列3", "50%"],
["11", "行11列1", "行11列2", "行11列3", "50%"],
["12", "行12列1", "行12列2", "行12列3", "50%"],
["13", "行13列1", "行13列2", "行13列3", "50%"],
["14", "行14列1", "行14列2", "行14列3", "50%"],
["15", "行15列1", "行15列2", "行15列3", "50%"],
["16", "行16列1", "行16列2", "行16列3", "50%"],
["17", "行17列1", "行17列2", "行17列3", "50%"],
["18", "行18列1", "行18列2", "行18列3", "50%"],
["19", "行19列1", "行19列2", "行19列3", "50%"],
["20", "行20列1", "行20列2", "行20列3", "50%"],
];
})(),
2000
);
this.initTable();
let outArr = [];
if (this.prodOrder.length > 0) {
for (let i = 0; i < this.prodOrder.length; i++) {
let arr = [];
arr.push(i + 1);
arr.push(
`<span title=${this.prodOrder[i].customerName || ""}>${
this.prodOrder[i].customerName || ""
}</span>`
);
arr.push(
`<span title=${this.prodOrder[i].productName || ""}>${
this.prodOrder[i].productName || ""
}</span>`
);
arr.push(
`<span title=${this.prodOrder[i].plannedProductionQuantity || ""}>${
this.prodOrder[i].plannedProductionQuantity || ""
}</span>`
);
arr.push(`<span style="display:inline-block;width:45px;">${
this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) + "%"
: "0%"
}</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) *
37.68 *
0.01 +
"," +
(1 -
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
37.68
: 0 + "," + 37.68
}"/>
</svg>
</div>`);
outArr.push(arr);
}
this.config.data = outArr;
} else {
this.config.data = [];
}
this.$refs["orderScrollBoard"].updateRows(outArr);
},
},
};

View File

@@ -14,7 +14,7 @@
</div>
<div class="right-box">
<span class="type">投入数量</span>
<span class="num">8391222</span>
<span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
</div>
</div>
<div class="std-box">
@@ -33,7 +33,9 @@
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">740</span>
<span class="type-name">{{
msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
}}</span>
</div>
</div>
</div>
@@ -41,11 +43,15 @@
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">783</span>
<span class="num">{{
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">96%</span>
<span class="num"
>{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span
>
</div>
</div>
</div>
@@ -66,7 +72,9 @@
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">740</span>
<span class="type-name">{{
msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
}}</span>
</div>
</div>
</div>
@@ -74,11 +82,15 @@
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">783</span>
<span class="num">{{
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">96%</span>
<span class="num"
>{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
>
</div>
</div>
</div>
@@ -99,7 +111,9 @@
</div>
<div>
<span class="type">良品数量</span>
<span class="type-name">740</span>
<span class="type-name">{{
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
}}</span>
</div>
</div>
</div>
@@ -107,11 +121,15 @@
<div class="separate">
<div>
<span class="type">生产数量</span>
<span class="num">783</span>
<span class="num">{{
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
}}</span>
</div>
<div>
<span class="type1">良品率</span>
<span class="num">96%</span>
<span class="num"
>{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
>
</div>
</div>
</div>
@@ -121,6 +139,51 @@
<script>
export default {
name: "ProdMonitor",
data() {
return {
msgObj: {
stand: {},
chip: {},
bipv: {},
},
};
},
props: {
prodOutPut: {
type: Array,
default: [],
},
prodFto: {
type: Array,
default: [],
},
},
watch: {
prodOutPut() {
this.makeData();
},
},
mounted() {
this.makeData();
},
methods: {
makeData() {
this.msgObj.chip = {};
this.msgObj.stand = {};
this.msgObj.bipv = {};
if (this.prodOutPut.length > 0) {
this.prodOutPut.map((item) => {
if (item.glassType === 0) {
this.msgObj.chip = item;
} else if (item.glassType === 1) {
this.msgObj.stand = item;
} else if (item.glassType === 2) {
this.msgObj.bipv = item;
}
});
}
},
},
};
</script>
<style lang="scss" scoped>

View File

@@ -1,36 +1,43 @@
<template>
<div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
<div>
<NotMsg v-show="notMsg" />
<div
id="factoryStoreChart"
style="width: 100%; height: 100%"
v-show="!notMsg"
></div>
</div>
</template>
<script>
import { debounce } from "@/utils/debounce";
import * as echarts from "echarts";
import NotMsg from "./../../components/NotMsg";
export default {
name: "Store",
components: { NotMsg },
props: {
vHeight: {
type: Number,
default: 34,
},
xAxis: {
type: Array,
stock: {
type: Object,
required: true,
},
series: {
type: Array,
required: true,
},
computed: {
isOpen() {
return this.$store.getters.sidebar.opened;
},
},
data() {
return {
isFullscreen: false,
actualOptions: null,
notMsg: false,
chart: "",
options: {
grid: {
left: "3%",
right: "1%",
bottom: "0",
top: "10%",
top: "15%",
containLabel: true,
},
tooltip: {},
@@ -47,7 +54,7 @@ export default {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
data: this.xAxis,
data: [],
},
yAxis: {
name: "单位/片",
@@ -116,18 +123,11 @@ export default {
};
},
watch: {
series(val) {
if (!val) {
this.initOptions(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name;
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
stock(val) {
this.initChart();
},
isOpen(val) {
this.canvasReset();
},
},
mounted() {
@@ -154,13 +154,23 @@ export default {
}, 500)();
},
initChart() {
let xAxis = Object.keys(this.stock) || [];
let data = [];
if (xAxis.length > 0) {
this.notMsg = false;
data = xAxis.map((item) => {
return this.stock[item].total;
});
} else {
this.notMsg = true;
}
if (this.chart) {
this.chart.dispose();
}
this.chart = echarts.init(document.getElementById("factoryStoreChart"));
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = this.series[0].data;
actualOptions.series[0].name = this.series[0].name;
actualOptions.xAxis.data = xAxis;
actualOptions.series[0].data = data;
this.actualOptions = actualOptions;
this.chart.setOption(actualOptions);
},

View File

@@ -5,27 +5,23 @@
:companyId="companyId"
:period="period"
@updateCompany="updateCompany"
@update:period="period = $event"
@update:period="updatePeriod"
/>
<div class="factory-section">
<section class="top flex">
<db-container title="生产监控" icon="prod">
<prod-monitor />
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
</db-container>
<db-container title="仓库监控.当前" icon="store">
<store :series="series" :xAxis="xAxis" />
<store :stock="stock" />
</db-container>
</section>
<section class="bottom flex">
<db-container title="能源监控" icon="energy">
<energy
:legend="energyLegend"
:series="energySeries"
:xAxis="energyxAxis"
/>
<energy :legend="energyLegend" :energyCockpits="energyCockpits" />
</db-container>
<db-container title="订单监控" icon="order">
<order />
<order :prodOrder="prodOrder" />
</db-container>
</section>
</div>
@@ -41,7 +37,7 @@ import Energy from "./components/Energy.vue";
import Order from "./components/Order.vue";
import { cockpitDataMonitor } from "@/api/produceData";
export default {
name: "FactoryData",
name: "factoryData",
components: {
FactoryDataHeader,
DbContainer: Container,
@@ -51,89 +47,47 @@ export default {
Order,
},
data() {
const year = new Date().getFullYear();
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
return {
companyId: "1",
companyId: 0,
companyName: "瑞昌中建材光电材料有限公司",
period: "日",
period: 1,
// 接口获取的数据
prodOutPut: [], //生产
prodFto: [], //生产
stock: {}, //仓库
energyCockpits: [], //能源
prodOrder: [], //订单
energyLegend: [
{ label: "电", color: "#FFD160" },
{ label: "水", color: "#2760FF" },
{ label: "气", color: "#12FFF5" },
],
energyxAxis: [3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7],
legend: [
{ label: `${year - 1}`, color: "#12f7f1" },
// { label: `${year}年`, color: "#58adfa" },
],
xAxis: cities,
};
},
computed: {
energySeries() {
return [
{
name: "电",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "水",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
{
name: "气",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
];
},
series() {
// const ftoInvest = this.$store.getters.home.ftoInvest;
// if (!ftoInvest || !ftoInvest.current || !ftoInvest.previous) {
return [
{
name: "2023年",
data: Array.from({ length: 7 }, () =>
Math.floor(Math.random() * 1000)
),
},
];
// }
// return [
// {
// name: `${new Date().getFullYear() - 1}年`,
// data: ftoInvest.previous,
// },
// {
// name: `${new Date().getFullYear()}年`,
// data: ftoInvest.current,
// },
// ];
},
},
mounted() {
this.getMes1();
this.getMes();
},
methods: {
updateCompany(obj) {
this.companyId = obj.companyId;
this.companyName = obj.companyName;
this.getMes();
},
getMes1() {
updatePeriod(val) {
this.period = val;
this.getMes();
},
getMes() {
cockpitDataMonitor({
factorys: [1],
date: 4,
factorys: [this.companyId],
date: this.period,
}).then((res) => {
console.log(res);
this.prodOutPut = res.data.prodOutputMonitorShDO || [];
this.prodFto = res.data.prodOutputFtoDO || [];
this.stock = res.data.stockDO || {};
this.energyCockpits = res.data.energyCockpitsDO || [];
this.prodOrder = res.data.prodOrderMonitorDO || [];
});
},
},