产量和效率
This commit is contained in:
‘937886381’
@@ -11,7 +11,7 @@
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="chart" :style="{ height: '95%',width: width}"></div>
|
||||
<div ref="chart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@@ -51,7 +51,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: '',
|
||||
width: '100%',
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
options: {
|
||||
@@ -184,16 +184,7 @@ export default {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isOpen(val) {
|
||||
// console.log(val)
|
||||
if (val === true) {
|
||||
console.log('ztl')
|
||||
this.width = 95 + '%'
|
||||
this.canvasReset()
|
||||
|
||||
console.log(this.width)
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
this.canvasReset()
|
||||
},
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
@@ -203,21 +194,14 @@ export default {
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
if (val === false && this.isOpen === true) {
|
||||
console.log(val)
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if (val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
// this.initChart(this.actualOptions);
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
|
||||
@@ -10,15 +10,19 @@
|
||||
<section class="menu">
|
||||
<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)" />
|
||||
</section>
|
||||
<div class="page-title">{{ active }}驾驶舱</div>
|
||||
<section class="menu">
|
||||
<section class="menu" style="width: 24vw;float: right;">
|
||||
<CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
|
||||
@click="() => $emit('update:period', i)" />
|
||||
<div class="btn-group">
|
||||
<button type="button" class="export-btn" />
|
||||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||
@click="toggleFullScreen" />
|
||||
<!-- <button class="times-btn"> {{ times }} </button> -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -38,14 +42,61 @@ export default {
|
||||
period: {
|
||||
type: String,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
times:'',
|
||||
isFullscreen: false,
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.getTimes()
|
||||
this.getTimesInterval();
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getTimes() {
|
||||
setInterval(this.getTimesInterval, 60000);
|
||||
},
|
||||
getTimesInterval() {
|
||||
var now = new Date();
|
||||
var weekDay = now.getDay();
|
||||
var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
||||
var week = weeks[weekDay]
|
||||
let _this = this;
|
||||
let year = new Date().getFullYear(); //获取当前时间的年份
|
||||
let month = new Date().getMonth() + 1; //获取当前时间的月份
|
||||
let day = new Date().getDate(); //获取当前时间的天数
|
||||
let hours = new Date().getHours(); //获取当前时间的小时
|
||||
let minutes = new Date().getMinutes(); //获取当前时间的分数
|
||||
// let seconds = new Date().getSeconds(); //获取当前时间的秒数
|
||||
//当小于 10 的是时候，在前面加 0
|
||||
if (hours < 10) {
|
||||
hours = '0' + hours;
|
||||
}
|
||||
if (minutes < 10) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
// if (seconds < 10) {
|
||||
// seconds = '0' + seconds;
|
||||
// }
|
||||
//拼接格式化当前时间
|
||||
this.times =
|
||||
|
||||
year +
|
||||
'.' +
|
||||
month +
|
||||
'.' +
|
||||
day +
|
||||
" " + hours +
|
||||
'.' +
|
||||
minutes +
|
||||
'.' +
|
||||
week
|
||||
},
|
||||
toggleFullScreen() {
|
||||
this.isFullscreen = !this.isFullscreen;
|
||||
screenfull.toggle(document.querySelector(".copilot-layout"))
|
||||
@@ -68,10 +119,11 @@ export default {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.copilot-header > section {
|
||||
width: 24vw;
|
||||
width: 26vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -85,6 +137,17 @@ export default {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.times-btn {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
margin-left: 24px;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
float: right;
|
||||
/* margin-bottom: 20px; */
|
||||
}
|
||||
.export-btn {
|
||||
background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
@@ -98,9 +161,20 @@ export default {
|
||||
background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
/* content: ""; */
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 59px;
|
||||
border: 1px solid;
|
||||
opacity: 0.9;
|
||||
border-image: linear-gradient(180deg, rgba(0, 176, 243, 0), rgba(88, 194, 255, 1), rgba(0, 120, 228, 0)) 2 2;
|
||||
/* position: absolute; */
|
||||
/* left: 0; */
|
||||
/* top: 10px; */
|
||||
}
|
||||
.page-title {
|
||||
flex: 1;
|
||||
width: 25vw;
|
||||
font-size: 54px;
|
||||
line-height: 70px;
|
||||
letter-spacing: 5px;
|
||||
@@ -108,5 +182,6 @@ export default {
|
||||
color: #6db6ff;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
background: url(../../../assets/images/homeindex/page-title.png) 0 0 / 100% 100% no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,39 +1,30 @@
|
||||
<template>
|
||||
<div class="factory-header">
|
||||
<section class="menu1">
|
||||
<FactorySelect
|
||||
:companyName="companyName"
|
||||
:companyId="companyId"
|
||||
@updateCompany="updateCompany"
|
||||
/>
|
||||
</section>
|
||||
<section class="menu2">
|
||||
<CopilotButton
|
||||
v-for="i in ['日', '周', '月', '年']"
|
||||
:key="i"
|
||||
:label="i"
|
||||
:active="i === period"
|
||||
@click="() => $emit('update:period', i)"
|
||||
/>
|
||||
<!-- <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)" />
|
||||
<div class="btn-group">
|
||||
<button type="button" class="export-btn" />
|
||||
<button
|
||||
type="button"
|
||||
class="fullscreen-btn"
|
||||
:class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||
@click="toggleFullScreen"
|
||||
/>
|
||||
<button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
|
||||
@click="toggleFullScreen" />
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import CopilotButton from "./button.vue";
|
||||
// import CopilotButton from "./button.vue";
|
||||
import FactorySelect from "./FactorySelect.vue";
|
||||
import screenfull from "screenfull";
|
||||
|
||||
import CopilotButton from "./button.vue";
|
||||
export default {
|
||||
name: "FactoryDataHeader",
|
||||
components: { CopilotButton, FactorySelect },
|
||||
@@ -42,15 +33,24 @@ export default {
|
||||
type: String,
|
||||
},
|
||||
companyId: {
|
||||
type: String,
|
||||
type: Number,
|
||||
},
|
||||
period: {
|
||||
type: Number,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
dataList: [
|
||||
{ id: 1, name: "日" },
|
||||
{ id: 2, name: "周" },
|
||||
{ id: 3, name: "月" },
|
||||
{ id: 4, name: "年" },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
@@ -84,13 +84,13 @@ export default {
|
||||
}
|
||||
|
||||
.factory-header > .menu1 {
|
||||
width: 24vw;
|
||||
/* display: flex;
|
||||
width: 20vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px; */
|
||||
gap: 8px;
|
||||
}
|
||||
.factory-header > .menu2 {
|
||||
width: 30vw;
|
||||
width: 26vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
@@ -119,13 +119,14 @@ export default {
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex: 1;
|
||||
flex: 1 1 auto;
|
||||
font-size: 40px;
|
||||
line-height: 70px;
|
||||
letter-spacing: 5px;
|
||||
font-family: 优设标题黑;
|
||||
color: #6db6ff;
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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: "蚌埠中建材光电材料有限公司" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
@@ -367,7 +367,7 @@ export default {
|
||||
this.canvasReset()
|
||||
console.log(this.width)
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
|
||||
}
|
||||
@@ -378,7 +378,7 @@ export default {
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if (val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
|
||||
}
|
||||
|
||||
@@ -365,7 +365,7 @@ export default {
|
||||
|
||||
console.log(this.width)
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
},
|
||||
@@ -376,7 +376,7 @@ export default {
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if(val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
// this.actualOptions.series.map((item) => {
|
||||
|
||||
27
src/views/copilot/components/NotMsg.vue
Normal file
27
src/views/copilot/components/NotMsg.vue
Normal 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>
|
||||
298
src/views/copilot/components/ftoBarChartBase.vue
Normal file
298
src/views/copilot/components/ftoBarChartBase.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:49:14
|
||||
* @LastEditTime: 2024-05-29 10:56:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<!--
|
||||
filename: BarChartBase.vue
|
||||
author: liubin
|
||||
date: 2024-04-10 08:59:28
|
||||
description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="ftoChart" style="height:94%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from "screenfull";
|
||||
import ChartContainer from "./ChartContainer.vue";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
// import chartMixin from "@/mixins/chart.js";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "BarChartBase",
|
||||
components: {
|
||||
ChartContainer,
|
||||
},
|
||||
// mixins: [chartMixin],
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 34,
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
in: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: '100%',
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#12f7f1", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.35,
|
||||
color: "#12f7f177", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75,
|
||||
color: "#12f7f133", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "transparent", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
// },
|
||||
// },
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#57abf8", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#364BFE66", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[1].data,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isOpen(val) {
|
||||
// console.log(val)
|
||||
this.canvasReset()
|
||||
},
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 12;
|
||||
});
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.initChart(this.actualOptions);
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initChart(this.options);
|
||||
return;
|
||||
}
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||
console.log('actualOptions', 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.initChart(actualOptions);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if (screenfull.isEnabled) {
|
||||
screenfull.on("change", () => {
|
||||
this.isFullscreen = screenfull.isFullscreen;
|
||||
});
|
||||
}
|
||||
this.actualOptions = this.options
|
||||
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() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.ftoChart);
|
||||
this.chart.setOption(this.actualOptions);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bar-chart-base {
|
||||
// position: relative;
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
right: 1vw;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right: 0.67vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.531vw;
|
||||
height: 0.531vw;
|
||||
background-color: #ccc;
|
||||
border-radius: 2px;
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):before {
|
||||
background-color: #58adfa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-13 14:08:51
|
||||
* @LastEditTime: 2024-05-17 09:37:01
|
||||
* @LastEditTime: 2024-05-23 15:18:53
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -191,7 +191,7 @@ export default {
|
||||
console.log(this.width)
|
||||
} else {
|
||||
console.log('ryf')
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
},
|
||||
@@ -201,7 +201,7 @@ export default {
|
||||
this.width = 97 + '%'
|
||||
this.canvasReset()
|
||||
} else if (val === false && this.isOpen === false) {
|
||||
this.watch = 100 + '%'
|
||||
this.width = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
// this.actualOptions.series.map((item) => {
|
||||
|
||||
@@ -8,9 +8,10 @@
|
||||
<template>
|
||||
<!-- <div class="copilot-layout" ref="copilot-layout"> -->
|
||||
<div class="copilot-layout produce" ref="copilot-layout">
|
||||
<CopilotHeaderVue :active="page" :period="period" @update:active="updateActive" @update:period="period = $event" />
|
||||
<CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive" @update:period="period = $event"
|
||||
@update:than="updateThan" />
|
||||
|
||||
<YieldCopilot :period="period" />
|
||||
<YieldCopilot :period="period" :than="than" />
|
||||
<!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
|
||||
<!-- <EfficiencyCopilot v-if="page == '效率'" :period="period" /> -->
|
||||
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
@@ -20,25 +21,31 @@
|
||||
<script>
|
||||
import CopilotHeaderVue from "./components/CopilotHeader.vue";
|
||||
import YieldCopilot from "./yield/index.vue";
|
||||
import EnergyCopilot from "./energy/index.vue";
|
||||
import EfficiencyCopilot from "./efficiency/index.vue";
|
||||
// import EnergyCopilot from "./energy/index.vue";
|
||||
// import EfficiencyCopilot from "./efficiency/index.vue";
|
||||
|
||||
export default {
|
||||
name: "CopilotContainer",
|
||||
components: {
|
||||
CopilotHeaderVue,
|
||||
YieldCopilot,
|
||||
EnergyCopilot,
|
||||
EfficiencyCopilot,
|
||||
// EnergyCopilot,
|
||||
// EfficiencyCopilot,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page: "产量",
|
||||
period: "日",
|
||||
than:'同比',
|
||||
currentsStyles: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateActive(val, oldVal) {
|
||||
console.log(val)
|
||||
if (val === '效率') {
|
||||
|
||||
@@ -25,6 +25,14 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
chipOeeRate: {
|
||||
type: Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 城市数组的顺序必须是固定的
|
||||
@@ -35,78 +43,236 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
// chipOeeRate() {
|
||||
// return this.$store.getters.copilot.efficiency.chipOeeRate
|
||||
// },
|
||||
series() {
|
||||
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
|
||||
const { chipOee } = this.$store.getters.copilot.efficiency;
|
||||
let dataList = null;
|
||||
const chipOeeRate = this.chipOeeRate
|
||||
// console.log('chipOee', chipOeeRate)
|
||||
let dataList = null
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
case "周":
|
||||
dataList = chipOee?.current;
|
||||
case "周":
|
||||
dataList = chipOee?.current;
|
||||
break;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = chipOee?.previous;
|
||||
dataList[1] = chipOee?.current;
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
case "周":
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current
|
||||
dataList[2] = chipOeeRate?.target
|
||||
}
|
||||
// console.log(dataList)
|
||||
return getTemplate(this.period, dataList);
|
||||
console.log(dataList)
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList, than) {
|
||||
// console.log('dataList',dataList);
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
// console.log('11111', dataList);
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
}
|
||||
return items
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,22 +1,15 @@
|
||||
<!--
|
||||
filename: ChipRate.vue
|
||||
author: liubin
|
||||
date: 2024-04-29 08:50:54
|
||||
description: 芯片良率
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-10 11:10:54
|
||||
* @LastEditTime: 2024-05-29 09:09:43
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="chip-rate">
|
||||
<ChipRateItem
|
||||
:period="period"
|
||||
:cities="['成都', '邯郸', '株洲', '瑞昌']"
|
||||
:color="1"
|
||||
/>
|
||||
<ChipRateItem
|
||||
:period="period"
|
||||
:cities="['佳木斯', '凯盛光伏', '蚌埠兴科']"
|
||||
:color="2"
|
||||
/>
|
||||
<ChipRateItem :period="period" :than="than" :cities="['成都', '邯郸', '株洲', '瑞昌']" :color="1" />
|
||||
<ChipRateItem :period="period" :than="than" :cities="['佳木斯', '凯盛光伏', '蚌埠兴科']" :color="2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -30,6 +23,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-20 10:04:03
|
||||
* @LastEditTime: 2024-05-29 16:10:45
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -12,7 +12,7 @@
|
||||
<StdRateItem :period="period" :city="cities[5]" />
|
||||
</div>
|
||||
<div class="flex-item" v-for="item in cities.filter((val, index) => index != 5)" :key="item.name">
|
||||
<StdRateItem :period="period" :city="item" />
|
||||
<StdRateItem :period="period" :than="than" :city="item" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -27,6 +27,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
cities() {
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
|
||||
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue";
|
||||
export default {
|
||||
name: "TransformRate",
|
||||
components: { BarChartBase },
|
||||
@@ -25,6 +25,14 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
},
|
||||
transformRate: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 城市数组的顺序必须是固定的
|
||||
@@ -35,75 +43,227 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
},
|
||||
series() {
|
||||
const { transformRate } = this.$store.getters.copilot.efficiency;
|
||||
let dataList = null;
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
},
|
||||
// transformRate() {
|
||||
// return this.$store.getters.copilot.efficiency.transformRate
|
||||
// },
|
||||
series() {
|
||||
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
|
||||
const transformRate = this.transformRate
|
||||
// console.log('chipOee', chipOeeRate)
|
||||
let dataList = null;
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
dataList = [];
|
||||
dataList[0] = transformRate.previous;
|
||||
dataList[1] = transformRate.current;
|
||||
case "周":
|
||||
dataList = transformRate?.current;
|
||||
break;
|
||||
dataList = [];
|
||||
dataList[0] = transformRate.previous;
|
||||
dataList[1] = transformRate.current;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = transformRate?.previous;
|
||||
dataList[1] = transformRate?.current;
|
||||
dataList[0] = transformRate.previous;
|
||||
dataList[1] = transformRate.current
|
||||
dataList[2] = transformRate.target
|
||||
}
|
||||
|
||||
return getTemplate(this.period, dataList);
|
||||
console.log('transformRate', dataList)
|
||||
return getTemplate(this.period, dataList, this.than);
|
||||
},
|
||||
// series() {
|
||||
// const { transformRate } = this.$store.getters.copilot.efficiency;
|
||||
// let dataList = null;
|
||||
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// case "周":
|
||||
// dataList = transformRate?.current;
|
||||
// break;
|
||||
// default:
|
||||
// dataList = [];
|
||||
// dataList[0] = transformRate?.previous;
|
||||
// dataList[1] = transformRate?.current;
|
||||
// }
|
||||
|
||||
// return getTemplate(this.period, dataList);
|
||||
// },
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList,than) {
|
||||
// console.log('dataList',dataList);
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
}
|
||||
return items
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 13:22:43
|
||||
* @LastEditTime: 2024-05-14 08:32:44
|
||||
* @LastEditTime: 2024-05-29 14:09:08
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="item in legend" :key="item.label" class="legend-item"
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="chart" :style="{ height: '100%',width: width}"></div>
|
||||
<div ref="oeeChart" style="height:96%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
@@ -171,6 +171,41 @@ export default {
|
||||
},
|
||||
data: [], // this.series[1].data,
|
||||
},
|
||||
{
|
||||
name: "", // "2024年目标值",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#f3c000", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.55,
|
||||
color: "#f3c00033",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "transparent", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -182,13 +217,7 @@ export default {
|
||||
},
|
||||
watch: {
|
||||
isOpen(val) {
|
||||
if (val === true) {
|
||||
this.width = '100%-128px'
|
||||
this.canvasReset()
|
||||
} else {
|
||||
this.watch = 100 + '%'
|
||||
this.canvasReset()
|
||||
}
|
||||
this.canvasReset()
|
||||
},
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
@@ -198,24 +227,47 @@ export default {
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions);
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
// this.canvasReset()
|
||||
// } else if (val === false && this.isOpen === false) {
|
||||
// this.width = 100 + '%'
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions)
|
||||
this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initChart(this.options);
|
||||
return;
|
||||
}
|
||||
console.log(val)
|
||||
// console.log('val', val)
|
||||
const actualOptions = JSON.parse(JSON.stringify(this.options))
|
||||
console.log(actualOptions)
|
||||
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 || "";
|
||||
actualOptions.series[1].data = val?.[1]?.data;
|
||||
actualOptions.series[1].name = val?.[1]?.name;
|
||||
actualOptions.series[2].data = val?.[2]?.data || [];
|
||||
actualOptions.series[2].name = val?.[2]?.name || "";
|
||||
this.actualOptions = actualOptions;
|
||||
this.initChart(actualOptions);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
@@ -243,7 +295,7 @@ export default {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.chart = echarts.init(this.$refs.oeeChart);
|
||||
this.chart.setOption(this.actualOptions);
|
||||
},
|
||||
},
|
||||
@@ -263,7 +315,7 @@ export default {
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right: 0.67vw;
|
||||
margin-right: 1.3vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
@@ -275,7 +327,34 @@ export default {
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
.legend-item:nth-child(3):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.951vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):after {
|
||||
background-color: #f3c000;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
.legend-item:nth-child(1):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,366 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-23 15:50:44
|
||||
* @LastEditTime: 2024-05-29 14:25:10
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<chart-container class="bar-chart-base">
|
||||
<div class="legend">
|
||||
<span v-for="(item,index) in legend" :key="index" class="legend-item"
|
||||
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
|
||||
</div>
|
||||
<div ref="oeeChart" style="height:96%;width:100%"></div>
|
||||
</chart-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import screenfull from "screenfull";
|
||||
import ChartContainer from "../../../../components/ChartContainer.vue";
|
||||
// import chartMixin from "@/mixins/chart.js";
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "BarChartBase",
|
||||
components: {
|
||||
ChartContainer,
|
||||
},
|
||||
// mixins: [chartMixin],
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 36,
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
in: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
width: '100%',
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
options: {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "0%",
|
||||
bottom: "3%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/%",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "", // this.series[0].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#12f7f1", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.35,
|
||||
color: "#12f7f177", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.75,
|
||||
color: "#12f7f133", // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "transparent", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
{
|
||||
name: "", // this.series[1].name,
|
||||
type: "bar",
|
||||
barWidth: 12,
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
// },
|
||||
// },
|
||||
itemStyle: {
|
||||
borderRadius: [10, 10, 0, 0],
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#57abf8", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#364BFE66", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[1].data,
|
||||
},
|
||||
{
|
||||
name: "", // "2024年目标值",
|
||||
type: "line",
|
||||
lineStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#f3c000",
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: "linear",
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#f3c000", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.55,
|
||||
color: "#f3c00033",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "transparent", // 100% 处的颜色
|
||||
},
|
||||
],
|
||||
global: false, // 缺省为 false
|
||||
},
|
||||
},
|
||||
data: [], // this.series[0].data,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
isOpen(val) {
|
||||
this.canvasReset()
|
||||
},
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
isFullscreen(val) {
|
||||
this.actualOptions.series.map((item) => {
|
||||
item.barWidth = val ? 18 : 12;
|
||||
});
|
||||
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// if (val === false && this.isOpen === true) {
|
||||
// console.log(val)
|
||||
// this.width = 97 + '%'
|
||||
// this.canvasReset()
|
||||
// } else if (val === false && this.isOpen === false) {
|
||||
// this.width = 100 + '%'
|
||||
// this.canvasReset()
|
||||
// }
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
this.initChart(this.actualOptions)
|
||||
// this.canvasReset()
|
||||
},
|
||||
series(val) {
|
||||
if (!val) {
|
||||
this.initChart(this.options);
|
||||
return;
|
||||
}
|
||||
console.log(val)
|
||||
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 || "";
|
||||
actualOptions.series[2].data = val?.[2]?.data || [];
|
||||
actualOptions.series[2].name = val?.[2]?.name || "";
|
||||
this.actualOptions = actualOptions;
|
||||
this.initChart(actualOptions);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
// if (screenfull.isEnabled) {
|
||||
// screenfull.on("change", () => {
|
||||
// this.isFullscreen = screenfull.isFullscreen;
|
||||
// });
|
||||
// }
|
||||
this.actualOptions = this.options
|
||||
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() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.oeeChart);
|
||||
this.chart.setOption(this.actualOptions);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bar-chart-base {
|
||||
// position: relative;
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
right: 1vw;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right:1.3vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.531vw;
|
||||
height: 0.531vw;
|
||||
background-color: #ccc;
|
||||
border-radius: 2px;
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):before {
|
||||
background-color: #12f7f1;
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):before {
|
||||
background-color: #58adfa;
|
||||
}
|
||||
.legend-item:nth-child(3):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 1vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #f3c000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.951vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):after {
|
||||
background-color: #f3c000;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
// width: 6px;
|
||||
// height: 6px;
|
||||
width: 0.3191vw;
|
||||
height: 0.3191vw;
|
||||
border-radius: 100%;
|
||||
top: 50%;
|
||||
left: -0.851vw;
|
||||
// left: -16px;
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -13,7 +13,7 @@
|
||||
<!-- <div style="flex:1;padding: 0 20%;"> -->
|
||||
<div class="chart" ref="chart"></div>
|
||||
<!-- </div> -->
|
||||
<div class="legend" v-if="period == '月' || period == '年'">
|
||||
<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>
|
||||
@@ -46,6 +46,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -103,21 +107,72 @@ export default {
|
||||
return t;
|
||||
},
|
||||
legend() {
|
||||
const year = new Date().getFullYear();
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{
|
||||
label:
|
||||
this.period == "月"
|
||||
? `${year - 1}年${month}月良率`
|
||||
: `${year - 1}年良率`,
|
||||
value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
|
||||
},
|
||||
{
|
||||
label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
|
||||
value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
|
||||
},
|
||||
];
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `去年${month}月${today}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `${yesterday}日良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `去年本周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `本周良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `上周良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `去年${month}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `${lastMonth}月良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
{ label: `${month}月目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year}年良率`, value: isNaN(this.valueTuple[1]) || this.valueTuple[1] == null ? 0 + "%" : (this.valueTuple[1]) + "%" },
|
||||
{ label: `${year - 1}年良率`, value: isNaN(this.valueTuple[0]) || this.valueTuple[0] == null ? 0 + "%" : (this.valueTuple[0]) + "%" },
|
||||
{ label: `${year}年目标良率`, value: isNaN(this.valueTuple[2]) || this.valueTuple[2] == null ? 0 + "%" : (this.valueTuple[2]) + "%" },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// [
|
||||
// {
|
||||
// label:
|
||||
// this.period == "月"
|
||||
// ? `${year - 1}年${month}月良率`
|
||||
// : `${year - 1}年良率`,
|
||||
// value: isNaN((this.valueTuple[0] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[0] * 100).toFixed(0) + "%"
|
||||
// },
|
||||
// {
|
||||
// label: this.period == "月" ? `${month}月良率` : `${year}年良率`,
|
||||
// value: isNaN((this.valueTuple[1] * 100).toFixed(0)) ? 0 + "%" : (this.valueTuple[1] * 100).toFixed(0) + "%"
|
||||
// },
|
||||
// ];
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@@ -163,7 +218,9 @@ export default {
|
||||
// width: 290px;
|
||||
align-self: stretch;
|
||||
// flex: 1 1 auto;
|
||||
// padding: 0 10%;
|
||||
align-items: center;
|
||||
// margin:0 auto;
|
||||
// padding: 0 10%;;
|
||||
/* margin: 10%; */
|
||||
/* min-width: 300px; */
|
||||
height: 200px;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="progress-bar" :data-title="titleYear" :data-rate="number">
|
||||
<div class="progress-bar" :data-title="title" :data-rate="value + '%'">
|
||||
<div class="progress-bar__rate" :style="{ width: dataRate == '-' ? 0 : dataRate }"></div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -20,52 +20,25 @@ export default {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
target: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
goodNumber: {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
componentYield: {
|
||||
type: Number,
|
||||
default:0
|
||||
},
|
||||
period: {
|
||||
type: String,
|
||||
default:'日',
|
||||
},
|
||||
// total: {
|
||||
// type: Number,
|
||||
// default: 0,
|
||||
// },
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
city: {
|
||||
type: String,
|
||||
default:""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
number: 0,
|
||||
titleYear:'',
|
||||
};
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
dataRate() {
|
||||
if ((this.period === '年' || this.period === '月') && this.target != 0) {
|
||||
// console.log(this.componentYield)
|
||||
this.titleYear = this.title + ' ' + `${(this.target * 100).toFixed(0)}%`
|
||||
} else {
|
||||
this.titleYear = this.title
|
||||
}
|
||||
this.number = this.value == 0
|
||||
? "-"
|
||||
: `${(this.value * 100).toFixed(0)}%`
|
||||
// console.log(this.period)
|
||||
return this.value == 0
|
||||
? "-"
|
||||
: this.value >1 ? 100 + '%' :`${(this.value * 100).toFixed(0)}%`
|
||||
: this.value > 1
|
||||
? 100 + '%'
|
||||
: `${(parseFloat(this.value)).toFixed(0)}%`;
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
@@ -95,7 +68,7 @@ export default {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: -200%;
|
||||
right: 10px;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -104,6 +77,7 @@ export default {
|
||||
color: #11eae3;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&:after {
|
||||
color: #0e65fd;
|
||||
@@ -116,17 +90,20 @@ export default {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(to right,
|
||||
#004c5e11 10%,
|
||||
#004c5e,
|
||||
#0ac0c0,
|
||||
#11eae3);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.progress-bar__rate {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#004c5e11 10%,
|
||||
#004c5e,
|
||||
#0ac0c0,
|
||||
#11eae3
|
||||
);
|
||||
background: linear-gradient(to right,
|
||||
#004c5e11 10%,
|
||||
#004c5e,
|
||||
#0ac0c0,
|
||||
#11eae3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:25:10
|
||||
* @LastEditTime: 2024-05-20 09:46:19
|
||||
* @LastEditTime: 2024-05-29 17:03:00
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -11,28 +11,30 @@
|
||||
<CityName :value="city.name" />
|
||||
<div class="std-rate-item__value">
|
||||
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||
<!-- <ProgressBar title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
||||
<ProgressBar :period="period" :title="titlePre" :value="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 title="24年累计" :total="city.target" :value="city.thisYear" /> -->
|
||||
<ProgressBar :period="period" :title="titlePre" :value="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="titleEnd" :target="city.target" :value="city.current" />
|
||||
<ProgressBar :period="period" :title="title" :value="city.previous" />
|
||||
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
|
||||
<ProgressBar :period="period" :title="titlePre" :value="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="titleEnd" :target="city.target" :value="city.current" />
|
||||
<ProgressBar :period="period" :title="title" :value="city.previous" />
|
||||
<ProgressBar :period="period" :title="titleTarget" :value="city.target" />
|
||||
<ProgressBar :period="period" :title="titlePre" :value="city.previous" />
|
||||
<ProgressBar :period="period" :title="title" :value="city.current" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -52,7 +54,11 @@ export default {
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
}
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -60,44 +66,65 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return "今日"
|
||||
case "周":
|
||||
return "本周"
|
||||
case "月":
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return `${year - 1}年${month}月累计`
|
||||
case "年": {
|
||||
const year = new Date().getFullYear();
|
||||
// return [
|
||||
return `${year - 1}年累计`
|
||||
// ];
|
||||
}
|
||||
default:
|
||||
return "今日"
|
||||
titlePre() {
|
||||
console.log(this.city);
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
const today = new Date().getDate();
|
||||
const month = new Date().getMonth() + 1;
|
||||
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}日`
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
return `${yesterday}日`
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
return `去年本周`
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
return `上周`
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
return `去年${month}月`
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
return `${lastMonth}月`
|
||||
} else {
|
||||
return `${year - 1}年`
|
||||
}
|
||||
},
|
||||
titleEnd() {
|
||||
switch (this.period) {
|
||||
// case "日":
|
||||
// return "今日"
|
||||
// case "周":
|
||||
// return "本周"
|
||||
case "月":
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return `${year}年${month}月目标`
|
||||
case "年": {
|
||||
const year = new Date().getFullYear();
|
||||
// return [
|
||||
return `${year}年目标`
|
||||
// ];
|
||||
}
|
||||
title() {
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
const today = new Date().getDate();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
return `${month}月${today}日`
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
return `${month}月${today}日`
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
return `本周`
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
return `本周`
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
return `${month}月`
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
return `${month}月`
|
||||
} else {
|
||||
return `${year}年`
|
||||
}
|
||||
}
|
||||
},
|
||||
titleTarget() {
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
const today = new Date().getDate();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '月') {
|
||||
return `${month}月目标`
|
||||
} else if (this.period === '年') {
|
||||
return `${year}年目标`
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-17 17:05:36
|
||||
* @LastEditTime: 2024-05-29 14:24:48
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -9,16 +9,16 @@
|
||||
<template>
|
||||
<div class="efficiency-copilot">
|
||||
<Container title="芯片良率" icon="chip2">
|
||||
<ChipRate :period="period" />
|
||||
<ChipRate :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="标准组件良率" icon="std">
|
||||
<StdRate :period="period" />
|
||||
<StdRate :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="芯片OEE" icon="chip">
|
||||
<ChipOee :period="period" />
|
||||
<ChipOee :chipOeeRate="chipOeeRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
<Container title="转化效率" icon="cube">
|
||||
<TransformRate :period="period" />
|
||||
<TransformRate :transformRate="transformRate" :period="period" :than="than" />
|
||||
</Container>
|
||||
</div>
|
||||
</template>
|
||||
@@ -44,25 +44,45 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
chipOeeRate: {},
|
||||
transformRate:{}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
period: {
|
||||
handler(val) {
|
||||
val && this.fetchData(val);
|
||||
val && this.fetchData(val,this.than);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
than: {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
val && this.fetchData(this.period, val);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchData(period = "日") {
|
||||
fetchData(period = "日",than) {
|
||||
console.log(`效率驾驶舱，获取${period}数据`);
|
||||
this.$store.dispatch("copilot/initCopilot", {
|
||||
period,
|
||||
source: "efficiency",
|
||||
});
|
||||
than
|
||||
}).then(() => {
|
||||
this.$nextTick(() => {
|
||||
this.chipOeeRate = this.$store.getters.copilot.efficiency.chipOeeRate
|
||||
this.transformRate = this.$store.getters.copilot.efficiency.transformRate
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ export default ({
|
||||
targetSum,
|
||||
}) => ({
|
||||
grid: {
|
||||
left: 0,
|
||||
left: '50%',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-20 16:04:18
|
||||
* @LastEditTime: 2024-05-21 09:09:10
|
||||
* @LastEditTime: 2024-05-29 16:08:31
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<!-- <div class="copilot-layout" ref="copilot-layout"> -->
|
||||
<div class="copilot-layout other" ref="copilot-layout">
|
||||
<CopilotHeaderVue :active="page" :period="period" @update:active="updateActive" @update:period="period = $event" />
|
||||
<CopilotHeaderVue :than="than" :active="page" :period="period" @update:active="updateActive"
|
||||
@update:period="period = $event" @update:than="updateThan" />
|
||||
|
||||
<!-- <YieldCopilot v-if="page == '产量'" :period="period" /> -->
|
||||
<!-- <EnergyCopilot v-if="page == '综合'" :period="period" /> -->
|
||||
<EfficiencyCopilot :period="period" />
|
||||
<EfficiencyCopilot :period="period" :than="than" />
|
||||
<div class="copilot-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -27,18 +28,22 @@ export default {
|
||||
name: "CopilotContainer",
|
||||
components: {
|
||||
CopilotHeaderVue,
|
||||
// YieldCopilot,
|
||||
// EnergyCopilot,
|
||||
EfficiencyCopilot,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
than:'同比',
|
||||
page: "效率",
|
||||
period: "日",
|
||||
currentsStyles: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateActive(val, oldVal) {
|
||||
console.log(val)
|
||||
if (val === '效率') {
|
||||
@@ -109,7 +114,7 @@ export default {
|
||||
height: calc(100% + 38px);
|
||||
}
|
||||
.other {
|
||||
height: calc(100% + 240px);
|
||||
height: calc(100% + 490px);
|
||||
}
|
||||
.copilot-footer {
|
||||
/** position: absolute;
|
||||
|
||||
143
src/views/copilot/factoryData/bbIndex.vue
Normal file
143
src/views/copilot/factoryData/bbIndex.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:48
|
||||
* @LastEditTime: 2024-05-24 15:03:11
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 6,
|
||||
than: '同比',
|
||||
companyName: "蚌埠中建材光电材料有限公司",
|
||||
period: 1,
|
||||
show:true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/views/copilot/factoryData/cdIndex.vue
Normal file
143
src/views/copilot/factoryData/cdIndex.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:36
|
||||
* @LastEditTime: 2024-05-24 15:03:16
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 4,
|
||||
companyName: "成都中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
399
src/views/copilot/factoryData/components/BarChartBase.vue
Normal file
399
src/views/copilot/factoryData/components/BarChartBase.vue
Normal file
@@ -0,0 +1,399 @@
|
||||
<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 id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Energy",
|
||||
props: {
|
||||
// legend: {
|
||||
// type: Array,
|
||||
// required: true,
|
||||
// },
|
||||
energyCockpits: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
actualOptions: null,
|
||||
chart: "",
|
||||
options: {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "7%",
|
||||
right: "7%",
|
||||
bottom: "8%",
|
||||
top: "15%",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位/片",
|
||||
nameTextStyle: {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
align: "right",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#4561AE",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
// {
|
||||
// name: "",
|
||||
// data: [],
|
||||
// type: "line",
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "#FFD160" + "80" },
|
||||
// { offset: 0.5, color: "#FFD160" + "20" },
|
||||
// { offset: 1, color: "#FFD160" + "00" },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 2,
|
||||
// },
|
||||
// symbol: "circle",
|
||||
// symbolSize: 8,
|
||||
// emphasis: {
|
||||
// focus: "series",
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: "",
|
||||
// data: [],
|
||||
// type: "line",
|
||||
// yAxisIndex: 1,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "#2760FF" + "80" },
|
||||
// { offset: 0.5, color: "#2760FF" + "20" },
|
||||
// { offset: 1, color: "#2760FF" + "00" },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 2,
|
||||
// },
|
||||
// symbol: "circle",
|
||||
// symbolSize: 8,
|
||||
// emphasis: {
|
||||
// focus: "series",
|
||||
// },
|
||||
// },
|
||||
{
|
||||
name: "",
|
||||
data: [],
|
||||
type: "bar",
|
||||
// yAxisIndex: 1,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// { offset: 0, color: "#12FFF5" + "80" },
|
||||
// { offset: 0.5, color: "#12FFF5" + "20" },
|
||||
// { offset: 1, color: "#12FFF5" + "00" },
|
||||
// ]),
|
||||
// },
|
||||
barWidth: '18',
|
||||
itemStyle: {
|
||||
// barWidth: 2,
|
||||
color: '#12FFF5'
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
emphasis: {
|
||||
focus: "series",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
// isFullscreen(val) {
|
||||
// this.actualOptions.series.map((item) => {
|
||||
// item.barWidth = val ? 18 : 12;
|
||||
// });
|
||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||
// this.initOptions(this.actualOptions);
|
||||
// },
|
||||
// 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;
|
||||
// actualOptions.series[2].data = val[2].data;
|
||||
// actualOptions.series[2].name = val[2].name;
|
||||
// this.actualOptions = actualOptions;
|
||||
// this.initOptions(actualOptions);
|
||||
// },
|
||||
energyCockpits() {
|
||||
this.initChart();
|
||||
},
|
||||
isOpen(val) {
|
||||
this.canvasReset();
|
||||
},
|
||||
},
|
||||
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() {
|
||||
let orderXAxis = ['目标产量', '计划投入量', '实际投入量', '实际产出量', '废品数量', '待再加工数量'];
|
||||
// let n = 0;
|
||||
let seriesArr =[]
|
||||
seriesArr[0] = this.energyCockpits[0].targetProduction ? this.energyCockpits[0].targetProduction :0
|
||||
seriesArr[1] = this.energyCockpits[0].plannedInvestment ? this.energyCockpits[0].plannedInvestment : 0
|
||||
seriesArr[2] = this.energyCockpits[0].actualInvestment ? this.energyCockpits[0].actualInvestment : 0
|
||||
seriesArr[3] = this.energyCockpits[0].actualProduction ? this.energyCockpits[0].actualProduction : 0
|
||||
seriesArr[4] = this.energyCockpits[0].wasteNum ? this.energyCockpits[0].wasteNum : 0
|
||||
seriesArr[5] = this.energyCockpits[0].reworkNum ? this.energyCockpits[0].reworkNum : 0
|
||||
console.log(seriesArr);
|
||||
|
||||
// let seriesArr = [
|
||||
// {
|
||||
// name: "水",
|
||||
// energyType: 1,
|
||||
// data: [],
|
||||
// },
|
||||
// {
|
||||
// name: "电",
|
||||
// energyType: 2,
|
||||
// data: [],
|
||||
// },
|
||||
// {
|
||||
// name: "气",
|
||||
// energyType: 3,
|
||||
// data: [],
|
||||
// },
|
||||
// ];
|
||||
// if (this.energyCockpits.length > 0) {
|
||||
// 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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
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;
|
||||
this.actualOptions = actualOptions;
|
||||
this.chart.setOption(actualOptions);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.left-chart-base {
|
||||
// position: relative;
|
||||
height: 100%;
|
||||
|
||||
.legend {
|
||||
position: absolute;
|
||||
top: 5.2vh;
|
||||
right: 4vw;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
position: relative;
|
||||
// font-size: 12px;
|
||||
margin-right: 1.34vw;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
width: 0.531vw;
|
||||
height: 0.531vw;
|
||||
background-color: #ccc;
|
||||
border-radius: 2px;
|
||||
margin-right: 0.22vw;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 0.638vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #ffd160;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.851vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(1):after {
|
||||
background-color: #ffd160;
|
||||
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%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 0.638vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #2760ff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.851vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(2):after {
|
||||
background-color: #2760ff;
|
||||
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%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):before {
|
||||
// width: 12px;
|
||||
// height: 2px;
|
||||
width: 0.638vw;
|
||||
height: 0.1064vw;
|
||||
background-color: #12fff5;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
// left: -16px;
|
||||
left: -0.851vw;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.legend-item:nth-child(3):after {
|
||||
background-color: #12fff5;
|
||||
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>
|
||||
282
src/views/copilot/factoryData/components/ChipOee.vue
Normal file
282
src/views/copilot/factoryData/components/ChipOee.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-29 14:48:06
|
||||
* @LastEditTime: 2024-05-29 14:58:51
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<BarChartBase
|
||||
:legend="legend"
|
||||
:series="series"
|
||||
:xAxis="xAxis"
|
||||
in="chipOEE"
|
||||
class="chip-oee"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "@/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue";
|
||||
export default {
|
||||
name: "ChipOEE",
|
||||
components: { BarChartBase },
|
||||
props: {
|
||||
period: {
|
||||
type: Number,
|
||||
default:1,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default:{}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 城市数组的顺序必须是固定的
|
||||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||||
return {
|
||||
xAxis: cities,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === 1 && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period ===1 && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === 2 && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === 2 && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === 3 && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === 3 && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
{ label: `${month}月目标`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
// chipOeeRate() {
|
||||
// return this.$store.getters.copilot.efficiency.chipOeeRate
|
||||
// },
|
||||
series() {
|
||||
// console.log('aaaaaaaa', this.$store.getters.copilot.efficiency.chipOee);
|
||||
const chipOeeRate = this.chipOeeRate
|
||||
// console.log('chipOee', chipOeeRate)
|
||||
let dataList = null
|
||||
switch (this.period) {
|
||||
case 1:
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
case 2:
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = chipOeeRate?.previous;
|
||||
dataList[1] = chipOeeRate?.current
|
||||
dataList[2] = chipOeeRate?.target
|
||||
}
|
||||
console.log(dataList)
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList, than) {
|
||||
// console.log('dataList',dataList);
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === 1 && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period ===1 && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === 2 && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === 2&& than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === 3 && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === 3 && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${month}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
{
|
||||
name: `${year}目标`,
|
||||
data: dataList ? dataList[2] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
}
|
||||
return items
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -18,19 +18,11 @@ import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Energy",
|
||||
props: {
|
||||
vHeight: {
|
||||
type: Number,
|
||||
default: 34,
|
||||
},
|
||||
legend: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
series: {
|
||||
energyCockpits: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
@@ -43,11 +35,10 @@ export default {
|
||||
options: {
|
||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "0",
|
||||
left: "7%",
|
||||
right: "7%",
|
||||
bottom: "8%",
|
||||
top: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
@@ -65,7 +56,7 @@ export default {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
data: [],
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
@@ -190,6 +181,11 @@ export default {
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isOpen() {
|
||||
return this.$store.getters.sidebar.opened;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
|
||||
// isFullscreen(val) {
|
||||
@@ -216,6 +212,12 @@ export default {
|
||||
// this.actualOptions = actualOptions;
|
||||
// this.initOptions(actualOptions);
|
||||
// },
|
||||
energyCockpits() {
|
||||
this.initChart();
|
||||
},
|
||||
isOpen(val) {
|
||||
this.canvasReset();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// if (screenfull.isEnabled) {
|
||||
@@ -241,17 +243,60 @@ 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) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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);
|
||||
},
|
||||
|
||||
@@ -1,77 +1,189 @@
|
||||
<template>
|
||||
<dv-scroll-board
|
||||
v-if="aa"
|
||||
:config="config"
|
||||
style="width: 100%; height: 100%"
|
||||
/>
|
||||
<div class="order-container">
|
||||
<div class="table">
|
||||
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%" ref="orderScrollBoard" />
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
<span class="title">生产情况</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<barChartBase :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { debounce } from "@/utils/debounce";
|
||||
import barChartBase from './BarChartBase'
|
||||
export default {
|
||||
name: "Order",
|
||||
components: {
|
||||
barChartBase,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aa: true,
|
||||
showTable: true,
|
||||
config: {
|
||||
header: ["序号", "客户名称", "产品名称", "计划加工数量", "加工进度"],
|
||||
header: ["工单号", "工单状态", "计划投入", "实际投入", "目标产量", "实际产量", "生产进度"],
|
||||
headerBGC: "rgba(0, 106, 205, 0.22)",
|
||||
oddRowBGC: "rgba(0, 106, 205, 0.22)",
|
||||
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
|
||||
data: [],
|
||||
rowNum: 12,
|
||||
waitTime: 3000,
|
||||
columnWidth: [50],
|
||||
columnWidth: [100],
|
||||
align: ["center"],
|
||||
carousel: "page",
|
||||
},
|
||||
};
|
||||
},
|
||||
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].workOrderNumber || ""}>${
|
||||
this.prodOrder[i].workOrderNumber || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].inStatus || ""}>${
|
||||
this.prodOrder[i].inStatus || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${
|
||||
this.prodOrder[i].plannedInvestment || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
|
||||
}</span>`
|
||||
);
|
||||
arr.push(
|
||||
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
|
||||
}</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);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.table{
|
||||
flex: 1;
|
||||
}
|
||||
.chart {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// gap: 6px;
|
||||
.chart-title {
|
||||
margin-top: 5px;
|
||||
// flex: 1;
|
||||
// gap: 6px;
|
||||
height: 1.5vw;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
// flex-direction: column;
|
||||
// flex-wrap: nowrap;
|
||||
// justify-content: end
|
||||
// margin-top: 10px;
|
||||
.title {
|
||||
// flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
// width: 5vw;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.line {
|
||||
flex: 1;
|
||||
// width: 80%;
|
||||
height: 1px; // display: inline-block;
|
||||
border: 1px solid;
|
||||
// display: inline-block;
|
||||
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%, ) 2 2;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,272 +1,395 @@
|
||||
<template>
|
||||
<div class="prod-monitor">
|
||||
<div class="fto-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/fto.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.2875vw"
|
||||
/>
|
||||
|
||||
<div class="data">
|
||||
<div class="fto-box">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/fto.png" alt="" style="width: 2.1875vw; height: 2.2875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<span class="type">玻璃类型</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">FTO投入</span>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<span class="type">投入数量</span>
|
||||
<span class="num">8391222</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="std-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/std.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.1875vw"
|
||||
/>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">标准组检产量</span>
|
||||
<div class="std-box">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/std.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">标准组检产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">740</span>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">783</span>
|
||||
<div class="chip-box">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/chip.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">芯片产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">96%</span>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bipv-box" v-if="showBipv">
|
||||
<div class="icon">
|
||||
<img src="./../assets/images/bipv.png" alt="" style="width: 2.1875vw; height: 2.1875vw" />
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">BIPV产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/chip.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.1875vw"
|
||||
/>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">芯片产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">740</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">783</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">96%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bipv-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/bipv.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.1875vw"
|
||||
/>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">BIPV产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">740</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">783</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num">96%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart">
|
||||
<div class="chart-title">
|
||||
<span class="title">生产情况</span>
|
||||
<span class="line"></span>
|
||||
</div>
|
||||
<barChartBase :than="than" :period="period" :data="data" ref="barChart" style="height: 0;flex:1"></barChartBase>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import barChartBase from './ChipOee'
|
||||
|
||||
export default {
|
||||
name: "ProdMonitor",
|
||||
components: {
|
||||
barChartBase,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bipvVis:false,
|
||||
msgObj: {
|
||||
stand: {},
|
||||
chip: {},
|
||||
bipv: {},
|
||||
},
|
||||
};
|
||||
},
|
||||
props: {
|
||||
period: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: '同比',
|
||||
},
|
||||
prodOutPut: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
prodFto: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
showBipv: {
|
||||
type: Boolean,
|
||||
default:true,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
prodOutPut() {
|
||||
this.makeData();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.makeData();
|
||||
},
|
||||
methods: {
|
||||
makeData() {
|
||||
console.log('msgObj', this.msgObj);
|
||||
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>
|
||||
.prod-monitor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-direction: column;
|
||||
.fto-box,
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
box-shadow: inset 0 0 12px 2px #fff3;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.middle-box {
|
||||
flex: 2.086;
|
||||
position: relative;
|
||||
}
|
||||
.right-box {
|
||||
flex: 2.424;
|
||||
position: relative;
|
||||
}
|
||||
.type {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.417vw;
|
||||
letter-spacing: 2px;
|
||||
width: 6.25vw;
|
||||
}
|
||||
.type1 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.6vw;
|
||||
width: 6.25vw;
|
||||
padding-left: 1.6vw;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.type-name {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
.type-name::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
.num {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
.num::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
.fto-box {
|
||||
.chart{
|
||||
flex: 1;
|
||||
.type::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.6146vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
// gap: 6px;
|
||||
.chart-title{
|
||||
margin-top: 5px;
|
||||
// flex: 1;
|
||||
// gap: 6px;
|
||||
height: 1.5vw;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// flex-direction: column;
|
||||
// flex-wrap: nowrap;
|
||||
// justify-content: end
|
||||
// margin-top: 10px;
|
||||
.title{
|
||||
// flex: 1;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
// width: 5vw;
|
||||
color: #FFFFFF;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
.line{
|
||||
flex: 1;
|
||||
// width: 80%;
|
||||
height: 1px; // display: inline-block;
|
||||
border: 1px solid;
|
||||
// display: inline-block;
|
||||
border-image: linear-gradient(90deg, rgba(25, 146, 255, 0) 10%, rgba(95, 190, 249, 1), rgba(0, 120, 228, 0) 90%,) 2 2;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.std-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.chip-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.bipv-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
.separate::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 3.125vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
.data{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-direction: column;
|
||||
.fto-box,
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
box-shadow: inset 0 0 12px 2px #fff3;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.middle-box {
|
||||
flex: 2.086;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
flex: 2.424;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.type {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.417vw;
|
||||
letter-spacing: 2px;
|
||||
width: 6.25vw;
|
||||
}
|
||||
|
||||
.type1 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.6vw;
|
||||
width: 6.25vw;
|
||||
padding-left: 1.6vw;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.type-name {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
|
||||
.type-name::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
|
||||
.num::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.fto-box {
|
||||
flex: 1;
|
||||
|
||||
.type::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.6146vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.std-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
.chip-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
.bipv-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
.separate::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 3.125vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)) 2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
342
src/views/copilot/factoryData/components/ProdMonitorOld.vue
Normal file
342
src/views/copilot/factoryData/components/ProdMonitorOld.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 14:25:19
|
||||
* @LastEditTime: 2024-05-21 14:25:19
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="prod-monitor">
|
||||
<div class="fto-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/fto.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.2875vw"
|
||||
/>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<span class="type">玻璃类型</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="std-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/std.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.1875vw"
|
||||
/>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">标准组检产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num"
|
||||
>{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chip-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/chip.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.1875vw"
|
||||
/>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">芯片产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num"
|
||||
>{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bipv-box">
|
||||
<div class="icon">
|
||||
<img
|
||||
src="./../assets/images/bipv.png"
|
||||
alt=""
|
||||
style="width: 2.1875vw; height: 2.1875vw"
|
||||
/>
|
||||
</div>
|
||||
<div class="middle-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">玻璃类型</span>
|
||||
<span class="type-name">BIPV产量</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type">良品数量</span>
|
||||
<span class="type-name">{{
|
||||
msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="separate">
|
||||
<div>
|
||||
<span class="type">生产数量</span>
|
||||
<span class="num">{{
|
||||
msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
|
||||
}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="type1">良品率</span>
|
||||
<span class="num"
|
||||
>{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
.prod-monitor {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-direction: column;
|
||||
.fto-box,
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
box-shadow: inset 0 0 12px 2px #fff3;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.middle-box {
|
||||
flex: 2.086;
|
||||
position: relative;
|
||||
}
|
||||
.right-box {
|
||||
flex: 2.424;
|
||||
position: relative;
|
||||
}
|
||||
.type {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.417vw;
|
||||
letter-spacing: 2px;
|
||||
width: 6.25vw;
|
||||
}
|
||||
.type1 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375vw;
|
||||
color: #6db6ff;
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-right: 0.6vw;
|
||||
width: 6.25vw;
|
||||
padding-left: 1.6vw;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.type-name {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
.type-name::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
.num {
|
||||
font-size: 1.042vw;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-left: 0.573vw;
|
||||
}
|
||||
.num::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.042vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
.fto-box {
|
||||
flex: 1;
|
||||
.type::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 1.6146vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
.std-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.chip-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.bipv-box {
|
||||
flex: 1.3;
|
||||
}
|
||||
.std-box,
|
||||
.chip-box,
|
||||
.bipv-box {
|
||||
.separate::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 3.125vw;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 176, 243, 0),
|
||||
rgba(31, 143, 255, 1),
|
||||
rgba(31, 143, 255, 0)
|
||||
)
|
||||
2 2;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -7,17 +7,14 @@ import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "Store",
|
||||
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() {
|
||||
@@ -27,11 +24,10 @@ export default {
|
||||
chart: "",
|
||||
options: {
|
||||
grid: {
|
||||
left: "3%",
|
||||
left: "8%",
|
||||
right: "1%",
|
||||
bottom: "0",
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
bottom: "8%",
|
||||
top: "15%",
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
@@ -47,7 +43,7 @@ export default {
|
||||
color: "rgba(255, 255, 255, 0.7)",
|
||||
fontSize: 12,
|
||||
},
|
||||
data: this.xAxis,
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位/片",
|
||||
@@ -116,18 +112,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 +143,20 @@ export default {
|
||||
}, 500)();
|
||||
},
|
||||
initChart() {
|
||||
let xAxis = Object.keys(this.stock) || [];
|
||||
let data = [];
|
||||
if (xAxis.length > 0) {
|
||||
data = xAxis.map((item) => {
|
||||
return this.stock[item].total;
|
||||
});
|
||||
}
|
||||
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);
|
||||
},
|
||||
|
||||
143
src/views/copilot/factoryData/hdIndex.vue
Normal file
143
src/views/copilot/factoryData/hdIndex.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 09:25:42
|
||||
* @LastEditTime: 2024-05-24 15:03:21
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 1,
|
||||
companyName: "邯郸中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,33 +1,25 @@
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader
|
||||
:companyName="companyName"
|
||||
:companyId="companyId"
|
||||
:period="period"
|
||||
@updateCompany="updateCompany"
|
||||
@update:period="period = $event"
|
||||
/>
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor />
|
||||
<prod-monitor :than="than" :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto"
|
||||
:showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="仓库监控.当前" icon="store">
|
||||
<store :series="series" :xAxis="xAxis" />
|
||||
</db-container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<db-container title="能源监控" icon="energy">
|
||||
<energy
|
||||
:legend="energyLegend"
|
||||
:series="energySeries"
|
||||
:xAxis="energyxAxis"
|
||||
/>
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order />
|
||||
<db-container title="工单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
<!-- <section class="bottom flex"> -->
|
||||
<!-- <db-container title="" icon="energy"> -->
|
||||
<!-- <energy :legend="energyLegend" :energyCockpits="energyCockpits" /> -->
|
||||
<!-- </db-container> -->
|
||||
<!-- </section> -->
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
@@ -36,106 +28,72 @@
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
// import Store from "./components/Store.vue";
|
||||
// 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,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
// Store,
|
||||
// Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
const year = new Date().getFullYear();
|
||||
const cities = ["瑞昌", "邯郸", "株洲", "佳木斯", "成都", "凯盛", "蚌埠"];
|
||||
return {
|
||||
companyId: "1",
|
||||
companyId: 0,
|
||||
companyName: "瑞昌中建材光电材料有限公司",
|
||||
period: "日",
|
||||
|
||||
period: 1,
|
||||
show:false,
|
||||
than: '同比',
|
||||
data:{},
|
||||
// 接口获取的数据
|
||||
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() {
|
||||
// cockpitDataMonitor({
|
||||
// factorys: ["1"],
|
||||
// date: 4,
|
||||
// }).then((res) => {
|
||||
// console.log(res);
|
||||
// });
|
||||
cockpitDataMonitor().then((res) => {});
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
factorys: [this.companyId],
|
||||
date: this.period,
|
||||
mode:this.than === '同比' ? 0 : 1
|
||||
}).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.prodWorkOrderDO || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
143
src/views/copilot/factoryData/jmsIndex.vue
Normal file
143
src/views/copilot/factoryData/jmsIndex.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:30
|
||||
* @LastEditTime: 2024-05-24 15:03:26
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 3,
|
||||
companyName: "佳木斯中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/views/copilot/factoryData/ksIndex.vue
Normal file
143
src/views/copilot/factoryData/ksIndex.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 10:13:45
|
||||
* @LastEditTime: 2024-05-24 15:03:31
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 5,
|
||||
companyName: "凯盛中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
146
src/views/copilot/factoryData/oldIndex.vue
Normal file
146
src/views/copilot/factoryData/oldIndex.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 13:24:03
|
||||
* @LastEditTime: 2024-05-21 13:24:03
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader
|
||||
:companyName="companyName"
|
||||
:companyId="companyId"
|
||||
:period="period"
|
||||
@updateCompany="updateCompany"
|
||||
@update:period="updatePeriod"
|
||||
/>
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" />
|
||||
</db-container>
|
||||
<db-container title="仓库监控.当前" icon="store">
|
||||
<store :stock="stock" />
|
||||
</db-container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<db-container title="能源监控" icon="energy">
|
||||
<energy :legend="energyLegend" :energyCockpits="energyCockpits" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 0,
|
||||
companyName: "邯郸中建材光电材料有限公司",
|
||||
period: 1,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/views/copilot/factoryData/zzIndex.vue
Normal file
143
src/views/copilot/factoryData/zzIndex.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-21 09:47:21
|
||||
* @LastEditTime: 2024-05-24 15:03:37
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div class="factory-layout">
|
||||
<FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period"
|
||||
@update:than="updateThan" @update:period="updatePeriod" />
|
||||
<div class="factory-section">
|
||||
<section class="top flex">
|
||||
<db-container title="生产监控" icon="prod">
|
||||
<prod-monitor :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" />
|
||||
</db-container>
|
||||
<db-container title="订单监控" icon="order">
|
||||
<order :prodOrder="prodOrder" />
|
||||
</db-container>
|
||||
<!-- <db-container title="" icon="store"> -->
|
||||
<!-- <store :stock="stock" /> -->
|
||||
<!-- </db-container> -->
|
||||
</section>
|
||||
</div>
|
||||
<div class="factory-footer">© 中建材智能自动化研究院有限公司</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import FactoryDataHeader from "./../components/FactoryDataHeader.vue";
|
||||
import Container from "./components/Container.vue";
|
||||
import ProdMonitor from "./components/ProdMonitor.vue";
|
||||
import Store from "./components/Store.vue";
|
||||
import Energy from "./components/Energy.vue";
|
||||
import Order from "./components/Order.vue";
|
||||
import { cockpitDataMonitor } from "@/api/produceData";
|
||||
export default {
|
||||
name: "factoryData",
|
||||
components: {
|
||||
FactoryDataHeader,
|
||||
DbContainer: Container,
|
||||
ProdMonitor,
|
||||
Store,
|
||||
Energy,
|
||||
Order,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
companyId: 2,
|
||||
companyName: "株洲中建材光电材料有限公司",
|
||||
period: 1,
|
||||
than: '同比',
|
||||
show: true,
|
||||
// 接口获取的数据
|
||||
prodOutPut: [], //生产
|
||||
prodFto: [], //生产
|
||||
stock: {}, //仓库
|
||||
energyCockpits: [], //能源
|
||||
prodOrder: [], //订单
|
||||
energyLegend: [
|
||||
{ label: "电", color: "#FFD160" },
|
||||
{ label: "水", color: "#2760FF" },
|
||||
{ label: "气", color: "#12FFF5" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMes();
|
||||
},
|
||||
methods: {
|
||||
updateThan(val) {
|
||||
console.log(val);
|
||||
this.than = val;
|
||||
// this.getMes();
|
||||
},
|
||||
updateCompany(obj) {
|
||||
this.companyId = obj.companyId;
|
||||
this.companyName = obj.companyName;
|
||||
this.getMes();
|
||||
},
|
||||
updatePeriod(val) {
|
||||
this.period = val;
|
||||
this.getMes();
|
||||
},
|
||||
getMes() {
|
||||
cockpitDataMonitor({
|
||||
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 || [];
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.factory-layout {
|
||||
padding: 16px;
|
||||
background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100%
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
height: calc(100% + 38px);
|
||||
left: -16px;
|
||||
top: -8px;
|
||||
width: calc(100% + 30px);
|
||||
z-index: 1001;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
.factory-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
.top > div,
|
||||
.bottom > div {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.factory-footer {
|
||||
/** position: absolute;
|
||||
bottom: 10px; **/
|
||||
height: 10px;
|
||||
width: 100%;
|
||||
color: rgb(80, 80, 80);
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,28 +1,37 @@
|
||||
<!--
|
||||
filename: BipvOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-29 13:17:38
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue data-source="BIPV产出" :period="period" />
|
||||
<noDoubleRingWrapper data-source="BIPV产出" :period="period" :than="than" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
|
||||
// import DoubleRingWrapperVue from "./sub/ring/DoubleRingWrapper.vue";
|
||||
import noDoubleRingWrapper from "./sub/ring/noDoubleRingWrapper.vue";
|
||||
|
||||
|
||||
export default {
|
||||
name: "BipvOutput",
|
||||
components: { DoubleRingWrapperVue },
|
||||
components: { noDoubleRingWrapper },
|
||||
props: {
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -33,74 +33,215 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
series() {
|
||||
const { chipInvest } = this.$store.getters.copilot.yield;
|
||||
let dataList = null;
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
dataList = [];
|
||||
dataList[0] = chipInvest?.previous;
|
||||
dataList[1] = chipInvest?.current;
|
||||
case "周":
|
||||
dataList = chipInvest?.current;
|
||||
dataList = []
|
||||
dataList[0] = chipInvest?.previous;
|
||||
dataList[1] = chipInvest?.current;
|
||||
break;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = chipInvest?.previous;
|
||||
dataList[1] = chipInvest?.current;
|
||||
}
|
||||
return getTemplate(this.period, dataList);
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList,than) {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
}
|
||||
return items
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<!--
|
||||
filename: ChipOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-27 16:36:29
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue data-source="芯片产出" :period="period" />
|
||||
<DoubleRingWrapperVue data-source="芯片产出" :period="period" :than="than" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -20,6 +21,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BarChartBase from "@/views/copilot/components/BarChartBase.vue";
|
||||
import BarChartBase from "@/views/copilot/components/ftoBarChartBase.vue";
|
||||
|
||||
export default {
|
||||
name: "FtoInvest",
|
||||
@@ -33,77 +33,217 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
legend() {
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
return [{ label: "昨日", color: "#12f7f1" }];
|
||||
case "周":
|
||||
return [{ label: "本周", color: "#12f7f1" }];
|
||||
case "月": {
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
return [
|
||||
{ label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${year}年${month}月`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
case "年": {
|
||||
const year = new Date().getFullYear();
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
}
|
||||
default:
|
||||
return [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
];
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月${today}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${yesterday}日`, color: "#12f7f1" },
|
||||
{ label: `${month}月${today}日`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年本周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `上周`, color: "#12f7f1" },
|
||||
{ label: `本周`, color: "#58adfa" },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `去年${month}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${lastMonth}月`, color: "#12f7f1" },
|
||||
{ label: `${month}月`, color: "#58adfa" },
|
||||
// { label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year - 1}年`, color: "#12f7f1" },
|
||||
{ label: `${year}年`, color: "#58adfa" },
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
return items
|
||||
// switch (this.period) {
|
||||
// case "日":
|
||||
// return [{ label: "昨日", color: "#12f7f1" }];
|
||||
// case "周":
|
||||
// return [{ label: "本周", color: "#12f7f1" }];
|
||||
// case "月": {
|
||||
// const year = new Date().getFullYear();
|
||||
// const month = new Date().getMonth() + 1;
|
||||
// return [
|
||||
// { label: `${year - 1}年${month}月`, color: "#12f7f1" },
|
||||
// { label: `${year}年${month}月`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// case "年": {
|
||||
// const year = new Date().getFullYear();
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
// default:
|
||||
// return [
|
||||
// { label: `${year - 1}年`, color: "#12f7f1" },
|
||||
// { label: `${year}年`, color: "#58adfa" },
|
||||
// ];
|
||||
// }
|
||||
},
|
||||
series() {
|
||||
const { ftoInvest } = this.$store.getters.copilot.yield;
|
||||
console.log('ftoInvest', this.$store.getters.copilot.yield);
|
||||
// console.log('ftoInvest', this.$store.getters.copilot.yield);
|
||||
let dataList = null;
|
||||
|
||||
// console.log(ftoInvest)
|
||||
switch (this.period) {
|
||||
case "日":
|
||||
dataList = [];
|
||||
dataList[0] = ftoInvest?.previous;
|
||||
dataList[1] = ftoInvest?.current;
|
||||
case "周":
|
||||
dataList = ftoInvest?.current;
|
||||
dataList = [];
|
||||
dataList[0] = ftoInvest?.previous;
|
||||
dataList[1] = ftoInvest?.current;
|
||||
break;
|
||||
default:
|
||||
dataList = [];
|
||||
dataList[0] = ftoInvest?.previous;
|
||||
dataList[1] = ftoInvest?.current;
|
||||
}
|
||||
|
||||
return getTemplate(this.period, dataList);
|
||||
return getTemplate(this.period, dataList,this.than);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function getTemplate(period, dataList) {
|
||||
const year = new Date().getFullYear();
|
||||
function getTemplate(period, dataList,than) {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
return period == "日" || period == "周"
|
||||
? [
|
||||
{
|
||||
name: period == "日" ? "昨日" : "本周",
|
||||
data: dataList ?? [],
|
||||
},
|
||||
]
|
||||
: [
|
||||
{
|
||||
name: period == "年" ? `${year - 1}年` : `${year - 1}年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: period == "年" ? `${year}年` : `${year}年${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
const year = new Date().getFullYear();
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月${today}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${yesterday}日`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月${today}日`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年本周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `上周`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `本周`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{
|
||||
name: `去年${month}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{
|
||||
name: `${lastMonth}月`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${month}月`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{
|
||||
name: `${year - 1}年`,
|
||||
data: dataList ? dataList[0] : [],
|
||||
},
|
||||
{
|
||||
name: `${year}年`,
|
||||
data: dataList ? dataList[1] : [],
|
||||
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
|
||||
},
|
||||
];
|
||||
}
|
||||
return items
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<!--
|
||||
filename: StdOutput.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 09:55:12
|
||||
description:
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-07 10:04:53
|
||||
* @LastEditTime: 2024-05-27 14:25:57
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<DoubleRingWrapperVue data-source="标准组件产出" :period="period" />
|
||||
<DoubleRingWrapperVue data-source="标准组件产出" :period="period" :than="than" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -20,6 +21,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<!--
|
||||
filename: DoubleRingChart.vue
|
||||
author: liubin
|
||||
date: 2024-04-17 11:01:55
|
||||
description:
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-20 13:32:59
|
||||
* @LastEditTime: 2024-05-29 09:31:49
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
@@ -45,6 +46,10 @@ export default {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -89,27 +94,83 @@ export default {
|
||||
},
|
||||
|
||||
options() {
|
||||
const today = new Date().getDate();
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const vt = this.valueTuple;
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
// const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
// const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 - 1;
|
||||
// const year = new Date().getFullYear();
|
||||
if (this.period === '日' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`,},
|
||||
{ label: `去年${month}月${today}日累计` },
|
||||
];
|
||||
} else if (this.period === '日' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`},
|
||||
{ label: `${yesterday}日累计`},
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `本周累计`,},
|
||||
{ label: `去年本周累计`},
|
||||
];
|
||||
} else if (this.period === '周' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `本周累计`,},
|
||||
{ label: `上周累计`,},
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`,},
|
||||
{ label: `去年${month}月累计`, },
|
||||
{ label: `${month}月目标`,},
|
||||
];
|
||||
} else if (this.period === '月' && this.than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`, },
|
||||
{ label: `${lastMonth}月累计`,},
|
||||
{ label: `${month}月目标`, },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year}年累计`, },
|
||||
{ label: `${year - 1}年累计` },
|
||||
{ label: `${year}年目标` },
|
||||
];
|
||||
}
|
||||
let titleValue =
|
||||
vt[0] != null && vt[2] != null && vt[2] !== 0
|
||||
? `${vt[1] / vt[2]}%`
|
||||
: "0%",
|
||||
subtitle =
|
||||
this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
|
||||
|
||||
this.period == "日" ? `${month}月${today}日累计` : this.period == "周" ? `本周` : this.period == "月" ? `${month}月累计产出` : `${year}年累计产出`;
|
||||
console.log(this.valueTuple[0], this.valueTuple[1], this.valueTuple[2],)
|
||||
console.log(items)
|
||||
return getOptions({
|
||||
titleValue,
|
||||
subtitle,
|
||||
currentName: items[0].label,
|
||||
preName: items[1].label,
|
||||
previousSum: this.valueTuple[0],
|
||||
currentSum: this.valueTuple[1],
|
||||
targetSum: this.valueTuple[2],
|
||||
targetSum: this.valueTuple[2] ? this.valueTuple[2] :0 ,
|
||||
});
|
||||
},
|
||||
|
||||
legendItems() {
|
||||
return calculateItems(this.period, this.valueTuple);
|
||||
return calculateItems(this.period, this.valueTuple,this.than);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
@@ -142,39 +203,68 @@ export default {
|
||||
},
|
||||
};
|
||||
|
||||
function calculateItems(period, valueTuple) {
|
||||
function calculateItems(period, valueTuple,than) {
|
||||
let items = [];
|
||||
var day1 = new Date();
|
||||
day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000);
|
||||
var yesterday = (day1.getMonth() + 1) + "月" + day1.getDate()
|
||||
//今天的时间
|
||||
// var day2 = new Date();
|
||||
// day2.setTime(day2.getTime());
|
||||
// var s2 = (day2.getMonth() + 1) + "月" + day2.getDate() + '日';
|
||||
const today = new Date().getDate();
|
||||
// let yesterday = new Date().getDate() -1;
|
||||
const month = new Date().getMonth() + 1;
|
||||
const lastMonth = new Date().getMonth() + 1 === 12 ? 1 : new Date().getMonth() + 1 -1;
|
||||
const year = new Date().getFullYear();
|
||||
switch (period) {
|
||||
case "日":
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] },
|
||||
];
|
||||
break;
|
||||
case "周":
|
||||
items = [
|
||||
{ label: `本周累计`, value: valueTuple[1] },
|
||||
{ label: `去年本周累计`, value: valueTuple[0] },
|
||||
];
|
||||
break;
|
||||
case "月":
|
||||
items = [
|
||||
{ label: `${month}月累计`, value: valueTuple[1] },
|
||||
{ label: `去年${month}月累计`, value: valueTuple[0] },
|
||||
{ label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
break;
|
||||
case "年":
|
||||
items = [
|
||||
{ label: `${year}年累计`, value: valueTuple[1] },
|
||||
{ label: `${year - 1}年累计`, value: valueTuple[0] },
|
||||
{ label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
break;
|
||||
if (period === '日' && than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||
{ label: `去年${month}月${today}日累计`, value: valueTuple[0] },
|
||||
];
|
||||
} else if (period === '日' && than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月${today}日累计`, value: valueTuple[1] },
|
||||
{ label: `${yesterday}日累计`, value: valueTuple[0] },
|
||||
];
|
||||
} else if (period === '周' && than === '同比') {
|
||||
items = [
|
||||
{ label: `本周累计`, value: valueTuple[1] },
|
||||
{ label: `去年本周累计`, value: valueTuple[0] },
|
||||
];
|
||||
} else if (period === '周' && than === '环比') {
|
||||
items = [
|
||||
{ label: `本周累计`, value: valueTuple[1] },
|
||||
{ label: `上周累计`, value: valueTuple[0] },
|
||||
];
|
||||
} else if (period === '月' && than === '同比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`, value: valueTuple[1] },
|
||||
{ label: `去年${month}月累计`, value: valueTuple[0] },
|
||||
{ label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else if (period === '月' && than === '环比') {
|
||||
items = [
|
||||
{ label: `${month}月累计`, value: valueTuple[1] },
|
||||
{ label: `${lastMonth}月累计`, value: valueTuple[0] },
|
||||
{ label: `${month}月目标`, value: valueTuple[2] },
|
||||
];
|
||||
} else {
|
||||
items = [
|
||||
{ label: `${year}年累计`, value: valueTuple[1] },
|
||||
{ label: `${year - 1}年累计`, value: valueTuple[0] },
|
||||
{ label: `${year}年目标`, value: valueTuple[2] },
|
||||
];
|
||||
}
|
||||
// switch (period) {
|
||||
// case "年":
|
||||
// items = [
|
||||
// { label: `${year}年累计`, value: valueTuple[1] },
|
||||
// { label: `${year - 1}年累计`, value: valueTuple[0] },
|
||||
// { label: `${year}年目标`, value: valueTuple[2] },
|
||||
// ];
|
||||
// break;
|
||||
// }
|
||||
return items;
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -7,22 +7,12 @@
|
||||
|
||||
<template>
|
||||
<div class="double-ring-wrapper">
|
||||
<template v-if="period == '月' || period == '年'">
|
||||
<copilot-select
|
||||
@update:active="handleActiveUpdate"
|
||||
:options="cityOptions"
|
||||
/>
|
||||
<template>
|
||||
<copilot-select @update:active="handleActiveUpdate" :options="cityOptions" />
|
||||
<div class="flex-1 stretch">
|
||||
<DoubleRingChartVue
|
||||
:data-source="dataSource"
|
||||
:period="period"
|
||||
:factoryId="factoryId"
|
||||
/>
|
||||
<DoubleRingChartVue :data-source="dataSource" :period="period" :than="than" :factoryId="factoryId" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<CityData :data-source="dataSource" :period="period" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -43,6 +33,10 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-24 15:15:00
|
||||
* @LastEditTime: 2024-05-28 08:42:36
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="double-ring-wrapper">
|
||||
<template >
|
||||
<copilot-select
|
||||
@update:active="handleActiveUpdate"
|
||||
:options="cityOptions"
|
||||
/>
|
||||
<div class="flex-1 stretch">
|
||||
<DoubleRingChartVue
|
||||
:data-source="dataSource"
|
||||
:than="than"
|
||||
:period="period"
|
||||
:factoryId="factoryId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<!-- <template v-else>
|
||||
<CityData :data-source="dataSource" :period="period" />
|
||||
</template> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CopilotSelect from "@/views/copilot/components/select.vue";
|
||||
import DoubleRingChartVue from "./DoubleRingChart.vue";
|
||||
import CityData from "../city/CityData.vue";
|
||||
|
||||
export default {
|
||||
name: "DoubleRingWrapper",
|
||||
components: { CopilotSelect, DoubleRingChartVue, CityData },
|
||||
props: {
|
||||
dataSource: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
period: {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
factoryId: 4, // 默认成都
|
||||
cityOptions: [
|
||||
"成都",
|
||||
"邯郸",
|
||||
"株洲",
|
||||
"佳木斯",
|
||||
"凯盛光伏",
|
||||
"蚌埠兴科",
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleActiveUpdate(index) {
|
||||
this.factoryId = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.double-ring-wrapper {
|
||||
height: 100%;
|
||||
padding: 12px 24px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
@@ -1,29 +1,30 @@
|
||||
<!--
|
||||
filename: index.vue
|
||||
author: liubin
|
||||
date: 2024-04-16 14:40:15
|
||||
description: 产量驾驶舱
|
||||
* @Author: zhp
|
||||
* @Date: 2024-05-10 11:10:54
|
||||
* @LastEditTime: 2024-05-28 13:36:07
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="yield-copilot">
|
||||
<section class="top flex">
|
||||
<db-container class="std-yield" title="标准组件产出" icon="std">
|
||||
<std-output :period="period" />
|
||||
<std-output v-if="show" :period="period" :than="than" />
|
||||
</db-container>
|
||||
<db-container class="chip-yield" title="芯片产出" icon="chip2">
|
||||
<chip-output :period="period" />
|
||||
<chip-output v-if="show" :period="period" :than="than" />
|
||||
</db-container>
|
||||
<db-container class="bipv-yield" title="BIPV产出" icon="bipv">
|
||||
<bipv-output :period="period" />
|
||||
<bipv-output v-if="show" :period="period" :than="than" />
|
||||
</db-container>
|
||||
</section>
|
||||
<section class="bottom flex">
|
||||
<db-container class="fto-involve" title="FTO投入">
|
||||
<fto-invest :period="period" />
|
||||
<fto-invest :period="period" :than="than" />
|
||||
</db-container>
|
||||
<db-container class="chip-involve" title="芯片投入" icon="chip">
|
||||
<chip-invest :period="period" />
|
||||
<chip-invest :period="period" :than="than" />
|
||||
</db-container>
|
||||
</section>
|
||||
</div>
|
||||
@@ -52,22 +53,40 @@ export default {
|
||||
type: String,
|
||||
default: "日",
|
||||
},
|
||||
than: {
|
||||
type: String,
|
||||
default: "同比",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {
|
||||
show:false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
period: {
|
||||
handler(val) {
|
||||
val && this.fetchData(val);
|
||||
val && this.fetchData(val,this.than);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
than: {
|
||||
handler(val) {
|
||||
console.log(val)
|
||||
val && this.fetchData(this.period,val);
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
fetchData(period = "日") {
|
||||
fetchData(period = "日", than) {
|
||||
// this.$store.commit('copilot/clearState')
|
||||
console.log(`产量驾驶舱，获取${period}数据`);
|
||||
this.$store.dispatch("copilot/initCopilot", { period, source: "yield" });
|
||||
this.$store.dispatch("copilot/initCopilot", { period, source: "yield", than }).then(() => {
|
||||
this.$nextTick(() => {
|
||||
this.show = true
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -4,6 +4,8 @@ export default ({
|
||||
previousSum,
|
||||
currentSum,
|
||||
targetSum,
|
||||
currentName,
|
||||
preName,
|
||||
}) => ({
|
||||
grid: {
|
||||
left: 0,
|
||||
@@ -57,7 +59,7 @@ export default ({
|
||||
data: [
|
||||
{
|
||||
value: currentSum,
|
||||
name: "当前累计产出",
|
||||
name: currentName,
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
@@ -108,7 +110,7 @@ export default ({
|
||||
data: [
|
||||
{
|
||||
value: previousSum,
|
||||
name: "上期累计产出",
|
||||
name: preName,
|
||||
selected: false,
|
||||
itemStyle: {
|
||||
borderJoin: "round",
|
||||
|
||||
Reference in New Issue
Block a user