update
This commit is contained in:
123@123.com
parent
7867e2562d
commit
5758c19ac7
24
src/views/MicroExhibition/child/Img.vue
Normal file
24
src/views/MicroExhibition/child/Img.vue
Normal 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>
|
||||
@ -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%;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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<{
|
||||
config: {
|
||||
name: string;
|
||||
data: any;
|
||||
xAxis: string[];
|
||||
};
|
||||
}>();
|
||||
|
||||
const prop = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: {
|
||||
title:''
|
||||
}
|
||||
}
|
||||
})
|
||||
let LChartRef = ref(null);
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let charts = null;
|
||||
const setCharts = ()=>{
|
||||
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
||||
let option = {
|
||||
title: {
|
||||
text: prop.config.title,
|
||||
textStyle:{
|
||||
fontSize: 30,
|
||||
color: '#20aec5'
|
||||
},
|
||||
left: '20px'
|
||||
const setCharts = () => {
|
||||
charts = proxy.$echarts.init(LChartRef.value, "dark");
|
||||
let option = {
|
||||
backgroundColor: "#0E0E0E",
|
||||
title: {
|
||||
text: prop.config.title,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
color: "#33CCFF",
|
||||
},
|
||||
left: "80%",
|
||||
top: "-2px",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "6%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
show: true, // 显示横坐标轴线段
|
||||
lineStyle: {
|
||||
color: "#5DB6F5", // 设置线段颜色
|
||||
width: 1, // 设置线段宽度
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
data:prop.config.xAxis
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "分钟(min）",
|
||||
axisLine: {
|
||||
show: true, // 设置纵坐标线是否显示
|
||||
lineStyle: {
|
||||
color: "#5DB6F5", // 设置纵坐标线的颜色
|
||||
width: 1, // 设置纵坐标线的宽度
|
||||
},
|
||||
legend: {
|
||||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
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]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Email",
|
||||
type: "line",
|
||||
data:prop.config.data,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
charts.setOption(option);
|
||||
};
|
||||
|
||||
// watch(() => prop.config.data,(newVal) => {
|
||||
// data = newVal
|
||||
// charts.setOption({
|
||||
// xAxis: {
|
||||
// type: "category",
|
||||
// boundaryGap:false,
|
||||
// data:prop.config.xAxis
|
||||
// },
|
||||
// series:data
|
||||
// })
|
||||
// })
|
||||
|
||||
charts.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
setCharts()
|
||||
})
|
||||
setCharts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
width: 820px;
|
||||
height: 470px;
|
||||
}
|
||||
.cc {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
||||
42
src/views/MicroExhibition/child/Name.vue
Normal file
42
src/views/MicroExhibition/child/Name.vue
Normal 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
35
src/views/MicroExhibition/child/Pan2.vue
Normal 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>
|
||||
@ -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>
|
||||
|
||||
@ -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
6
src/views/MicroExhibition/child/img/u455.svg
Normal 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
6
src/views/MicroExhibition/child/img/u457.svg
Normal 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
7
src/views/MicroExhibition/child/img/u506.svg
Normal 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
6
src/views/MicroExhibition/child/img/u585.svg
Normal 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
7
src/views/MicroExhibition/child/img/u829p000.svg
Normal 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
7
src/views/MicroExhibition/child/img/u829p001.svg
Normal 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
7
src/views/MicroExhibition/child/img/u829p002.svg
Normal 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
BIN
src/views/MicroExhibition/child/img/u854.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
@ -1,209 +1,283 @@
|
||||
<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="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<div class="lt-title">工作效率</div>
|
||||
<div class="lt-value">95</div>
|
||||
<div class="elli_tray">
|
||||
<img src="../../../assets/img/elli_tray.svg" alt="">
|
||||
</div>
|
||||
<div class="tray">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<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="" />
|
||||
</div>
|
||||
<div class="tray">
|
||||
<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>
|
||||
</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">
|
||||
<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;
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #cfebeb;
|
||||
background-color: #0e0e0e;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 1920px;
|
||||
height: 980px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 1920px;
|
||||
height: 980px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 780px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 780px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
width: 1130px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 1130px;
|
||||
height: 100%;
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.lt,
|
||||
.lb {
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
}
|
||||
|
||||
.lt {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.elli_tray {
|
||||
border-width: 0px;
|
||||
position: absolute;
|
||||
top: 51%;
|
||||
left: 50%;
|
||||
width: 351px;
|
||||
height: 46px;
|
||||
transform: rotate(6deg) translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
border-width: 0px;
|
||||
position: absolute;
|
||||
top: 58%;
|
||||
left: 45%;
|
||||
width: 380px;
|
||||
height: 60px;
|
||||
transform: rotate(7deg) translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tray {
|
||||
border-width: 0px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
width: 426px;
|
||||
height: 95px;
|
||||
transform: rotate(8deg) translate(-50%, -50%);
|
||||
border-width: 0px;
|
||||
position: absolute;
|
||||
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-weight: bold;
|
||||
color: #20aec5;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #33ccff;
|
||||
z-index: 3;
|
||||
}
|
||||
.lt-value {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 110px;
|
||||
font-weight: bold;
|
||||
color: #20aec5;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 48%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 110px;
|
||||
font-weight: bold;
|
||||
color: rgb(9, 238, 216);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.scale {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
color: #3366ff;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
color: #3366ff;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 58%;
|
||||
left: 45%;
|
||||
}
|
||||
|
||||
.scale li {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
text-align: center;
|
||||
top: -20px;
|
||||
line-height: 30px;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left1 {
|
||||
position: absolute;
|
||||
width: 247px;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
.num {
|
||||
position: absolute;
|
||||
width: 247px;
|
||||
height: 100%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
width: 247px;
|
||||
height: 100%;
|
||||
left: 247px;
|
||||
top: 0px;
|
||||
.state {
|
||||
position: absolute;
|
||||
width: 247px;
|
||||
height: 100%;
|
||||
left: 247px;
|
||||
top: 0px;
|
||||
}
|
||||
.left3 {
|
||||
position: absolute;
|
||||
width: 247px;
|
||||
height: 100%;
|
||||
left: 636px;
|
||||
top: 0px;
|
||||
.output {
|
||||
position: absolute;
|
||||
width: 247px;
|
||||
height: 100%;
|
||||
left: 636px;
|
||||
top: 0px;
|
||||
}
|
||||
.left4 {
|
||||
position: absolute;
|
||||
width: 247px;
|
||||
height: 100%;
|
||||
left: 883px;
|
||||
top: 0px;
|
||||
.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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user