新增设定展会设备计划产量页面
孟加拉展会大屏页面 update
This commit is contained in:
hzz
parent
9fc3f9078a
commit
2a59ce04f7
@ -279,6 +279,16 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "ColombiaExhibition",
|
name: "ColombiaExhibition",
|
||||||
component: () => import("../views/Exhibition/Colombia/index.vue"),
|
component: () => import("../views/Exhibition/Colombia/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/BengalExhibition",
|
||||||
|
name: "BengalExhibition",
|
||||||
|
component: () => import("../views/Exhibition/Bengal/index.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/ExhibitionTable_:id",
|
||||||
|
name: "ExhibitionTable",
|
||||||
|
component: () => import("../views/Exhibition/table/index.vue"),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "/MicroExhibitionTable",
|
path: "/MicroExhibitionTable",
|
||||||
name: "MicroExhibitionTable",
|
name: "MicroExhibitionTable",
|
||||||
|
|||||||
114
src/views/Exhibition/Bengal/component/BarChart.vue
Normal file
114
src/views/Exhibition/Bengal/component/BarChart.vue
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="LChartRef" class="cc"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let { t } = useI18n();
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
xData: {
|
||||||
|
type: Array,
|
||||||
|
default: ['1050910', '1050269']
|
||||||
|
},
|
||||||
|
seriesData: {
|
||||||
|
type: Array,
|
||||||
|
default: []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let LChartRef = ref(null);
|
||||||
|
const { proxy } = getCurrentInstance() as any;
|
||||||
|
let charts: any = null;
|
||||||
|
const setCharts = () => {
|
||||||
|
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
||||||
|
let option = {
|
||||||
|
// title: {
|
||||||
|
// text: '工作时间'
|
||||||
|
// },
|
||||||
|
backgroundColor: '#0E0E0E',
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14
|
||||||
|
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '45',
|
||||||
|
right: '0',
|
||||||
|
bottom: '40',
|
||||||
|
},
|
||||||
|
color: ['#2FC5D4', '#FEDA81'],
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: prop.xData,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
interval: 0, //控制X轴刻度全部显示
|
||||||
|
// rotate: 25, //倾斜角度
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: t('messages.日产量'),
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: prop.seriesData,
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
charts.setOption(option);
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => prop.seriesData, (newVal, oldVal) => {
|
||||||
|
charts.setOption({
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: newVal,
|
||||||
|
type: 'bar'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}, { deep: true })
|
||||||
|
watch(() => prop.xData, (newVal, oldVal) => {
|
||||||
|
charts.setOption({
|
||||||
|
type: 'category',
|
||||||
|
data: prop.xData,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
interval: 0, //控制X轴刻度全部显示
|
||||||
|
// rotate: 25, //倾斜角度
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
}, { deep: true })
|
||||||
|
onMounted(() => {
|
||||||
|
setCharts()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.cc {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
86
src/views/Exhibition/Bengal/component/Border.vue
Normal file
86
src/views/Exhibition/Bengal/component/Border.vue
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<div class="newboder">
|
||||||
|
<!-- <img class="borderpng" src="" alt=""> -->
|
||||||
|
<div class="title">
|
||||||
|
<text class="title-text">{{ title }}</text>
|
||||||
|
<div class="hr"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="newboder-content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { computed } from 'vue'
|
||||||
|
let prop = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '裁剪设备'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// let newTitle = computed(() => {
|
||||||
|
// return prop.title.split('').join(' ')
|
||||||
|
// })
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.newboder {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background: url(./../images/border.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderpng {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 16%;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 30px;
|
||||||
|
color: rgba(0, 255, 255, 0.996078431372549);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
.hr {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: url(./../images/hr.png) no-repeat;
|
||||||
|
background-position: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newboder-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
126
src/views/Exhibition/Bengal/component/DevCard.vue
Normal file
126
src/views/Exhibition/Bengal/component/DevCard.vue
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dev-card">
|
||||||
|
<div class="dev-left">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div class="dev-right">
|
||||||
|
<div class="dev-box">
|
||||||
|
<div class="dev-content-left dev-title">
|
||||||
|
<div class="key" v-for="item in dev_title">{{ item }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="dev-content-right" v-for="(items, index) in (dev_value as any)">
|
||||||
|
<div v-for="(item, index) in items" class="dev_value">
|
||||||
|
<div :class="{ status: index == 1 }"
|
||||||
|
:style="{ background: index == 1 ? status_color[item] : '' }">{{ index ==
|
||||||
|
1 ? '' : item }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { defineProps, ref } from 'vue'
|
||||||
|
const prop = defineProps({
|
||||||
|
dev_title: {
|
||||||
|
type: Array,
|
||||||
|
default: ['机架号', '状态', '布料层数', '裁片数量']
|
||||||
|
},
|
||||||
|
dev_value: {
|
||||||
|
type: Array,
|
||||||
|
default: [
|
||||||
|
[102014422, '待机', '40层', '0']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const status_color = {
|
||||||
|
'0': '#FF6E76',
|
||||||
|
'1': '#FDDD60',
|
||||||
|
'2': '#7CFFB2',
|
||||||
|
'3': '#FDDD60',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dev-card {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-left {
|
||||||
|
width: 45%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.dev-right {
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-title {
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-box {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-content-left {
|
||||||
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.dev-content-right {
|
||||||
|
width: 40%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.dev_value {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.key {
|
||||||
|
width: 75px;
|
||||||
|
height: 35px;
|
||||||
|
/* line-height: 35px; */
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #02C1D7;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
/* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
118
src/views/Exhibition/Bengal/component/Header.vue
Normal file
118
src/views/Exhibition/Bengal/component/Header.vue
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: hzz hzz
|
||||||
|
* @Date: 2023-12-05 13:38:58
|
||||||
|
* @LastEditors: hzz hzz
|
||||||
|
* @LastEditTime: 2023-12-05 14:49:17
|
||||||
|
* @FilePath: \screenFront\src\views\MicroExhibition\component\Header.vue
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="headerbg" :style="prop.wh">
|
||||||
|
<span>{{ prop.title }}</span>
|
||||||
|
<div class="left-tip-type">
|
||||||
|
<div class="left-tip-type-item">
|
||||||
|
<div class="yuan green"></div>
|
||||||
|
<div class="left-tip-type-item-text">{{t('messages.work')}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-tip-type-item">
|
||||||
|
<div class="yuan yello"></div>
|
||||||
|
<div class="left-tip-type-item-text">{{t('messages.Standby')}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="left-tip-type-item">
|
||||||
|
<div class="yuan red"></div>
|
||||||
|
<div class="left-tip-type-item-text">{{t('messages.halt')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { onMounted,onUpdated } from "vue";
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let { t } = useI18n();
|
||||||
|
const prop = defineProps({
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '标题'
|
||||||
|
},
|
||||||
|
wh: {
|
||||||
|
type: Object,
|
||||||
|
default: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
window.document.title = prop.title;
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.headerbg {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: url('./../images/header.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerbg span {
|
||||||
|
position: absolute;
|
||||||
|
top: 25px;
|
||||||
|
line-height: 50px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 30px;
|
||||||
|
color: rgba(0, 255, 255, 0.996078431372549);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.left-tip-type {
|
||||||
|
position: absolute;
|
||||||
|
top: 40px;
|
||||||
|
left: 400px;
|
||||||
|
width: 256px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-tip-type-item {
|
||||||
|
width: 33%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yuan {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background-color: #7CFFB2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yello {
|
||||||
|
background-color: #FDDD60;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
background-color: #FF6E76;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/views/Exhibition/Bengal/images/border.png
Normal file
BIN
src/views/Exhibition/Bengal/images/border.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
src/views/Exhibition/Bengal/images/fzmbj.png
Normal file
BIN
src/views/Exhibition/Bengal/images/fzmbj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
src/views/Exhibition/Bengal/images/header.png
Normal file
BIN
src/views/Exhibition/Bengal/images/header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/views/Exhibition/Bengal/images/hr.png
Normal file
BIN
src/views/Exhibition/Bengal/images/hr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
BIN
src/views/Exhibition/Bengal/images/hty.png
Normal file
BIN
src/views/Exhibition/Bengal/images/hty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
src/views/Exhibition/Bengal/images/mjxhj.png
Normal file
BIN
src/views/Exhibition/Bengal/images/mjxhj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
373
src/views/Exhibition/Bengal/index.vue
Normal file
373
src/views/Exhibition/Bengal/index.vue
Normal file
@ -0,0 +1,373 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: hzz hzz
|
||||||
|
* @Date: 2023-12-06 15:21:39
|
||||||
|
* @LastEditors: hzz hzz
|
||||||
|
* @LastEditTime: 2023-12-06 16:40:32
|
||||||
|
* @FilePath: \screenFront\src\views\MicroExhibition\index.vue
|
||||||
|
* @Description:
|
||||||
|
*
|
||||||
|
* Copyright (c) 2023 by ${hzz}, All Rights Reserved.
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<Header :title="t('messages.富怡物联管理平台')" :wh="{ width: '100%', height: '100px' }"></Header>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="left">
|
||||||
|
<BorderVue :title="t('messages.服装模板机')">
|
||||||
|
<div class="box">
|
||||||
|
<img src="./images/fzmbj.png" class="fzmbj-img" alt="">
|
||||||
|
<div class="devcard-container">
|
||||||
|
<DevCard :dev_title="dev_title" :dev_value="mubanji_value">
|
||||||
|
<BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.mubanji_series">
|
||||||
|
</BarChart>
|
||||||
|
</DevCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</BorderVue>
|
||||||
|
</div>
|
||||||
|
<div class="center">
|
||||||
|
<div class="ctop">
|
||||||
|
<video controls loop autoplay="true" ref="videoElement" width="780">
|
||||||
|
<source :src="videoUrl" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div class="cbottom">
|
||||||
|
<BorderVue :title="t('messages.单头混合毛巾绣花机')">
|
||||||
|
<div class="box">
|
||||||
|
<div class="box-top">
|
||||||
|
<div class="top-item" v-for="(item, index) in mjxhj_data">
|
||||||
|
<span class="key-text">{{ item.key }}:</span>
|
||||||
|
<span class="value-text" :class="{ status: index == 1 }"
|
||||||
|
:style="{ background: index == 1 ? status_color[item.value] : '' }">{{ index ==
|
||||||
|
1 ? '' : item.value }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box-bottom">
|
||||||
|
<div class="box-bottom-left">
|
||||||
|
<BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.xiuhuaji_series">
|
||||||
|
</BarChart>
|
||||||
|
</div>
|
||||||
|
<div class="box-bottom-right">
|
||||||
|
<img src="./images/mjxhj.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BorderVue>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<BorderVue :title="t('messages.绘图仪')">
|
||||||
|
<div class="box">
|
||||||
|
<img src="./images/hty.png" class="fzmbj-img" alt="">
|
||||||
|
<div class="devcard-container">
|
||||||
|
<DevCard :dev_title="dev_title" :dev_value="huituyi_value">
|
||||||
|
<BarChart style="width: 100%;height: 100%;" :xData="data_chart.xData" :seriesData="data_chart.huituyi_series">
|
||||||
|
</BarChart>
|
||||||
|
</DevCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</BorderVue>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import Header from './component/Header.vue'
|
||||||
|
import BorderVue from './component/Border.vue'
|
||||||
|
import DevCard from './component/DevCard.vue'
|
||||||
|
import BarChart from './component/BarChart.vue'
|
||||||
|
|
||||||
|
import { getmDeviceList, getmDeviceProduction } from '@/http/MicroExhibition'
|
||||||
|
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed, reactive } from 'vue'
|
||||||
|
|
||||||
|
import {columbiaDeviceList,columbiaDeviceProduction} from '@/http/Exhibition/Colombia'
|
||||||
|
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
|
||||||
|
import { getStoredLanguage, saveStoredLanguage,languageHash } from "@/utils/languageStorage";
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
let route = useRoute()
|
||||||
|
let { t } = useI18n();
|
||||||
|
let lang = route.query.lang as string
|
||||||
|
|
||||||
|
if (lang &&languageHash(lang)&&languageHash(lang) != getStoredLanguage()) {
|
||||||
|
saveStoredLanguage(languageHash(lang))
|
||||||
|
window.location.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
let videoUrl = ref('https://d.tufting222.cn/video/yzy/GEDOS_merge.mp4')
|
||||||
|
const videoElement = ref(null)
|
||||||
|
let timer = null
|
||||||
|
let timers = null
|
||||||
|
let dev_title = ref([t('messages.RackNum'), t('messages.DevStatus'), t('messages.UtilizationRate'), t('messages.RunTime')])
|
||||||
|
let mubanji_value = ref([
|
||||||
|
[102014422, '0', '40层', '0min']
|
||||||
|
])
|
||||||
|
let huituyi_value = ref([
|
||||||
|
[102014422, '0', '40层', '0min']
|
||||||
|
])
|
||||||
|
let mjxhj_data = reactive([
|
||||||
|
{ key: t('messages.RackNum'), value: '102014422' },
|
||||||
|
{ key: t('messages.DevStatus'), value: 2 },
|
||||||
|
{ key: t('messages.UtilizationRate'), value: '40层' },
|
||||||
|
{ key: t('messages.RunTime'), value: '0min' },
|
||||||
|
])
|
||||||
|
const status_color = {
|
||||||
|
'0': '#FF6E76',
|
||||||
|
'1': '#FDDD60',
|
||||||
|
'2': '#7CFFB2',
|
||||||
|
'3': '#FDDD60',
|
||||||
|
}
|
||||||
|
async function getcolumbiaDeviceList() {
|
||||||
|
const result:any = await columbiaDeviceList();
|
||||||
|
if (result.code == 200) {
|
||||||
|
let {data} = result;
|
||||||
|
let mubanji = data['服装模板机']
|
||||||
|
let huituyi = data['绘图仪(一代)']
|
||||||
|
let xiuhuaji = data['单头混合毛巾绣花机']
|
||||||
|
mubanji_value.value = [
|
||||||
|
[mubanji.label,mubanji.status,mubanji.ratio,mubanji.workTime]
|
||||||
|
]
|
||||||
|
huituyi_value.value = [
|
||||||
|
[huituyi.label,huituyi.status,huituyi.ratio,huituyi.workTime]
|
||||||
|
]
|
||||||
|
|
||||||
|
mjxhj_data[0].value = xiuhuaji.label
|
||||||
|
mjxhj_data[1].value = xiuhuaji.status
|
||||||
|
mjxhj_data[2].value = xiuhuaji.ratio
|
||||||
|
mjxhj_data[3].value = xiuhuaji.workTime
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let data_chart = reactive({ mubanji_series: [1,2], xiuhuaji_series: [3,4], huituyi_series: [5,6], xData: [t('messages.计划产量'),t('messages.实际产量')] })
|
||||||
|
|
||||||
|
function getcolumbiaDeviceProduction() {
|
||||||
|
columbiaDeviceProduction().then((result:any) => {
|
||||||
|
|
||||||
|
if (result.code == 200) {
|
||||||
|
let {data} = result;
|
||||||
|
|
||||||
|
data_chart.mubanji_series = data.mubanji
|
||||||
|
data_chart.xiuhuaji_series = data.xiuhuaji
|
||||||
|
data_chart.huituyi_series = data.huituyi
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function getWebsocket(val) {
|
||||||
|
try {
|
||||||
|
let data = JSON.parse(val)
|
||||||
|
|
||||||
|
|
||||||
|
if (data.type == 'WorkingState') {
|
||||||
|
let msg = data.msg
|
||||||
|
//绘图仪
|
||||||
|
if (msg.RackNumber == '104019066') {
|
||||||
|
huituyi_value.value[0][1] = msg.WorkingState
|
||||||
|
}
|
||||||
|
//模板机
|
||||||
|
if (msg.RackNumber == '10102118') {
|
||||||
|
mubanji_value.value[0][1] = msg.WorkingState
|
||||||
|
}
|
||||||
|
//绣花机
|
||||||
|
if (msg.RackNumber == '1021875') {
|
||||||
|
mjxhj_data[1].value = msg.WorkingState
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
function errWebsocket(val) {
|
||||||
|
// console.log(val);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getcolumbiaDeviceList()
|
||||||
|
getcolumbiaDeviceProduction()
|
||||||
|
timers = setInterval(() => {
|
||||||
|
getcolumbiaDeviceList()
|
||||||
|
getcolumbiaDeviceProduction()
|
||||||
|
}, 1000 * 60)
|
||||||
|
connectWebsocket(null, null, getWebsocket, errWebsocket)
|
||||||
|
document.getElementById('app').style.backgroundColor = 'rgba(0, 11, 18, 1)'
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
closeWebsocket()
|
||||||
|
clearInterval(timer)
|
||||||
|
clearInterval(timers)
|
||||||
|
document.getElementById('app').style.backgroundColor = '#100c2a'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: rgba(0, 11, 18, 1);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 100px;
|
||||||
|
width: 1920px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: 980px;
|
||||||
|
width: 1920px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 5px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
width: 540px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
width: 800px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctop {
|
||||||
|
width: 100%;
|
||||||
|
height: 490px;
|
||||||
|
/* background: url(./images/border.png) no-repeat;
|
||||||
|
background-size: 100% 100%; */
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cbottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fzmbj-img {
|
||||||
|
height: 345px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.devcard-container {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 335px);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-top {
|
||||||
|
width: 100%;
|
||||||
|
height: 30%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 70%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.box-bottom-left {
|
||||||
|
width: 250px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.box-bottom-right {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-bottom-right img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.top-item {
|
||||||
|
width: 33%;
|
||||||
|
height: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.key-text {
|
||||||
|
width: 60%;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #02c1d7;
|
||||||
|
font-weight: 700;
|
||||||
|
/* font-family: '华文新魏', sans-serif; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-text {
|
||||||
|
width: 40%;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #AEEEFAFE;
|
||||||
|
font-family: '华文新魏', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -103,7 +103,7 @@ if (lang &&languageHash(lang)&&languageHash(lang) != getStoredLanguage()) {
|
|||||||
window.location.reload()
|
window.location.reload()
|
||||||
}
|
}
|
||||||
|
|
||||||
let videoUrl = ref('https://d.tufting222.cn/video/yzy/Spanish.mp4')
|
let videoUrl = ref('https://d.tufting222.cn/video/yzy/GEDOS_merge.mp4')
|
||||||
const videoElement = ref(null)
|
const videoElement = ref(null)
|
||||||
let timer = null
|
let timer = null
|
||||||
let timers = null
|
let timers = null
|
||||||
|
|||||||
166
src/views/Exhibition/table/index.vue
Normal file
166
src/views/Exhibition/table/index.vue
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<!--
|
||||||
|
* @FilePath: table.vue
|
||||||
|
* @Author: 张宇琼
|
||||||
|
* @Date: 2023-09-08 16:35:24
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @LastEditTime: 2023-09-15 15:18:34
|
||||||
|
* @Descripttion:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">
|
||||||
|
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备工况物联系统'" :titleTip="[]"
|
||||||
|
:typeFun="['time']" :alarmType="[]"></header2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-container">
|
||||||
|
<el-table :data="tableData" style="width: 100%" :header-cell-style="{
|
||||||
|
'text-align': 'center',
|
||||||
|
'font-size': '20px',
|
||||||
|
'background': '#162556 !important',
|
||||||
|
'color': '#ffffff',
|
||||||
|
'border': 'none !important'
|
||||||
|
}">
|
||||||
|
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
|
||||||
|
<el-table-column align="center" prop="name" width="320" label="设备名称"></el-table-column>
|
||||||
|
<el-table-column prop="label" label="设备编号" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="planProduction" label="计划任务" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="centered-input">
|
||||||
|
<el-input v-model="row.planProduction" placeholder="请输入" clearable /> {{ row.unit }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="item1">
|
||||||
|
<el-button @click="saveData" size="large" type="success" style="background-color: #00B38B;">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import header2 from '@/components/headerBox/header2.vue'
|
||||||
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import { ElTable, ElTableColumn, ElInput, ElButton, ElMessage, ElMessageBox } from 'element-plus';
|
||||||
|
import { getPlanProduction, insertPlanProduction } from '@/http/cisma';
|
||||||
|
const tableData = ref([]);
|
||||||
|
onMounted(() => {
|
||||||
|
// 获取数据
|
||||||
|
fetchPlanProduction();
|
||||||
|
|
||||||
|
})
|
||||||
|
async function fetchPlanProduction(): Promise<any> {
|
||||||
|
try {
|
||||||
|
const res = await getPlanProduction() as any;
|
||||||
|
if (res.code === 200) {
|
||||||
|
// console.log(res);
|
||||||
|
tableData.value = res.data
|
||||||
|
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch plan production:', error);
|
||||||
|
// 处理错误情况
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveData() {
|
||||||
|
let list = tableData.value.map(item => {
|
||||||
|
|
||||||
|
// 检查planProduction是否为空值
|
||||||
|
if (!item.planProduction) {
|
||||||
|
ElMessageBox.alert('任务计划列存在空值，无法保存', '提示'); // 使用弹窗组件显示提示信息
|
||||||
|
throw new Error('存在空值,无法保存'); // 抛出异常，停止保存操作
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
planProduction: item.planProduction,
|
||||||
|
label: item.label
|
||||||
|
}
|
||||||
|
})
|
||||||
|
try {
|
||||||
|
const res = await insertPlanProduction(list) as any;
|
||||||
|
if (res.code === 200) {
|
||||||
|
ElMessage.success('保存成功');
|
||||||
|
} else {
|
||||||
|
ElMessage.error('保存失败');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to save plan production:', error);
|
||||||
|
// 处理错误情况
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
height: 1080px;
|
||||||
|
width: 1920px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
background-color: #0E0E0E;
|
||||||
|
overflow: auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
/* text-align: center; */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table tr) {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__inner-wrapper::before) {
|
||||||
|
background-color: #173d91;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered-input ::v-deep(.el-input__inner) {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input {
|
||||||
|
width: 50%;
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
width: 95%;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 48%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item1 {
|
||||||
|
margin-top: 10%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -36,18 +36,24 @@ const setCharts = () => {
|
|||||||
|
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize:14
|
fontSize: 14
|
||||||
|
|
||||||
},
|
},
|
||||||
grid:{
|
grid: {
|
||||||
left:'80',
|
left: '80',
|
||||||
right:'10',
|
right: '10',
|
||||||
bottom:'40',
|
bottom: '40',
|
||||||
},
|
},
|
||||||
color:['#2FC5D4','#FEDA81'],
|
color: ['#2FC5D4', '#FEDA81'],
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: prop.xData,
|
data: prop.xData,
|
||||||
|
axisLabel: {
|
||||||
|
formatter: function (value) {
|
||||||
|
// 自定义换行逻辑，这里以每两个字符换行为例
|
||||||
|
return value.split(' ').join('\n');
|
||||||
|
}
|
||||||
|
}
|
||||||
// axisLabel: {
|
// axisLabel: {
|
||||||
// interval: 0, //控制X轴刻度全部显示
|
// interval: 0, //控制X轴刻度全部显示
|
||||||
// rotate: 45, //倾斜角度
|
// rotate: 45, //倾斜角度
|
||||||
@ -57,8 +63,8 @@ const setCharts = () => {
|
|||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: t('default.日产量'),
|
name: t('default.日产量'),
|
||||||
axisLabel:{
|
axisLabel: {
|
||||||
fontSize:14
|
fontSize: 14
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|||||||
@ -31,7 +31,7 @@ let config = reactive({
|
|||||||
headerBGC: 'rgba(0, 11, 18, 1)',
|
headerBGC: 'rgba(0, 11, 18, 1)',
|
||||||
oddRowBGC: '#000F1D',
|
oddRowBGC: '#000F1D',
|
||||||
evenRowBGC: '#000F1D',
|
evenRowBGC: '#000F1D',
|
||||||
wrap: [false, false, false, false, false],
|
wrap: [false, true, false, false, false],
|
||||||
columnWidth: [80, 240, 85, 90, 110,145],
|
columnWidth: [80, 240, 85, 90, 110,145],
|
||||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||||
rowNum: prop.data.rowNum,
|
rowNum: prop.data.rowNum,
|
||||||
|
|||||||
@ -88,7 +88,7 @@ if (lang &&languageHash(lang)&&languageHash(lang) != getStoredLanguage()) {
|
|||||||
let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
|
let videoUrl = ref('https://d.tufting222.cn/video/yzy/a.mp4')
|
||||||
const videoElement = ref(null)
|
const videoElement = ref(null)
|
||||||
let timer = null
|
let timer = null
|
||||||
|
let thisLang = getStoredLanguage();
|
||||||
let fqdata = ref({
|
let fqdata = ref({
|
||||||
list: [],
|
list: [],
|
||||||
rowNum: 3,
|
rowNum: 3,
|
||||||
@ -141,7 +141,8 @@ function getDeviceProduction() {
|
|||||||
data: item.data
|
data: item.data
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
xData.value = data.xData
|
let xDataArr = thisLang == "简体中文"?data.xData:data.exData
|
||||||
|
xData.value = xDataArr
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -174,7 +175,8 @@ function getmDevList() {
|
|||||||
} else if (item.status == "false") {
|
} else if (item.status == "false") {
|
||||||
temp = '0'
|
temp = '0'
|
||||||
}
|
}
|
||||||
return [i + 1, item.name, item.num, temp, item.ratio, item.workTime]
|
let devname = thisLang == "简体中文"?item.name:item.ename
|
||||||
|
return [i + 1, devname, item.num, temp, item.ratio, item.workTime]
|
||||||
})
|
})
|
||||||
stepList[statusObj[key]].online = online;
|
stepList[statusObj[key]].online = online;
|
||||||
stepList[statusObj[key]].total = devObj[key].list.length;
|
stepList[statusObj[key]].total = devObj[key].list.length;
|
||||||
@ -191,8 +193,9 @@ function getmDevList() {
|
|||||||
} else if (item.status == "false") {
|
} else if (item.status == "false") {
|
||||||
temp = '0'
|
temp = '0'
|
||||||
}
|
}
|
||||||
|
let devname = thisLang == "简体中文"?item.name:item.ename
|
||||||
return {
|
return {
|
||||||
name: item.name,
|
name: devname,
|
||||||
num: item.num,
|
num: item.num,
|
||||||
status: temp,
|
status: temp,
|
||||||
ratio: item.ratio,
|
ratio: item.ratio,
|
||||||
|
|||||||
@ -121,7 +121,7 @@ let {t} = useI18n();
|
|||||||
reverseName.unshift(res)
|
reverseName.unshift(res)
|
||||||
})
|
})
|
||||||
data['name']=reverseName
|
data['name']=reverseName
|
||||||
data['listData']=[{},{month:reverseData,years:2023}]
|
data['listData']=[{},{month:reverseData,years:2024}]
|
||||||
|
|
||||||
|
|
||||||
yields.value.setData(data);
|
yields.value.setData(data);
|
||||||
|
|||||||
@ -27,7 +27,7 @@ let props=defineProps<{
|
|||||||
title:string
|
title:string
|
||||||
}>()
|
}>()
|
||||||
let power=ref()
|
let power=ref()
|
||||||
|
let year = new Date().getFullYear();
|
||||||
let refborder4=ref()
|
let refborder4=ref()
|
||||||
|
|
||||||
const echartsData = reactive<EDataPerson>({
|
const echartsData = reactive<EDataPerson>({
|
||||||
@ -43,7 +43,7 @@ const setData=(value:any)=>{
|
|||||||
|
|
||||||
let series=[]
|
let series=[]
|
||||||
value.listData.forEach(res=>{
|
value.listData.forEach(res=>{
|
||||||
if(res.years==2023){
|
if(res.years==year){
|
||||||
for(let key in res.month){
|
for(let key in res.month){
|
||||||
series.push({
|
series.push({
|
||||||
name: key+'月',
|
name: key+'月',
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user