yunxi
/
mes-majoys
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

美乐嘉大屏对接接口 模拟数据和真实数据的处理

Browse Source
dev
qiuhongwu 6 months ago
parent baf98b2d19
commit 24e29652ba
9 changed files with 737 additions and 794 deletions
Show Stats Download Patch File Download Diff File

2
mes-ui/mes-echarts/src/common/echart/index.vue
Unescape View File

@ -58,7 +58,7 @@ export default {
this.chart = this.$echarts.init(this.$el, 'tdTheme')
//debugger
// this.chart = this.$echarts.init(this.$el, 'dark')
console.log(this.options)
// console.log(this.options)
this.chart.setOption(this.options, true)
}
}

264
mes-ui/mes-echarts/src/components/echart/bottom/bottomLeftChart/index.vue
Unescape View File

@ -5,136 +5,160 @@
</template>
<script>
import Chart from './chart.vue'
import { request } from '@/utils/request.js'
import Chart from "./chart.vue";
import { formatTime } from "../../../../utils/index";
import { request } from "@/utils/request.js";
export default {
components: {
Chart
Chart,
},
data() {
return {
id: '',
today: null,
id: "",
cdata: {
'xAxis': {
'data': [
'03-09',
'03-10',
'03-11',
'03-12',
'03-13',
'03-14',
'03-15'
]
xAxis: {
data: ["", "", "", "", "", "", ""],
},
'series': [
{
'name': '门套',
'type': 'bar',
'emphasis': {
'focus': 'series'
},
'data': [
142, 121, 114, 150, 180, 124, 110
]
},
{
'name': '门扇',
'type': 'bar',
'emphasis': {
'focus': 'series'
},
'data': [
120, 170, 135, 156, 234, 180, 158
]
},
{
'name': '横头',
'type': 'bar',
'emphasis': {
'focus': 'series'
},
'data': [
147, 181, 163, 134, 145, 167, 151
]
},
{
'name': '延长套',
'type': 'bar',
'emphasis': {
'focus': 'series'
},
'data': [
100, 101, 102, 103, 104, 105, 106
]
},
{
'name': '移门',
'type': 'bar',
'emphasis': {
'focus': 'series'
},
'data': [
80, 85, 93, 83, 89, 100, 82
]
},
{
'name': '窄玻璃门',
'type': 'bar',
'emphasis': {
'focus': 'series'
},
'data': [
210, 200, 230, 240, 217, 218, 208
]
}
]
}
}
},
mounted() {
this.setData()
this.startInterval()
series: [
// {
// name: "门套",
// type: "bar",
// emphasis: {
// focus: "series",
// },
// data: [142, 121, 114, 150, 180, 124, 110],
// },
// {
// name: "门扇",
// type: "bar",
// emphasis: {
// focus: "series",
// },
// data: [120, 170, 135, 156, 234, 180, 158],
// },
// {
// name: "横头",
// type: "bar",
// emphasis: {
// focus: "series",
// },
// data: [147, 181, 163, 134, 145, 167, 151],
// },
// {
// name: "延长套",
// type: "bar",
// emphasis: {
// focus: "series",
// },
// data: [100, 101, 102, 103, 104, 105, 106],
// },
// {
// name: "移门",
// type: "bar",
// emphasis: {
// focus: "series",
// },
// data: [80, 85, 93, 83, 89, 100, 82],
// },
// {
// name: "窄玻璃门",
// type: "bar",
// emphasis: {
// focus: "series",
// },
// data: [210, 200, 230, 240, 217, 218, 208],
// },
],
},
};
},
methods: {
// 开启定时器
startInterval() {
const _this = this
// 应通过接口获取配置时间，暂时写死10s
const time = 10 * 60 * 1000
if (this.intervalId !== null) {
clearInterval(this.intervalId)
}
this.intervalId = setInterval(() => {
_this.setData()
}, time)
},
// 根据自己的业务情况修改
setData() {
const _this = this
// request({
// // 各产品生产数量api路径
// url: '/api/BigScreen/getMonthData',
// method: 'get'
// }).then(r => {
// // debugger
// // console.log(r.data.ProductQty)
// // if (r) {
// // _this.cdata = r.data.ProductQty
created() {
this.cdata.xAxis.data = [
formatTime(new Date().setDate(new Date().getDate() - 6), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 5), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 4), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 3), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 2), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 1), "MM-dd"),
formatTime(new Date(), "MM-dd"),
];
this.timing = setInterval(() => {
this.cdata.xAxis.data = [
formatTime(new Date().setDate(new Date().getDate() - 6), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 5), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 4), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 3), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 2), "MM-dd"),
formatTime(new Date().setDate(new Date().getDate() - 1), "MM-dd"),
formatTime(new Date(), "MM-dd"),
];
}, 1000);
// 使用 localStorage.getItem 通过键名获取存储的值
const storedString = localStorage.getItem("myStoredArray");
// 检查存储的值是否存在
if (storedString !== null) {
// 使用 JSON.parse 将字符串反序列化回数组
this.retrievedArray = JSON.parse(storedString);
this.retrievedArray.filter((item) => {
if (item.type == "QuantityOfEachProductProduced") {
if (item.openMock == 1) {
var datalist = JSON.parse(item.mockData);
const Producedmock = [];
for (let i = 0; i < datalist[0].length; i++) {
const newRowmk = [];
for (let j = 0; j < datalist.length; j++) {
newRowmk.push(datalist[j][i]);
}
Producedmock.push(newRowmk);
}
this.cdata.series = [];
// // }
// if (r) {
// _this.cdata = r.data.ProductQty
// this.cdata.series.forEach(i => {
// i.type = 'bar'
// i.emphasis = {
// focus: 'series'
// }
// })
// }
// })
Producedmock.forEach((item) => {
var mewitem = {
name: item[0],
type: "bar",
emphasis: {
focus: "series",
},
data: item.slice(1),
};
this.cdata.series.push(mewitem);
});
} else {
var datalist = JSON.parse(item.data);
const Produceddata = [];
for (let i = 0; i < datalist[0].length; i++) {
const newRowmk = [];
for (let j = 0; j < datalist.length; j++) {
newRowmk.push(datalist[j][i]);
}
Produceddata.push(newRowmk);
}
this.cdata.series = [];
Produceddata.forEach((item) => {
var newitem = {
name: item[0],
type: "bar",
emphasis: {
focus: "series",
},
data: item.slice(1),
};
this.cdata.series.push(newitem);
});
}
}
});
}
}
}
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>

