hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
123@123.com 2023-12-27 16:30:00 +08:00
parent 7867e2562d
commit 5758c19ac7
17 changed files with 560 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/MicroExhibition/child/Img.vue Normal file
View File

@ -0,0 +1,24 @@
<!--
* @FilePath: Img.vue
* @Author: zz
* @Date: 2023-10-26 15:55:38
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-11-02 11:43:12
* @Descripttion:
-->
<template>
<div>
<el-image style="width: 100%; height: 100%" :src="src" alt="image" fit="fill" />
</div>
</template>
<script lang="ts" setup>
// const url ='https://www.richpeace.cn/uploadfile/thumb/20885c72ca35d75619d6a378edea9f76/880x580_auto.jpg'
defineProps({
src: {
type: String,
required: true,
},
});
</script>
<style>
</style>

14
src/views/MicroExhibition/child/Left1.vue
View File

@ -4,21 +4,21 @@
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{title}}</div>
<div class="val">{{ val }}</div>
<div class="title">{{num}}</div>
<div class="val">{{ numdata }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
title: {
num: {
type: String,
default: '机架号'
required: true,
},
val: {
numdata: {
type: String,
default: 'RP2011001#'
required: true,
}
})
</script>
@ -70,7 +70,7 @@ const prop = defineProps({
font-size: 20px;
color: #B2EDED;
top: 410px;
left: 56px;
left: 40px;
}
.val {
width: 100%;

12
src/views/MicroExhibition/child/Left2.vue
View File

@ -4,21 +4,21 @@
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{ title }}</div>
<div class="val">{{ val }}</div>
<div class="title">{{ state }}</div>
<div class="val">{{ statedata }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
title: {
state: {
type: String,
default: '设备状态'
required: true,
},
val: {
statedata: {
type: String,
default: '工作中'
required: true,
}
})
</script>

123
src/views/MicroExhibition/child/LineChart.vue
View File

@ -1,93 +1,102 @@
<template>
<div ref="LChartRef"></div>
<div ref="LChartRef" class="chart-container"></div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted } from "vue";
const prop = defineProps({
const prop = defineProps<{
config: {
type: Object,
default: {
title:''
}
}
})
name: string;
data: any;
xAxis: string[];
};
}>();
let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
const setCharts = ()=>{
charts = proxy.$echarts.init(LChartRef.value, 'dark')
const setCharts = () => {
charts = proxy.$echarts.init(LChartRef.value, "dark");
let option = {
backgroundColor: "#0E0E0E",
title: {
text: prop.config.title,
textStyle:{
fontSize: 30,
color: '#20aec5'
textStyle: {
fontSize: 18,
color: "#33CCFF",
},
left: '20px'
left: "80%",
top: "-2px",
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
trigger: "axis",
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
left: "2%",
right: "6%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: 'category',
type: "category",
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
axisLine: {
show: true, // 显示横坐标轴线段
lineStyle: {
color: "#5DB6F5", // 设置线段颜色
width: 1, // 设置线段宽度
},
},
data:prop.config.xAxis
},
yAxis: {
type: 'value'
type: "value",
name: "分钟(min）",
axisLine: {
show: true, // 设置纵坐标线是否显示
lineStyle: {
color: "#5DB6F5", // 设置纵坐标线的颜色
width: 1, // 设置纵坐标线的宽度
},
},
},
series: [
{
name: 'Email',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
name: "Email",
type: "line",
data:prop.config.data,
},
{
name: 'Union Ads',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
],
};
charts.setOption(option);
}
};
// watch(() => prop.config.data,(newVal) => {
// data = newVal
// charts.setOption({
// xAxis: {
// type: "category",
// boundaryGap:false,
// data:prop.config.xAxis
// },
// series:data
// })
// })
onMounted(() => {
setCharts()
})
setCharts();
});
</script>
<style scoped>
.chart-container {
width: 820px;
height: 470px;
}
.cc {
width: 400px;
width: 500px;
height: 400px;
}
</style>

42
src/views/MicroExhibition/child/Name.vue Normal file
View File

@ -0,0 +1,42 @@
<!--
* @FilePath: Name.vue
* @Author: zz
* @Date: 2023-10-26 14:54:46
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-11-14 14:21:52
* @Descripttion:
-->
<template>
<div class="rect"></div>
<div class="name">{{ name }}</div>
</template>
<script setup lang='ts'>
const prop = defineProps({
name: {
type: String,
required: true,
},
})
</script>
<style>
.rect {
position: absolute;
width: 223px;
height: 75px;
background-image: url('./img/u506.svg');
left: 40%;
top: 343px;
}
.name{
position: absolute;
width: 260px;
top: 335px;
left: 38%;
font-weight: 700;
font-style: normal;
font-size: 36px;
color: #CFEBEB;
}
</style>

35
src/views/MicroExhibition/child/Pan2.vue Normal file
View File

@ -0,0 +1,35 @@
<!--
* @FilePath: Pan2.vue
* @Author: zz
* @Date: 2023-10-26 10:12:10
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-10-26 10:28:39
* @Descripttion:
-->
<template>
<div class="pan">
<div class="light"></div>
</div>
</template>
<script setup lang='ts'>
</script>
<style scoped>
.pan {
position: relative;
width: 150px;
height: 120px;
background-image: url('./img/u356.png');
background-size: 100% 100%;
}
.light {
position: absolute;
width: 79px;
height: 40px;
left: 35px;
top: 38px;
background-image: url('./img/u25.png');
background-size: 100% 100%;
}
</style>

88
src/views/MicroExhibition/child/Right1.vue
View File

@ -1,24 +1,41 @@
<template>
<div class="left1">
<!-- 实际产量 -->
<Pan2 class="pan2"></Pan2>
<div class="s12"></div>
<div class="h12"></div>
<div class="s21"></div>
<div class="title2">{{ actoutput }}</div>
<div class="val2">{{ actdata }}</div>
<!-- 计划产量 -->
<Pan class="pan1"></Pan>
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{ title }}</div>
<div class="val">{{ val }}</div>
<div class="title">{{ planoutput }}</div>
<div class="val">{{ plandata }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
import Pan2 from './Pan2.vue'
const prop = defineProps({
title: {
planoutput: {
type: String,
default: '压脚次数'
required: true,
},
val: {
plandata: {
type: String,
default: '10次'
required: true,
},
actoutput: {
type: String,
required: true,
},
plandata: {
type: String,
required: true,
}
})
</script>
@ -36,6 +53,13 @@ const prop = defineProps({
left: 0px;
top: 0px;
}
.pan2 {
position: absolute;
width: 150px;
height: 120px;
left: 265px;
top: -40px;
}
.s1 {
position: absolute;
width: 258px;
@ -45,6 +69,16 @@ const prop = defineProps({
top: 343px;
transform: rotate(90deg);
}
.s12 {
position: absolute;
width: 258px;
height: 6px;
background-image: url('./img/u829p000.svg');
left: 216px;
top: 192px;
transform: rotate(90deg);
background-repeat:no-repeat
}
.h1 {
position: absolute;
width: 100px;
@ -53,6 +87,14 @@ const prop = defineProps({
left: 35px;
top: 467px;
}
.h12 {
position: absolute;
width: 135px;
height: 6px;
background-image: url('./img/u829p001.svg');
left: 210px;
top: 99px;
}
.s2 {
position: absolute;
width: 124px;
@ -62,6 +104,16 @@ const prop = defineProps({
top: 528px;
transform: rotate(90deg);
}
.s21 {
position: absolute;
width: 124px;
height: 6px;
background-image: url('./img/u829p002.svg');
left: 150px;
top: 160px;
transform: rotate(90deg);
background-repeat:no-repeat
}
.title {
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
@ -70,7 +122,7 @@ const prop = defineProps({
font-size: 20px;
color: #B2EDED;
top: 240px;
left: 42px;
left: 25px;
}
.val {
width: 100%;
@ -83,4 +135,26 @@ const prop = defineProps({
top: 55px;
left: 0;
}
.title2 {
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: #B2EDED;
top: 110px;
left: 235px;
width:100px;
}
.val2 {
width: 100%;
position: absolute;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 26px;
color: #B2EDED;
top: -40px;
left: 220px;
}
</style>

14
src/views/MicroExhibition/child/Right2.vue
View File

@ -4,21 +4,21 @@
<div class="s1"></div>
<div class="h1"></div>
<div class="s2"></div>
<div class="title">{{ title }}</div>
<div class="val">{{ val }}</div>
<div class="title">{{ cut }}</div>
<div class="val">{{ cutdata }}</div>
</div>
</template>
<script setup lang='ts'>
import Pan from './Pan.vue';
const prop = defineProps({
title: {
cut: {
type: String,
default: '剪线次数'
required: true,
},
val: {
cutdata: {
type: String,
default: '20次'
required: true,
}
})
</script>
@ -70,7 +70,7 @@ const prop = defineProps({
font-size: 20px;
color: #B2EDED;
top: 410px;
left: 34px;
left: 40px;
}
.val {
width: 100%;

6
src/views/MicroExhibition/child/img/u455.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="13px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -37 -614 )">
<path d="M 1.6964285784040172 0.16666666015625076 L 8.303571428571429 6.416666660156251 L 1.6964285784040178 12.666666660156253 L 0.3571428641183032 11.5 L 5.803571421805245 6.416666660156251 L 0.35714286411830276 1.3333333396484388 L 1.6964285784040172 0.16666666015625076 Z M 7.946428564453126 0.16666666015625076 L 14.642857135881698 6.416666660156251 L 7.946428564453126 12.666666660156253 L 6.696428571428572 11.5 L 12.14285714983259 6.4166666599609385 L 6.696428571428572 1.333333339843751 L 7.946428564453126 0.16666666015625076 Z " fill-rule="nonzero" fill="#0066ff" stroke="none" transform="matrix(1 0 0 1 37 614 )" />
</g>
</svg>

6
src/views/MicroExhibition/child/img/u457.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="13px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -205 -614 )">
<path d="M 13.303571421595983 12.83333333984375 L 6.696428571428572 6.583333339843751 L 13.303571421595983 0.3333333398437497 L 14.642857135881698 1.5 L 9.196428578404019 6.58333333984375 L 14.642857135881698 11.666666660156249 L 13.303571421595983 12.83333333984375 Z M 7.053571435546875 12.83333333984375 L 0.3571428641183037 6.583333339843751 L 7.053571435546877 0.3333333398437497 L 8.303571428571429 1.5 L 2.8571428501674103 6.58333333984375 L 8.303571428571429 11.666666660156249 L 7.053571435546875 12.83333333984375 Z " fill-rule="nonzero" fill="#0066ff" stroke="none" transform="matrix(1 0 0 1 205 614 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u506.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="223px" height="75px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -1158 -406 )">
<path d="M 1159 416 A 9 9 0 0 1 1168 407 L 1371 407 A 9 9 0 0 1 1380 416 L 1380 471 A 9 9 0 0 1 1371 480 L 1168 480 A 9 9 0 0 1 1159 471 L 1159 416 Z " fill-rule="nonzero" fill="#3f81f0" stroke="none" fill-opacity="0.3686274509803922" />
<path d="M 1158.5 416 A 9.5 9.5 0 0 1 1168 406.5 L 1371 406.5 A 9.5 9.5 0 0 1 1380.5 416 L 1380.5 471 A 9.5 9.5 0 0 1 1371 480.5 L 1168 480.5 A 9.5 9.5 0 0 1 1158.5 471 L 1158.5 416 Z " stroke-width="1" stroke="#3f81f0" fill="none" stroke-opacity="0.3686274509803922" />
</g>
</svg>

6
src/views/MicroExhibition/child/img/u585.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="5px" height="27px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -38 -177 )">
<path d="M 40 178 L 40 202 " stroke-width="2" stroke="#0a3e7b" fill="none" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u829p000.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="38px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1706 175 38 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 1548 1902 )">
<path d="M 133 5.9999996514168865 L 133 32 L 1 32 L 1 48 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1592 161 )" />
<path d="M 133 0 C 131.06700337559224 0 129.5 1.5670033757405226 129.5 3.5000000001483 C 129.5 5.432996624556077 131.06700337559224 7.0000000001483 133 7.0000000001483 C 134.93299662440776 7.0000000001483 136.5 5.432996624556077 136.5 3.5000000001483 C 136.5 1.5670033757405226 134.93299662440776 0 133 0 Z M 133 2.0000000001483 C 133.82842712474618 2.0000000001483 134.5 2.67157287540211 134.5 3.5000000001483 C 134.5 4.32842712489449 133.82842712474618 5.0000000001483 133 5.0000000001483 C 132.17157287525382 5.0000000001483 131.5 4.32842712489449 131.5 3.5000000001483 C 131.5 2.67157287540211 132.17157287525382 2.0000000001483 133 2.0000000001483 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1592 161 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u829p001.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="138px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1590 191 138 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(-1 -0 -0 -1 3318 386 )">
<path d="M 133 5.9999996514168865 L 133 32 L 1 32 L 1 48 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1592 161 )" />
<path d="M 133 0 C 131.06700337559224 0 129.5 1.5670033757405226 129.5 3.5000000001483 C 129.5 5.432996624556077 131.06700337559224 7.0000000001483 133 7.0000000001483 C 134.93299662440776 7.0000000001483 136.5 5.432996624556077 136.5 3.5000000001483 C 136.5 1.5670033757405226 134.93299662440776 0 133 0 Z M 133 2.0000000001483 C 133.82842712474618 2.0000000001483 134.5 2.67157287540211 134.5 3.5000000001483 C 134.5 4.32842712489449 133.82842712474618 5.0000000001483 133 5.0000000001483 C 132.17157287525382 5.0000000001483 131.5 4.32842712489449 131.5 3.5000000001483 C 131.5 2.67157287540211 132.17157287525382 2.0000000001483 133 2.0000000001483 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1592 161 )" />
</g>
</svg>

7
src/views/MicroExhibition/child/img/u829p002.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="22px" height="6px" preserveAspectRatio="xMinYMid meet" viewBox="1582 199 22 4" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(0 -1 1 0 1392 1794 )">
<path d="M 133 5.9999996514168865 L 133 32 L 1 32 L 1 48 " stroke-width="2" stroke="#445382" fill="none" transform="matrix(1 0 0 1 1592 161 )" />
<path d="M 133 0 C 131.06700337559224 0 129.5 1.5670033757405226 129.5 3.5000000001483 C 129.5 5.432996624556077 131.06700337559224 7.0000000001483 133 7.0000000001483 C 134.93299662440776 7.0000000001483 136.5 5.432996624556077 136.5 3.5000000001483 C 136.5 1.5670033757405226 134.93299662440776 0 133 0 Z M 133 2.0000000001483 C 133.82842712474618 2.0000000001483 134.5 2.67157287540211 134.5 3.5000000001483 C 134.5 4.32842712489449 133.82842712474618 5.0000000001483 133 5.0000000001483 C 132.17157287525382 5.0000000001483 131.5 4.32842712489449 131.5 3.5000000001483 C 131.5 2.67157287540211 132.17157287525382 2.0000000001483 133 2.0000000001483 Z " fill-rule="nonzero" fill="#445382" stroke="none" transform="matrix(1 0 0 1 1592 161 )" />
</g>
</svg>

BIN
src/views/MicroExhibition/child/img/u854.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

194
src/views/MicroExhibition/child/index.vue
View File

@ -2,73 +2,129 @@
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备大屏展示系统'" :titleTip="''"
:typeFun="['time']" :alarmType="[]"></header2>
<header2
ref="headerref"
:width="'100%'"
:height="'100px'"
:title="'微工厂设备物联大屏'"
:titleTip="''"
:typeFun="['time']"
:alarmType="[]"
></header2>
</div>
</div>
<div class="content">
<div class="left">
<div class="lt">
<div class="lt-title">工作效率</div>
<div class="lt-value">95</div>
<div class="ico" style="top: 30px; left: 20px; width: 20px; height: 50px"></div>
<div class="lt-title" style="top: 20px; left: 50px">稼 动 率</div>
<div class="lt-value">{{ allData.activ }}%</div>
<div class="elli_tray">
<img src="../../../assets/img/elli_tray.svg" alt="">
<img src="../../../assets/img/elli_tray.svg" alt="" />
</div>
<div class="tray">
<img src="../../../assets/img/tray.svg" alt="">
<img src="../../../assets/img/tray.svg" alt="" />
</div>
<ul class="scale">
<li style="top:44%;left:26%;">10</li>
<li style="top: 47%;left: 30%;">20</li>
<li style="top: 49%;left: 34%;">30</li>
<li style="top: 52%;left: 39%;">40</li>
<li style="top: 53.5%;left: 45%;">50</li>
<li style="top: 55%;left: 51%;">60</li>
<li style="top: 56%;left: 56%;">70</li>
<li style="top: 56%;left: 62%;">80</li>
<li style="top: 55.5%;left: 67%;">90</li>
<li style="top: 54%;left: 71%;">100</li>
<li style="top: 44%; left: 26%">10</li>
<li style="top: 47%; left: 30%">20</li>
<li style="top: 49%; left: 34%">30</li>
<li style="top: 52%; left: 39%">40</li>
<li style="top: 53.5%; left: 45%">50</li>
<li style="top: 55%; left: 51%">60</li>
<li style="top: 56%; left: 56%">70</li>
<li style="top: 56%; left: 62%">80</li>
<li style="top: 55.5%; left: 67%">90</li>
<li style="top: 54%; left: 71%">100</li>
</ul>
</div>
<div class="lb">
<div
class="ico"
style="top: 580px; left: 20px; width: 20px; height: 50px"
></div>
<div class="lt-title" style="top: 570px; left: 50px">缝纫时间</div>
<LineChart class="line" :config="lineConfig"></LineChart>
</div>
</div>
<div class="right">
<Left1 class="left1"></Left1>
<Left2 class="left2"></Left2>
<Right1 class="left3"></Right1>
<Right2 class="left4"></Right2>
<Name class="name" :name="allData.name"></Name>
<Left1 class="num" :num="allData.num" :numdata="allData.numdata"></Left1>
<Left2
class="state"
:state="allData.state"
:statedata="allData.statedata"
></Left2>
<Right1
class="output"
:planoutput="allData.planoutput"
:plandata="allData.plandata"
:actoutput="allData.actoutput"
:actdata="allData.actdata"
></Right1>
<Right2 class="cut" :cut="allData.cut" :cutdata="allData.cutdata"></Right2>
</div>
<div class="imgbox">
<Img class="imgbig" :src="imgUrl" ref="imgRef"></Img>
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
import header2 from '@/components/headerBox/header2.vue'
import LineChart from './LineChart.vue'
import Left1 from './Left1.vue'
import Left2 from './Left2.vue'
import Right1 from './Right1.vue'
import Right2 from './Right2.vue'
<script setup lang="ts">
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
import header2 from "@/components/headerBox/header2.vue";
import LineChart from "./LineChart.vue";
import Left1 from "./Left1.vue";
import Left2 from "./Left2.vue";
import Right1 from "./Right1.vue";
import Right2 from "./Right2.vue";
import Name from "./Name.vue";
import Img from "./Img.vue";
let allData = reactive({
activ: 95,
name: "一体型四自动高速平缝机",
num: "设备编号",
numdata: "123456",
state: "设备状态",
statedata: "待机",
planoutput: "计划日产量",
plandata: "",
actoutput: "实际日产量",
actdata: "",
cut: "剪线次数",
cutdata: "",
imgUrl: "",
});
let imgRef = ref(null);
onMounted(() =>{
});
let lineConfig = {
title: '工作时间'
}
title: "时间趋势",
data: [120, 0, 101, 134, 0, 230, 210],
xAxis: [
"10-26 10:41:26",
"10-26 10:41:26",
"10-26 10:41:26",
"10-26 10:41:26",
"10-26 10:41:26",
"10-26 10:41:26",
"10-26 10:41:26",
],
};
// 折线图接口
</script>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
color: #cfebeb;
background-color: #0e0e0e;
}
.header {
@ -84,7 +140,6 @@ let lineConfig = {
justify-content: space-between;
align-items: center;
}
.left {
width: 780px;
height: 100%;
@ -98,6 +153,7 @@ let lineConfig = {
position: relative;
width: 1130px;
height: 100%;
right: 30px;
}
.lt,
@ -113,11 +169,11 @@ let lineConfig = {
.elli_tray {
border-width: 0px;
position: absolute;
top: 51%;
left: 50%;
width: 351px;
height: 46px;
transform: rotate(6deg) translate(-50%, -50%);
top: 58%;
left: 45%;
width: 380px;
height: 60px;
transform: rotate(7deg) translate(-50%, -50%);
z-index: 2;
}
@ -129,29 +185,32 @@ img {
.tray {
border-width: 0px;
position: absolute;
top: 60%;
left: 50%;
width: 426px;
height: 95px;
top: 68%;
left: 45%;
width: 500px;
height: 120px;
transform: rotate(8deg) translate(-50%, -50%);
}
.ico {
position: absolute;
background-image: url("./img/u455.svg");
background-repeat: no-repeat;
}
.lt-title {
position: absolute;
top: 10px;
left: 20px;
font-size: 30px;
font-size: 28px;
font-weight: bold;
color: #20aec5;
color: #33ccff;
z-index: 3;
}
.lt-value {
position: absolute;
top: 40%;
left: 50%;
left: 48%;
transform: translate(-50%, -50%);
font-size: 110px;
font-weight: bold;
color: #20aec5;
color: rgb(9, 238, 216);
z-index: 3;
}
@ -163,12 +222,13 @@ img {
font-size: 18px;
color: #3366ff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
top: 58%;
left: 45%;
}
.scale li {
text-align: center;
top: -20px;
line-height: 30px;
position: absolute;
z-index: 3;
@ -177,33 +237,47 @@ img {
width: 100%;
height: 100%;
}
.left1 {
.num {
position: absolute;
width: 247px;
height: 100%;
left: 0px;
top: 0px;
}
.left2 {
.state {
position: absolute;
width: 247px;
height: 100%;
left: 247px;
top: 0px;
}
.left3 {
.output {
position: absolute;
width: 247px;
height: 100%;
left: 636px;
top: 0px;
}
.left4 {
.cut {
position: absolute;
width: 247px;
height: 100%;
left: 883px;
top: 0px;
}
.imgbox {
position: absolute;
display: flex; /* 创建一个Flex容器 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
width: 33%;
height: 37%;
right: 14.5%;
top: 62%;
border: 1px solid #fff;
}
.imgbig {
max-width: 100%; /* 图片最大宽度为div的宽度 */
height: auto; /* 高度自适应 */
}
</style>