展会设备大屏

This commit is contained in:
hzz 2023-08-25 17:54:48 +08:00
parent 5ff05f1279
commit d263d43951
8 changed files with 371 additions and 6 deletions

View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="361px" height="56px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="133px" y="340px" width="361px" height="56px" filterUnits="userSpaceOnUse" id="filter115">
<feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
<feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
<feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
<feColorMatrix type="matrix" values="0 0 0 0 0.03529411764705882 0 0 0 0 0.38823529411764707 0 0 0 0 0.4784313725490196 0 0 0 1 0 " in="shadowComposite" />
</filter>
<g id="widget116">
<image preserveAspectRatio="none" style="overflow:visible" width="351" height="46" xlink:href="data:image/png;base64,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" x="138px" y="345px" />
<path d="M 313.5 345.5 C 411.5 345.5 488.5 355.4 488.5 368 C 488.5 380.6 411.5 390.5 313.5 390.5 C 215.5 390.5 138.5 380.6 138.5 368 C 138.5 355.4 215.5 345.5 313.5 345.5 Z " stroke-width="1" stroke="#09eed8" fill="none" />
</g>
</defs>
<g transform="matrix(1 0 0 1 -133 -340 )">
<use xlink:href="#widget116" filter="url(#filter115)" />
<use xlink:href="#widget116" />
</g>
</svg>

12
src/assets/img/tray.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="426px" height="95px" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" x1="322" y1="348" x2="322" y2="443" id="LinearGradient112">
<stop id="Stop113" stop-color="#198cd1" offset="0" />
<stop id="Stop114" stop-color="#001536" offset="1" />
</linearGradient>
</defs>
<g transform="matrix(1 0 0 1 -109 -348 )">
<path d="M 322 348 C 441.28000000000003 348 535 368.9 535 395.5 C 535 422.1 441.28000000000003 443 322 443 C 202.71999999999997 443 109 422.1 109 395.5 C 109 368.9 202.71999999999997 348 322 348 Z " fill-rule="nonzero" fill="url(#LinearGradient112)" stroke="none" />
</g>
</svg>

View File

@ -270,8 +270,20 @@ const routes: Array<RouteRecordRaw> = [
},
{
path: "/MicroExhibition",
name: "MicroExhibition",
component: () => import("../views/MicroExhibition/index.vue"),
children: [
{
path: "/MicroExhibition",
name: "MicroExhibition",
component: () => import("../views/MicroExhibition/index.vue"),
},
{
path: "/MicroExhibition/:id",
name: "MicroExhibitionChild",
component: () => import("../views/MicroExhibition/child/index.vue"),
},
]
},

View File

@ -0,0 +1,98 @@
<template>
<div ref="LChartRef"></div>
</template>
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
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'
},
tooltip: {
trigger: 'axis'
},
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',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
charts.setOption(option);
}
onMounted(() => {
setCharts()
})
</script>
<style scoped>
.cc {
width: 400px;
height: 400px;
}
</style>

View File

@ -0,0 +1,170 @@
<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">
</div>
</div>
</div>
</template>
<script setup lang='ts'>
import header2 from '@/components/headerBox/header2.vue'
import LineChart from './LineChart.vue'
let lineConfig = {
title: '工作时间'
}
</script>
<style scoped>
.container {
height: 1080px;
width: 1920px;
color: #20aec5;
background-color: #100c2a;
}
.header {
height: 100px;
width: 1920px;
}
.content {
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;
}
.right {
width: 1130px;
height: 100%;
}
.lt,
.lb {
width: 100%;
height: 48%;
}
.lt {
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;
}
img {
width: 100%;
height: 100%;
}
.tray {
border-width: 0px;
position: absolute;
top: 60%;
left: 50%;
width: 426px;
height: 95px;
transform: rotate(8deg) translate(-50%, -50%);
}
.lt-title {
position: absolute;
top: 10px;
left: 20px;
font-size: 30px;
font-weight: bold;
color: #20aec5;
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;
}
.scale {
width: 100%;
height: 100%;
position: absolute;
display: flex;
font-size: 18px;
color: #3366ff;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.scale li {
text-align: center;
line-height: 30px;
position: absolute;
z-index: 3;
}
.line {
width: 100%;
height: 100%;
}
</style>

View File

@ -5,6 +5,16 @@
<script setup lang='ts'>
import { ref, getCurrentInstance, onMounted } from 'vue'
const prop = defineProps({
config: {
type: Object,
default: {
title:''
}
}
})
let LChartRef = ref(null);
const { proxy } = getCurrentInstance() as any;
let charts = null;
@ -12,7 +22,7 @@ const setCharts = ()=>{
charts = proxy.$echarts.init(LChartRef.value, 'dark')
let option = {
title: {
text: 'Stacked Line'
text: prop.config.title
},
tooltip: {
trigger: 'axis'

View File

@ -0,0 +1,39 @@
<template>
<div class="pbj-card">
<div>机架号12024467</div>
<div>工作时间</div>
<div class="demo-progress"><el-progress :text-inside="true" :stroke-width="26" :percentage="70" :format="format" />85%</div>
<div>状态工作</div>
<div>铺布层数50</div>
</div>
</template>
<script setup lang='ts'>
function format (percentage) {
return 3550;
}
</script>
<style scoped>
.pbj-card {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 18px;
font-weight: 700;
}
.demo-progress {
display: flex;
align-items: center;
color: #fff;
}
.demo-progress .el-progress--line {
width: 350px;
margin-right: 5px;
}
</style>

View File

@ -52,12 +52,14 @@
</div>
<div class="right">
<div class="rt">
<Card title="富 怡 全 自 动 铺 布 机 (梭 织)"></Card>
<Card title="富 怡 全 自 动 铺 布 机 (梭 织)">
<PbjCard></PbjCard>
</Card>
</div>
<div class="rb">
<Card title="缝纫设备">
<DevCard :dev_title="dev_title" :dev_value="dev_value">
<BarChart style="width: 100%;height: 100%;"></BarChart>
<BarChart style="width: 100%;height: 100%;"></BarChart>
</DevCard>
</Card>
</div>
@ -73,6 +75,7 @@ import LineChart from './components/LineChart.vue'
import BarChart from './components/BarChart.vue'
import ringChart from "./components/ringChart.vue";
import DevCard from "./components/DevCard.vue";
import PbjCard from './components/PbjCard.vue';
import scrollBoard from "./components/scrollBoard.vue";
import { ref, reactive, getCurrentInstance } from 'vue'
@ -92,6 +95,7 @@ let titleTip = [
name: t('messages.disconnection'),
},
];
document.title = '设备大屏展示系统';
let ringData = ref([]);
ringData.value = [
{ name: '工作', value: 7 },
@ -250,6 +254,7 @@ h2 {
flex-direction: column;
align-items: center;
}
.progress-title {
margin-top: 20px;
font-size: 16px;