256
mes-ui/mes-echarts/src/components/echart/bottom/bottomRightChart/index.vue
Unescape View File

@ -1,116 +1,184 @@
<template>
<div>
<Chart :cdata="cdata" />
<!-- <Chart :cdata="cdata" /> -->
<div class="echarts" id="leftbottommain"></div>
</div>
</template>
<script>
import Chart from './chart.vue'
import { request } from '@/utils/request.js'
import Chart from "./chart.vue";
import * as echarts from "echarts";
import { request } from "@/utils/request.js";
export default {
components: {
Chart
Chart,
},
data() {
return {
drawTiming: null,
cdata: {
xAxis: {
type: 'category',
data: ['1#', '2#', '3#', '4#', '5#', '6#']
},
yAxis: {
type: 'value'
},
series: [
{
data: [98, 70, 67, 82, 59, 75],
type: 'bar',
smooth: true
retrievedArray: [],
dataX1: undefined,
data1: undefined,
// cdata: {
// xAxis: {
// type: "category",
// data: ["1#", "2#", "3#", "4#", "5#", "6#"],
// },
// yAxis: {
// type: "value",
// },
// series: [
// {
// data: [98, 70, 67, 82, 59, 75],
// type: "bar",
// smooth: true,
// },
// ],
// },
};
},
created() {
// 使用 localStorage.getItem 通过键名获取存储的值
const storedString = localStorage.getItem("myStoredArray");
// 检查存储的值是否存在
if (storedString !== null) {
// 使用 JSON.parse 将字符串反序列化回数组
this.retrievedArray = JSON.parse(storedString);
this.retrievedArray.filter((item) => {
if (item.type == "UtilizationRateOfEquipment") {
if (item.openMock == 1) {
var datalist = JSON.parse(item.mockData);
this.datas = datalist;
this.dataX1 = this.datas[0];
this.data1 = this.datas[1];
} else {
var datalist = JSON.parse(item.data);
this.datas = datalist;
this.dataX1 = this.datas[0];
this.data1 = this.datas[1];
}
]
}
}
});
}
},
mounted() {
this.setData()
this.startInterval()
this.echarts();
},
methods: {
// 开启定时器
startInterval() {
const _this = this
// 应通过接口获取配置时间，暂时写死10s
const time = 80 * 10 * 1000
if (this.intervalId !== null) {
clearInterval(this.intervalId)
}
this.intervalId = setInterval(() => {
_this.setData()
}, time)
echarts() {
// console.log(this.$store.state.proData,'proData');
const labelOption = {
show: true,
formatter: "{c} {name|%}",
fontSize: 14,
rich: {
name: {},
},
};
var myChart = echarts.init(document.getElementById("leftbottommain"));
var option = {
dataZoom: [
{
// 第一个 dataZoom 组件
type: "inside",
xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个
startValue: 0, // 数据窗口范围的起始数值index
endValue: 2, // 数据窗口范围的结束数值index
},
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
textStyle: {
color: "white",
},
},
grid: {
top: "20%",
left: "20%",
right: "4%",
bottom: "20%",
// containLabel: true,
},
// 交换 X 轴和 Y 轴配置
xAxis: {
type: "category",
data: this.dataX1,
axisLabel: {
textStyle: {
color: "#fff",
fontSize: 14,
},
rotate: 0, // 文字倾斜显示
},
// 背景刻度线
splitLine: {
show: false,
lineStyle: {
type: "dashed", //solid实线;dashed虚线
color: "rgb(81, 82, 8,0.4)",
},
},
},
yAxis: {
min: "0",
max: "100",
type: "value",
axisLabel: {
formatter: "{value} %",
textStyle: {
color: "#fff",
fontSize: 14,
},
},
splitLine: {
show: false,
lineStyle: {
type: "dashed", //solid实线;dashed虚线
color: "rgb(81, 82, 8,0.4)",
},
},
boundaryGap: [0, 0.01],
},
series: [
{
name: "设备利用率%",
type: "bar",
data: this.data1,
// label: labelOption,
// axisLabel: {
// formatter: "{value} %",
// },
},
],
};
option && myChart.setOption(option);
// 设置定时器, 每隔2s判断是否滚动到末尾, 是则重置为初始状态, 否则向前滚动一位
this.timerId = setInterval(() => {
if (option.dataZoom[0].endValue == this.dataX1?.length - 1) {
option.dataZoom[0].endValue = 3;
option.dataZoom[0].startValue = 0;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
myChart.setOption(option); // 使用 myChart 变量而非 progressChart
}, 2000);
},
// 根据自己的业务情况修改
setData() {
const _this = this
// request({
// // 各产品生产数量api路径
// url: '/api/BigScreen/getMonthData1',
// method: 'get'
// }).then((r) => {
// // debugger
// if (r) {
// _this.cdata = r.data.EqmtRate
// // console.log('zzzzzzzzzzzzz')
// // console.log(this.cdata)
// // this.cdata.xAxis.data = [
// // ...this.cdata.xAxis.data,
// // "5#",
// // "7#",
// // "8#",
// // "20#",
// // "21#",
// // ];
// this.cdata.series.forEach((i) => {
// // i.data = [...i.data, 0, 0, 0, 0, 0];
// i.data.map((item, index, self) => {
// i.data[index] = Math.trunc(item)
// })
// i.type = 'bar'
// i.markLine = {
// focus: 'series'
// }
// i.label = {
// show: true, // 开启显示
// position: 'top', // 在上方显示
// textStyle: {
// // 数值样式
// color: 'white',
// fontSize: 14
// }
// }
// var colorList = []
// for (const item of i.data) {
// if (item > 85) {
// colorList.push('#19BB65')
// } else {
// colorList.push('red')
// }
// }
// i.itemStyle = {
// color: function(params) {
// if (params.dataIndex >= colorList.length) {
// params.dataIndex = params.dataIndex - colorList.length
// }
// return colorList[params.dataIndex]
// }
// }
// })
// }
// })
}
}
}
},
};
</script>
<style lang="scss" scoped>
</style>
.echarts {
width: 98%;
padding-top: 15px;
height: 230px;
}
</style>

1
mes-ui/mes-echarts/src/utils/request.js
Unescape View File

@ -8,6 +8,7 @@ const instance = axios.create({
})
instance.interceptors.request.use(config => {
config.headers['tenant-id'] = 1;
// 1.发送网络请求时, 在界面的中间位置显示Loading的组件
// 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面

10
mes-ui/mes-echarts/src/utils/requestConfig.js
Unescape View File

@ -1,8 +1,14 @@
// const devBaseURL = 'http://localhost:5281'
// const devBaseURL = 'http://5a35a48943.wicp.vip:40709'
// const proBaseURL = 'http://5a35a48943.wicp.vip:40709'
const devBaseURL = 'http://127.0.0.1:9002'
const proBaseURL = 'http://118.195.155.9:9002'
// const devBaseURL = 'http://127.0.0.1:9002'
// const proBaseURL = 'http://118.195.155.9:9002'
//本地
const devBaseURL = 'http://127.0.0.1:9021/'
const proBaseURL = 'http://127.0.0.1:9021/'
//测试环境后台
// const devBaseURL = 'http://222.71.165.187:8200/'
// const proBaseURL = 'http://222.71.165.187:8200/'
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL : proBaseURL
export const TIMEOUT = 5000

319
mes-ui/mes-echarts/src/views/bottomRight.vue
Unescape View File

@ -1,24 +1,9 @@
<template>
<div id="bottomRight">
<div class="up">
<div
v-for="item in titleItem"
:key="item.title"
class="bg-color-black item"
>
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
<div>
<dv-digital-flop
class="dv-dig-flop ml-1 mt-2 pl-3"
:config="item.number"
/>
</div>
</div>
</div>
<div class="down">
<div class="percent">
<div class="item bg-color-black">
<span>设备利用率(%)</span>
<!-- <span>设备利用率(%)</span> -->
<bottomRightChart />
</div>
</div>
@ -37,228 +22,196 @@
</template>
<script>
import bottomRightChart from '@/components/echart/bottom/bottomRightChart'
import bottomRightChart from "@/components/echart/bottom/bottomRightChart";
// import CenterChart from '@/components/echart/center/centerChartRate'
import { request } from '@/utils/request.js'
import { request } from "@/utils/request.js";
export default {
components: {
// CenterChart,
bottomRightChart
bottomRightChart,
},
data() {
return {
water: {
data: [24, 45],
shape: 'roundRect',
formatter: '{value}%',
waveNum: 3
shape: "roundRect",
formatter: "{value}%",
waveNum: 3,
},
productOKRateList: [],
config: {
data: [10],
shape: 'round',
shape: "round",
waveHeight: 10,
waveNum: 2,
colors: ['#00FFFF', '#00B2EE']
colors: ["#00FFFF", "#00B2EE"],
},
// 通过率和达标率的组件复用数据
rate: [
{
id: 'centerRate1',
id: "centerRate1",
tips: 60,
colorData: {
textStyle: '#3fc0fb',
textStyle: "#3fc0fb",
series: {
color: ['#00bcd44a', 'transparent'],
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: '#03a9f4',
shadowColor: '#97e2f5'
}
}
}
normal: "#03a9f4",
shadowColor: "#97e2f5",
},
},
},
},
{
id: 'centerRate2',
id: "centerRate2",
tips: 40,
colorData: {
textStyle: '#67e0e3',
textStyle: "#67e0e3",
series: {
color: ['#faf3a378', 'transparent'],
color: ["#faf3a378", "transparent"],
dataColor: {
normal: '#ff9800',
shadowColor: '#fcebad'
normal: "#ff9800",
shadowColor: "#fcebad",
},
},
},
},
],
};
},
created() {
// 使用 localStorage.getItem 通过键名获取存储的值
const storedString = localStorage.getItem("myStoredArray");
// 检查存储的值是否存在
if (storedString !== null) {
// 使用 JSON.parse 将字符串反序列化回数组
this.retrievedArray = JSON.parse(storedString);
this.retrievedArray.filter((item) => {
if (item.type == "QualifiedRateOfEachProduct") {
if (item.openMock == 1) {
var datalist = JSON.parse(item.mockData);
// this.productOKRateList = datalist[0];
const EachProductmock=[]
for (let i = 0; i < datalist[0].length; i++) {
const newRowmk = [];
for (let j = 0; j < datalist.length; j++) {
newRowmk.push(datalist[j][i]);
}
EachProductmock.push(newRowmk);
}
this.productOKRateList = [];
for (const item of EachProductmock) {
var n = {
data: [item[1]*1],
shape: "roundRect",
formatter: "{value}%",
waveNum: 2,
waveHeight: 10,
// 判断合格率低于95显示红色
colors:
item[1] > 95
? ["#00FFFF", "#00B2EE"]
: ["#ff6600", "#cc0000"],
};
this.productOKRateList.push({
ProductName: item[0],
config: n,
});
}
}
}
]
});
}
},
mounted() {
this.setData()
this.startInterval()
},
methods: {
// 开启定时器
startInterval() {
const _this = this
// 应通过接口获取配置时间，暂时写死10s
const time = 10 * 11 * 1000
if (this.intervalId !== null) {
clearInterval(this.intervalId)
}
this.intervalId = setInterval(() => {
_this.setData()
}, time)
},
// 根据自己的业务情况修改
setData() {
const _this = this
// request({
// // 合格率api路径
// url: '/api/BigScreen/getMonthData2',
// method: 'get'
// }).then(r => {
// // debugger
// console.log(r.data)
// if (r) {
// // debugger
// const rData = r.data.ProductOKRate
let arr = [98.39, 98.40, 98.41, 98.43, 98.44, 98.45];
let ri = Math.floor(Math.random() * arr.length);
this.$emit("updateRI", ri);
const rData = [
{
"ProductName": "门套",
"OKRate": 98.98
},
{
"ProductName": "门扇",
"OKRate": 99.12
},
{
"ProductName": "横头",
"OKRate": 97.08,
},
{
"ProductName": "延长套",
"OKRate": 95.89
},
{
"ProductName": "移门",
"OKRate": 92.00
},
{
"ProductName": "窄玻璃门",
"OKRate": 99.03
}
];
_this.productOKRateList = []
for (const item of rData) {
var n = {
data: [item.OKRate],
shape: 'roundRect',
formatter: '{value}%',
waveNum: 2,
waveHeight: 10,
// 判断合格率低于97显示红色
colors: item.OKRate > 97 ? ['#00FFFF', '#00B2EE'] : ['#ff6600', '#cc0000']
}
_this.productOKRateList.push({
ProductName: item.ProductName,
config: n
})
}
// }
// })
}
}
}
},
};
</script>
<style lang="scss" scoped>
#bottomRight {
#bottomRight {
display: flex;
flex-direction: column;
.up {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.item {
border-radius: 6px;
padding-top: 8px;
margin-top: 8px;
width: 32%;
height: 70px;
.dv-dig-flop {
width: 150px;
height: 30px;
}
}
}
.down {
margin: 10px;
padding: 10px;
width: 100%;
display: flex;
flex-direction: column;
height: 245px;
justify-content: space-between;
.bg-color-black {
border-radius: 5px;
}
.ranking {
width: 59%;
padding-left: 10px;
.up {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.ranking_span {
margin-top: 15px;
font-size: 16px;
display: flex;
justify-content: center;
}
.item {
border-radius: 6px;
padding-top: 8px;
margin-top: 8px;
width: 32%;
height: 70px;
.dv-dig-flop {
width: 150px;
height: 30px;
}
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
.item_span {
display: inline-block;
padding: 5px 25px;
}
}
.ranking1 {
margin-left: 15px;
}
.down {
margin: 10px;
padding: 10px;
width: 100%;
.percent {
width: 40%;
display: flex;
height: 245px;
justify-content: space-between;
.bg-color-black {
border-radius: 5px;
}
.ranking {
width: 59%;
padding-left:10px;
flex-wrap: wrap;
.item {
width: 100%;
height: 225px;
.ranking_span{
span {
margin-top: 15px;
font-size: 16px;
display: flex;
justify-content: center;
}
.item {
margin-top: 10px;
font-size: 16px;
display: flex;
flex-wrap: wrap;
}
.item_span{
display: inline-block;
padding: 5px 25px;
}
}
.ranking1{
margin-left:15px;
}
.percent {
width: 40%;
display: flex;
flex-wrap: wrap;
.item {
width: 100%;
height: 225px;
span {
margin-top: 15px;
font-size: 16px;
display: flex;
justify-content: center;
}
justify-content: center;
}
.water {
width: 100%;
.dv-wa-le-po {
height: 120px;
}
}
.water {
width: 100%;
.dv-wa-le-po {
height: 120px;
}
}
}
}
}
</style>

302
mes-ui/mes-echarts/src/views/center.vue
Unescape View File

@ -1,39 +1,22 @@
<template>
<div id="center">
<div class="up">
<div
v-for="item in titleItem"
:key="item.title"
class="bg-color-black item"
>
<!-- <div class="up">
<div v-for="item in titleItem" :key="item.title" class="bg-color-black item">
<p class="ml-3 colorBlue fw-b fs-xl">{{ item.title }}</p>
<div>
<dv-digital-flop
class="dv-dig-flop ml-1 mt-2 pl-3"
:config="item.number"
/>
<dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number" />
</div>
</div>
</div>
</div> -->
<div class="down">
<div class="percent">
<div class="item bg-color-black">
<span>生产订单达成率</span>
<dv-water-level-pond :config="config" style="width:100px;height:100px" />
<!-- <CenterChart
:id="rate[0].id"
:tips="rate[0].tips"
:color-obj="rate[0].colorData"
/> -->
</div>
<div class="item bg-color-black">
<span>订单交付率</span>
<dv-water-level-pond :config="config1" style="width:100px;height:100px" />
<!-- <CenterChart
:id="rate[1].id"
:tips="rate[1].tips"
:color-obj="rate[1].colorData"
/> -->
</div>
</div>
<div class="ranking bg-color-black">
@ -47,200 +30,175 @@
<script>
// import CenterChart from '@/components/echart/center/centerChartRate/index'
import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
import { request } from '@/utils/request.js'
import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
import { request } from "@/utils/request.js";
export default {
components: {
// CenterChart,
BottomLeftChart
BottomLeftChart,
},
data() {
return {
config: {
data: [95.44],
shape: 'round',
shape: "round",
waveHeight: 10,
waveNum: 2
waveNum: 2,
// colors: ['#003366', 'FFE4C4']
},
config1: {
data: [97],
shape: 'round',
shape: "round",
waveHeight: 10,
waveNum: 2
waveNum: 2,
// colors: ['#003366', 'FFE4C4']
},
water: {
data: [24, 45],
shape: 'roundRect',
formatter: '{value}%',
waveNum: 3
shape: "roundRect",
formatter: "{value}%",
waveNum: 3,
},
// 通过率和达标率的组件复用数据
rate: [
{
id: 'centerRate1',
id: "centerRate1",
tips: 60,
colorData: {
textStyle: '#3fc0fb',
textStyle: "#3fc0fb",
series: {
color: ['#00bcd44a', 'transparent'],
color: ["#00bcd44a", "transparent"],
dataColor: {
normal: '#03a9f4',
shadowColor: '#97e2f5'
}
}
}
normal: "#03a9f4",
shadowColor: "#97e2f5",
},
},
},
},
{
id: 'centerRate2',
id: "centerRate2",
tips: 40,
colorData: {
textStyle: '#67e0e3',
textStyle: "#67e0e3",
series: {
color: ['#faf3a378', 'transparent'],
color: ["#faf3a378", "transparent"],
dataColor: {
normal: '#ff9800',
shadowColor: '#fcebad'
}
}
}
}
]
}
normal: "#ff9800",
shadowColor: "#fcebad",
},
},
},
},
],
};
},
mounted() {
this.setData()
this.startInterval()
created() {
this.configs();
},
mounted() {},
methods: {
// 开启定时器
startInterval() {
const _this = this
// 应通过接口获取配置时间，暂时写死10s
const time = 50 * 10 * 1000
if (this.intervalId !== null) {
clearInterval(this.intervalId)
configs() {
// 使用 localStorage.getItem 通过键名获取存储的值
const storedString = localStorage.getItem("myStoredArray");
// 检查存储的值是否存在
if (storedString !== null) {
// 使用 JSON.parse 将字符串反序列化回数组
this.retrievedArray = JSON.parse(storedString);
this.retrievedArray.filter((item) => {
if (item.type == "ProductionOrderState") {
if (item.openMock == 1) {
var datalist = JSON.parse(item.mockData);
this.config.data = [datalist[0] * 1];
this.config1.data = [datalist[1] * 1];
this.config = { ...this.config };
this.config1 = { ...this.config1 };
} else {
this.datas = JSON.parse(item.data);
this.config.data = [datas[0] * 1];
this.config1.data = [datas[1] * 1];
this.config = { ...this.config };
this.config1 = { ...this.config1 };
}
}
});
} else {
}
this.intervalId = setInterval(() => {
_this.setData()
}, time)
},
// 根据自己的业务情况修改
setData() {
const _this = this
// request({
// // 各产品生产数量api路径
// url: '/api/BigScreen/getMonthData',
// method: 'get'
// }).then(r => {
// console.log(r.data.MoCompleteRate)
// if (r) {
// // debugger
// // _this.config.data[0] = r.data.MoCompleteRate
// _this.config = {
// data: [r.data.MoCompleteRate],
// shape: 'round',
// waveHeight: 10,
// waveNum: 2
// // colors: ['#003366', 'FFE4C4']
// }
// _this.config1 = {
// data: [r.data.PoCompleteRate],
// shape: 'round',
// waveHeight: 10,
// waveNum: 2
// // colors: ['#003366', 'FFE4C4']
// }
// }
// if (r) {
// _this.cdata = r.data.EqmtRate
// this.cdata.series.forEach(i => {
// i.type = 'line'
// i.markLine = {
// focus: 'series'
// }
// })
// }
// })
}
}
}
},
};
</script>
<style lang="scss" scoped>
#center {
display: flex;
flex-direction: column;
.up {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.item {
border-radius: 6px;
padding-top: 8px;
margin-top: 8px;
width: 32%;
height: 70px;
.dv-dig-flop {
width: 150px;
height: 30px;
}
}
}
.down {
margin: 10px;
padding: 10px;
width: 100%;
display: flex;
height: 245px;
justify-content: space-between;
.bg-color-black {
border-radius: 5px;
}
.ranking {
padding: 15px;
width: 59%;
text-align: center;
padding-bottom: 10px;
.dv-scr-rank-board {
height: 180px;
}
span{
margin-top: 20px;
}
}
#center {
display: flex;
flex-direction: column;
.up {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.item {
border-radius: 6px;
padding-top: 8px;
margin-top: 8px;
width: 32%;
height: 70px;
.dv-dig-flop {
width: 150px;
height: 30px;
}
}
}
.down {
margin: 10px;
padding: 10px;
width: 100%;
display: flex;
height: 245px;
justify-content: space-between;
.bg-color-black {
border-radius: 5px;
}
.ranking {
padding: 15px;
width: 59%;
text-align: center;
padding-bottom: 10px;
.dv-scr-rank-board {
height: 180px;
}
span {
margin-top: 20px;
}
}
.percent {
width: 40%;
display: flex;
flex-wrap: wrap;
.item {
padding-left: 35px;
width: 50%;
height: 225px;
span {
// margin:30px 10px 40px 30px;
margin-top:15px;
margin-left: 10px;
margin-bottom: 50px;
font-size: 16px;
display: flex;
/*justify-content: center;*/
}
}
.water {
width: 100%;
.percent {
width: 40%;
display: flex;
flex-wrap: wrap;
.item {
padding-left: 35px;
width: 50%;
height: 225px;
span {
// margin:30px 10px 40px 30px;
margin-top: 15px;
margin-left: 10px;
margin-bottom: 50px;
font-size: 16px;
display: flex;
/*justify-content: center;*/
}
}
.water {
width: 100%;
.dv-wa-le-po {
height: 120px;
}
}
}
.dv-wa-le-po {
height: 120px;
}
}
}
}
}
</style>

