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="s1"></div>
|
||||||
<div class="h1"></div>
|
<div class="h1"></div>
|
||||||
<div class="s2"></div>
|
<div class="s2"></div>
|
||||||
<div class="title">{{title}}</div>
|
<div class="title">{{num}}</div>
|
||||||
<div class="val">{{ val }}</div>
|
<div class="val">{{ numdata }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import Pan from './Pan.vue';
|
import Pan from './Pan.vue';
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
title: {
|
num: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '机架号'
|
required: true,
|
||||||
},
|
},
|
||||||
val: {
|
numdata: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'RP2011001#'
|
required: true,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -70,7 +70,7 @@ const prop = defineProps({
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #B2EDED;
|
color: #B2EDED;
|
||||||
top: 410px;
|
top: 410px;
|
||||||
left: 56px;
|
left: 40px;
|
||||||
}
|
}
|
||||||
.val {
|
.val {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -4,21 +4,21 @@
|
|||||||
<div class="s1"></div>
|
<div class="s1"></div>
|
||||||
<div class="h1"></div>
|
<div class="h1"></div>
|
||||||
<div class="s2"></div>
|
<div class="s2"></div>
|
||||||
<div class="title">{{ title }}</div>
|
<div class="title">{{ state }}</div>
|
||||||
<div class="val">{{ val }}</div>
|
<div class="val">{{ statedata }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import Pan from './Pan.vue';
|
import Pan from './Pan.vue';
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
title: {
|
state: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '设备状态'
|
required: true,
|
||||||
},
|
},
|
||||||
val: {
|
statedata: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '工作中'
|
required: true,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,93 +1,102 @@
|
|||||||
<template>
|
<template>
|
||||||
<div ref="LChartRef"></div>
|
<div ref="LChartRef" class="chart-container"></div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang="ts">
|
||||||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
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);
|
let LChartRef = ref(null);
|
||||||
const { proxy } = getCurrentInstance() as any;
|
const { proxy } = getCurrentInstance() as any;
|
||||||
let charts = null;
|
let charts = null;
|
||||||
const setCharts = ()=>{
|
const setCharts = () => {
|
||||||
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
charts = proxy.$echarts.init(LChartRef.value, "dark");
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
backgroundColor: "#0E0E0E",
|
||||||
text: prop.config.title,
|
title: {
|
||||||
textStyle:{
|
text: prop.config.title,
|
||||||
fontSize: 30,
|
textStyle: {
|
||||||
color: '#20aec5'
|
fontSize: 18,
|
||||||
},
|
color: "#33CCFF",
|
||||||
left: '20px'
|
},
|
||||||
|
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']
|
},
|
||||||
},
|
series: [
|
||||||
grid: {
|
{
|
||||||
left: '3%',
|
name: "Email",
|
||||||
right: '4%',
|
type: "line",
|
||||||
bottom: '3%',
|
data:prop.config.data,
|
||||||
containLabel: true
|
},
|
||||||
},
|
],
|
||||||
xAxis: {
|
};
|
||||||
type: 'category',
|
|
||||||
boundaryGap: false,
|
charts.setOption(option);
|
||||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
};
|
||||||
},
|
|
||||||
yAxis: {
|
// watch(() => prop.config.data,(newVal) => {
|
||||||
type: 'value'
|
// data = newVal
|
||||||
},
|
// charts.setOption({
|
||||||
series: [
|
// xAxis: {
|
||||||
{
|
// type: "category",
|
||||||
name: 'Email',
|
// boundaryGap:false,
|
||||||
type: 'line',
|
// data:prop.config.xAxis
|
||||||
data: [120, 132, 101, 134, 90, 230, 210]
|
// },
|
||||||
},
|
// series: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);
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setCharts()
|
setCharts();
|
||||||
})
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.chart-container {
|
||||||
|
width: 820px;
|
||||||
|
height: 470px;
|
||||||
|
}
|
||||||
.cc {
|
.cc {
|
||||||
width: 400px;
|
width: 500px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
</style>
|
</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>
|
<template>
|
||||||
<div class="left1">
|
<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>
|
<Pan class="pan1"></Pan>
|
||||||
<div class="s1"></div>
|
<div class="s1"></div>
|
||||||
<div class="h1"></div>
|
<div class="h1"></div>
|
||||||
<div class="s2"></div>
|
<div class="s2"></div>
|
||||||
<div class="title">{{ title }}</div>
|
<div class="title">{{ planoutput }}</div>
|
||||||
<div class="val">{{ val }}</div>
|
<div class="val">{{ plandata }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import Pan from './Pan.vue';
|
import Pan from './Pan.vue';
|
||||||
|
import Pan2 from './Pan2.vue'
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
title: {
|
planoutput: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '压脚次数'
|
required: true,
|
||||||
},
|
},
|
||||||
val: {
|
plandata: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '10次'
|
required: true,
|
||||||
|
},
|
||||||
|
actoutput: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
plandata: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -36,6 +53,13 @@ const prop = defineProps({
|
|||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
|
.pan2 {
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height: 120px;
|
||||||
|
left: 265px;
|
||||||
|
top: -40px;
|
||||||
|
}
|
||||||
.s1 {
|
.s1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 258px;
|
width: 258px;
|
||||||
@ -45,6 +69,16 @@ const prop = defineProps({
|
|||||||
top: 343px;
|
top: 343px;
|
||||||
transform: rotate(90deg);
|
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 {
|
.h1 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
@ -53,6 +87,14 @@ const prop = defineProps({
|
|||||||
left: 35px;
|
left: 35px;
|
||||||
top: 467px;
|
top: 467px;
|
||||||
}
|
}
|
||||||
|
.h12 {
|
||||||
|
position: absolute;
|
||||||
|
width: 135px;
|
||||||
|
height: 6px;
|
||||||
|
background-image: url('./img/u829p001.svg');
|
||||||
|
left: 210px;
|
||||||
|
top: 99px;
|
||||||
|
}
|
||||||
.s2 {
|
.s2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 124px;
|
width: 124px;
|
||||||
@ -62,6 +104,16 @@ const prop = defineProps({
|
|||||||
top: 528px;
|
top: 528px;
|
||||||
transform: rotate(90deg);
|
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 {
|
.title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
|
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
|
||||||
@ -70,7 +122,7 @@ const prop = defineProps({
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #B2EDED;
|
color: #B2EDED;
|
||||||
top: 240px;
|
top: 240px;
|
||||||
left: 42px;
|
left: 25px;
|
||||||
}
|
}
|
||||||
.val {
|
.val {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -83,4 +135,26 @@ const prop = defineProps({
|
|||||||
top: 55px;
|
top: 55px;
|
||||||
left: 0;
|
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>
|
</style>
|
||||||
|
|||||||
@ -4,21 +4,21 @@
|
|||||||
<div class="s1"></div>
|
<div class="s1"></div>
|
||||||
<div class="h1"></div>
|
<div class="h1"></div>
|
||||||
<div class="s2"></div>
|
<div class="s2"></div>
|
||||||
<div class="title">{{ title }}</div>
|
<div class="title">{{ cut }}</div>
|
||||||
<div class="val">{{ val }}</div>
|
<div class="val">{{ cutdata }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import Pan from './Pan.vue';
|
import Pan from './Pan.vue';
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
title: {
|
cut: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '剪线次数'
|
required: true,
|
||||||
},
|
},
|
||||||
val: {
|
cutdata: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '20次'
|
required: true,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -70,7 +70,7 @@ const prop = defineProps({
|
|||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #B2EDED;
|
color: #B2EDED;
|
||||||
top: 410px;
|
top: 410px;
|
||||||
left: 34px;
|
left: 40px;
|
||||||
}
|
}
|
||||||
.val {
|
.val {
|
||||||
width: 100%;
|
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>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备大屏展示系统'" :titleTip="''"
|
<header2
|
||||||
:typeFun="['time']" :alarmType="[]"></header2>
|
ref="headerref"
|
||||||
</div>
|
:width="'100%'"
|
||||||
</div>
|
:height="'100px'"
|
||||||
<div class="content">
|
:title="'微工厂设备物联大屏'"
|
||||||
<div class="left">
|
:titleTip="''"
|
||||||
<div class="lt">
|
:typeFun="['time']"
|
||||||
<div class="lt-title">工作效率</div>
|
:alarmType="[]"
|
||||||
<div class="lt-value">95</div>
|
></header2>
|
||||||
<div class="elli_tray">
|
</div>
|
||||||
<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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang="ts">
|
||||||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
|
||||||
import header2 from '@/components/headerBox/header2.vue'
|
import header2 from "@/components/headerBox/header2.vue";
|
||||||
import LineChart from './LineChart.vue'
|
import LineChart from "./LineChart.vue";
|
||||||
import Left1 from './Left1.vue'
|
import Left1 from "./Left1.vue";
|
||||||
import Left2 from './Left2.vue'
|
import Left2 from "./Left2.vue";
|
||||||
import Right1 from './Right1.vue'
|
import Right1 from "./Right1.vue";
|
||||||
import Right2 from './Right2.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 = {
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.container {
|
.container {
|
||||||
height: 1080px;
|
height: 1080px;
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
color: #20aec5;
|
color: #cfebeb;
|
||||||
background-color: #100c2a;
|
background-color: #0e0e0e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 1920px;
|
width: 1920px;
|
||||||
height: 980px;
|
height: 980px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
width: 780px;
|
width: 780px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 1130px;
|
width: 1130px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
right: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lt,
|
.lt,
|
||||||
.lb {
|
.lb {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48%;
|
height: 48%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lt {
|
.lt {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.elli_tray {
|
.elli_tray {
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 51%;
|
top: 58%;
|
||||||
left: 50%;
|
left: 45%;
|
||||||
width: 351px;
|
width: 380px;
|
||||||
height: 46px;
|
height: 60px;
|
||||||
transform: rotate(6deg) translate(-50%, -50%);
|
transform: rotate(7deg) translate(-50%, -50%);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tray {
|
.tray {
|
||||||
border-width: 0px;
|
border-width: 0px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 60%;
|
top: 68%;
|
||||||
left: 50%;
|
left: 45%;
|
||||||
width: 426px;
|
width: 500px;
|
||||||
height: 95px;
|
height: 120px;
|
||||||
transform: rotate(8deg) translate(-50%, -50%);
|
transform: rotate(8deg) translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.ico {
|
||||||
|
position: absolute;
|
||||||
|
background-image: url("./img/u455.svg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
.lt-title {
|
.lt-title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
font-size: 28px;
|
||||||
left: 20px;
|
font-weight: bold;
|
||||||
font-size: 30px;
|
color: #33ccff;
|
||||||
font-weight: bold;
|
z-index: 3;
|
||||||
color: #20aec5;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
}
|
||||||
.lt-value {
|
.lt-value {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
left: 50%;
|
left: 48%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
font-size: 110px;
|
font-size: 110px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #20aec5;
|
color: rgb(9, 238, 216);
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scale {
|
.scale {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #3366ff;
|
color: #3366ff;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
top: 50%;
|
top: 58%;
|
||||||
left: 50%;
|
left: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scale li {
|
.scale li {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 30px;
|
top: -20px;
|
||||||
position: absolute;
|
line-height: 30px;
|
||||||
z-index: 3;
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
}
|
}
|
||||||
.line {
|
.line {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.num {
|
||||||
.left1 {
|
position: absolute;
|
||||||
position: absolute;
|
width: 247px;
|
||||||
width: 247px;
|
height: 100%;
|
||||||
height: 100%;
|
left: 0px;
|
||||||
left: 0px;
|
top: 0px;
|
||||||
top: 0px;
|
|
||||||
}
|
}
|
||||||
.left2 {
|
.state {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 247px;
|
width: 247px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 247px;
|
left: 247px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
.left3 {
|
.output {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 247px;
|
width: 247px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 636px;
|
left: 636px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
.left4 {
|
.cut {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 247px;
|
width: 247px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 883px;
|
left: 883px;
|
||||||
top: 0px;
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user