234
mes-ui/mes-echarts/src/views/centerLeft1.vue
Unescape View File

@ -103,9 +103,79 @@ export default {
],
};
},
created() {
// 使用 localStorage.getItem 通过键名获取存储的值
const storedString = localStorage.getItem("myStoredArray");
// 检查存储的值是否存在
if (storedString !== null) {
// 使用 JSON.parse 将字符串反序列化回数组
this.retrievedArray = JSON.parse(storedString);
this.retrievedArray.filter((item) => {
if (item.type == "EquipmentOperationState") {
if (item.openMock == 1) {
var datalist = JSON.parse(item.mockData);
for (const item of datalist) {
var n = {
data: [item[4] * 1],
shape: "round",
formatter: "{value}%",
waveNum: 2,
waveHeight: 10,
colors:
item[6] == "1"
? ["#00FFFF", "#00B2EE"]
: item[6] == "3"
? ["#ff6600", "#CD0100"]
: ["#FFE57E", "#FF6715"],
// 根据条件做判断修改颜色
};
this.reqlist.push({
eqmt_name: item[0], //设备名称
product_type_name: item[1], //产品类型
intraday_ok_qty: item[2] * 1, //良品
intraday_yield_rate: item[3] * 1, //合格率
oee: item[4] * 1, //OEE
intraday_eqmt_stop_times: item[5] * 1, //停机次数
// spec: item[6],
config: n,
});
}
} else {
var datalist = JSON.parse(item.data);
for (const item of datalist) {
var n = {
data: [item[4] * 1],
shape: "round",
formatter: "{value}%",
waveNum: 2,
waveHeight: 10,
colors:
item[6] == "1"
? ["#00FFFF", "#00B2EE"]
: item[6] == "3"
? ["#ff6600", "#CD0100"]
: ["#FFE57E", "#FF6715"],
// 根据条件做判断修改颜色
};
this.reqlist.push({
eqmt_name: item[0], //设备名称
product_type_name: item[1], //产品类型
intraday_ok_qty: item[2] * 1, //良品
intraday_yield_rate: item[3] * 1, //合格率
oee: item[4] * 1, //OEE
intraday_eqmt_stop_times: item[5] * 1, //停机次数
// spec: item[6],
config: n,
});
}
}
}
});
}
},
mounted() {
this.setData();
this.startInterval();
// this.setData();
// this.startInterval();
},
methods: {
// 开启定时器
@ -123,162 +193,6 @@ export default {
// // 根据自己的业务情况修改
setData() {
const _this = this;
// request({
// // 各产线
// url: '/api/BigScreen/getEqmtDetailList',
// method: 'get'
// }).then((r) => {
// // debugger
// if (r) {
// const rData = r.data
// const objS = [
// {
// collect_id: null,
// create_time: null,
// eqmt_alarm_flag: 0,
// eqmt_except_flag: 0,
// eqmt_id: 0,
// eqmt_name: '5#',
// eqmt_status: 0,
// gmt_create: '2022-08-30 08:16:52',
// gmt_modified: null,
// id: 0,
// intraday_eqmt_run_time: 0,
// intraday_eqmt_stop_time: 0,
// intraday_eqmt_stop_times: 0,
// intraday_eqmt_work_rate: 0,
// intraday_eqmt_work_time: 0,
// intraday_ng_qty: 0,
// intraday_ok_qty: 0,
// intraday_product_qty: 0,
// intraday_yield_rate: 0,
// oee: 0,
// product_type: null,
// product_type_name: null,
// speed: 0,
// sys_org_code: null,
// total_product_qty: 0,
// update_by: null,
// update_time: null
// },
// {
// collect_id: null,
// create_time: null,
// eqmt_alarm_flag: 0,
// eqmt_except_flag: 0,
// eqmt_id: 0,
// eqmt_name: '7#',
// eqmt_status: 0,
// gmt_create: '2022-08-30 08:16:52',
// gmt_modified: null,
// id: 0,
// intraday_eqmt_run_time: 0,
// intraday_eqmt_stop_time: 0,
// intraday_eqmt_stop_times: 0,
// intraday_eqmt_work_rate: 0,
// intraday_eqmt_work_time: 0,
// intraday_ng_qty: 0,
// intraday_ok_qty: 0,
// intraday_product_qty: 0,
// intraday_yield_rate: 0,
// oee: 0,
// product_type: null,
// product_type_name: null,
// speed: 0,
// sys_org_code: null,
// total_product_qty: 0,
// update_by: null,
// update_time: null
// },
// {
// collect_id: null,
// create_time: null,
// eqmt_alarm_flag: 0,
// eqmt_except_flag: 0,
// eqmt_id: 0,
// eqmt_name: '8#',
// eqmt_status: 0,
// gmt_create: '2022-08-30 08:16:52',
// gmt_modified: null,
// id: 0,
// intraday_eqmt_run_time: 0,
// intraday_eqmt_stop_time: 0,
// intraday_eqmt_stop_times: 0,
// intraday_eqmt_work_rate: 0,
// intraday_eqmt_work_time: 0,
// intraday_ng_qty: 0,
// intraday_ok_qty: 0,
// intraday_product_qty: 0,
// intraday_yield_rate: 0,
// oee: 0,
// product_type: null,
// product_type_name: null,
// speed: 0,
// sys_org_code: null,
// total_product_qty: 0,
// update_by: null,
// update_time: null
// },
// {
// collect_id: null,
// create_time: null,
// eqmt_alarm_flag: 0,
// eqmt_except_flag: 0,
// eqmt_id: 0,
// eqmt_name: '20#',
// eqmt_status: 0,
// gmt_create: '2022-08-30 08:16:52',
// gmt_modified: null,
// id: 0,
// intraday_eqmt_run_time: 0,
// intraday_eqmt_stop_time: 0,
// intraday_eqmt_stop_times: 0,
// intraday_eqmt_work_rate: 0,
// intraday_eqmt_work_time: 0,
// intraday_ng_qty: 0,
// intraday_ok_qty: 0,
// intraday_product_qty: 0,
// intraday_yield_rate: 0,
// oee: 0,
// product_type: null,
// product_type_name: null,
// speed: 0,
// sys_org_code: null,
// total_product_qty: 0,
// update_by: null,
// update_time: null
// },
// {
// collect_id: null,
// create_time: null,
// eqmt_alarm_flag: 0,
// eqmt_except_flag: 0,
// eqmt_id: 0,
// eqmt_name: '21#',
// eqmt_status: 0,
// gmt_create: '2022-08-30 08:16:52',
// gmt_modified: null,
// id: 0,
// intraday_eqmt_run_time: 0,
// intraday_eqmt_stop_time: 0,
// intraday_eqmt_stop_times: 0,
// intraday_eqmt_work_rate: 0,
// intraday_eqmt_work_time: 0,
// intraday_ng_qty: 0,
// intraday_ok_qty: 0,
// intraday_product_qty: 0,
// intraday_yield_rate: 0,
// oee: 0,
// product_type: null,
// product_type_name: null,
// speed: 0,
// sys_org_code: null,
// total_product_qty: 0,
// update_by: null,
// update_time: null
// }
// ]
let arr = [98.39, 98.4, 98.41, 98.43, 98.44, 98.45];
const rData = [
{
@ -587,7 +501,9 @@ export default {
colors:
item.intraday_yield_rate > 97
? ["#00FFFF", "#00B2EE"]
: item.intraday_yield_rate>92?["#ff6600", "#CD0100"]:["#FFE57E","#FF6715"],
: item.intraday_yield_rate > 92
? ["#ff6600", "#CD0100"]
: ["#FFE57E", "#FF6715"],
//根据条件做判断修改颜色
};
_this.reqlist.push({

143
mes-ui/mes-echarts/src/views/centerRight1.vue
Unescape View File

@ -12,11 +12,11 @@
</div>
</div>
<div class="d-flex jc-center body-box">
<dv-scroll-board class="dv-scr-board" :config="config" @click="skipto" />
<dv-scroll-board class="dv-scr-board" :config="config" />
</div>
</div>
<el-dialog title="工单详细信息" style="font-color:#fff" :visible.sync="moDetailShow" width="50%" :append-to-body="true" @open="getmoDetailInfo">
<el-descriptions class="margin-top" :column="1" :size="size" border>
<el-dialog title="工单详细信息" style="font-color:#fff" :visible.sync="moDetailShow" width="50%" :append-to-body="true" >
<el-descriptions class="margin-top" :column="1" border>
<el-descriptions-item>
<template slot="label">工单号</template>{{ moInfo.FBILL_NO }}
</el-descriptions-item>
@ -102,7 +102,7 @@ export default {
"200",
"89.52%",
],
["MO000680", "2020*510门扇 040201001", "1000", "997", "3", "99.70%"],
["MO000680", "2020*510门扇 040201001", "1000", "997", "3", "99.70%"],
["MO000681", "2020*560门扇 040201015", "1023", "989", "34", "96.68%"],
[
"MO000682",
@ -133,7 +133,7 @@ export default {
evenRowBGC: "#171c33", // 偶数行
// index: true,
columnWidth: [ 120, 300, 110, 110, 110,110 ], // 表的宽度
columnWidth: [120, 300, 110, 110, 110, 110], // 表的宽度
align: ["center"],
},
moDetailShow: false,
@ -147,12 +147,12 @@ export default {
},
methods: {
// 点击事件
skipto(config) {
// debugger
// window.alert(config.row[6])
this.moKey = config.row[6];
this.moDetailShow = true;
},
// skipto(config) {
// // debugger
// // window.alert(config.row[6])
// this.moKey = config.row[6];
// this.moDetailShow = true;
// },
// 开启定时器
startInterval() {
const _this = this;
@ -166,60 +166,77 @@ export default {
},
setData() {
const _this = this;
// request({
// // 获取生产工单
// url: "/api/BigScreen/getPlanOrderList",
// method: "get",
// }).then((r) => {
// if (r) {
// const newArr = r.data.map(function (item) {
// var ret = [];
// ret.push(
// item.FBILL_NO,
// item.FMATERIAL_NAME,
// item.FQTY_SHOW,
// item.FREPQUAAUX_QTY_SHOW,
// item.FREPFAILAUX_QTY_SHOW,
// (item.COMPLETE_RATE =
// (item.COMPLETE_RATE * 100).toFixed(1) + "%"),
// item.FENTRY_ID
// );
// return ret;
// });
// _this.config = {
// header: [
// "生产工单",
// "产品名称",
// "计划数量",
// "合格数量",
// "不合格数量",
// "生产进度(%)",
// "11",
// ],
request({
// 获取生产工单
url: "/admin-api/biz/screen/all",
method: "get",
}).then((r) => {
// 先删除旧数据
localStorage.removeItem("myStoredArray");
var dataArray = JSON.stringify(r.data);
localStorage.setItem("myStoredArray", dataArray);
r.data.filter((item) => {
if (item.type == "ProductionStateList") {
if (item.openMock == 1) {
var datalist = JSON.parse(item.mockData);
this.config.data = datalist;
this.config = { ...this.config };
} else {
var datalist = JSON.parse(item.data);
this.config.data = datalist;
this.config = { ...this.config };
}
}
});
// if (r) {
// const newArr = r.data.map(function (item) {
// var ret = [];
// ret.push(
// item.FBILL_NO,
// item.FMATERIAL_NAME,
// item.FQTY_SHOW,
// item.FREPQUAAUX_QTY_SHOW,
// item.FREPFAILAUX_QTY_SHOW,
// (item.COMPLETE_RATE =
// (item.COMPLETE_RATE * 100).toFixed(1) + "%"),
// item.FENTRY_ID
// );
// return ret;
// });
// _this.config = {
// header: [
// "生产工单",
// "产品名称",
// "计划数量",
// "合格数量",
// "不合格数量",
// "生产进度(%)",
// "11",
// ],
// data: newArr,
// rowNum: 8, // 表格行数
// headerHeight: 35,
// headerBGC: "#0f1325", // 表头
// oddRowBGC: "#0f1325", // 奇数行
// evenRowBGC: "#171c33", // 偶数行
// columnWidth: [110, 380, 100, 90, 100, 110, 0], // 表的宽度
// align: ["left", "left", "right", "right", "right", "right"], // 显示方式
// };
// }
// });
},
getmoDetailInfo() {
const _this = this;
// request({
// // 获取生产工单详细
// url: '/api/BigScreen/getPlanOrderDetail?fentryId=' + this.moKey,
// method: 'get'
// }).then((r) => {
// // debugger
// _this.moInfo = r.data
// })
// data: newArr,
// rowNum: 8, // 表格行数
// headerHeight: 35,
// headerBGC: "#0f1325", // 表头
// oddRowBGC: "#0f1325", // 奇数行
// evenRowBGC: "#171c33", // 偶数行
// columnWidth: [110, 380, 100, 90, 100, 110, 0], // 表的宽度
// align: ["left", "left", "right", "right", "right", "right"], // 显示方式
// };
// }
});
},
// getmoDetailInfo() {
// const _this = this;
// // request({
// // // 获取生产工单详细
// // url: '/api/BigScreen/getPlanOrderDetail?fentryId=' + this.moKey,
// // method: 'get'
// // }).then((r) => {
// // // debugger
// // _this.moInfo = r.data
// // })
// },
},
};
</script>

Write Preview
Loading…
Cancel
Save