展会设备大屏
This commit is contained in:
hzz
parent
5ff05f1279
commit
d263d43951
19
src/assets/img/elli_tray.svg
Normal file
19
src/assets/img/elli_tray.svg
Normal 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,iVBORw0KGgoAAAANSUhEUgAAAV8AAAAuCAYAAACPvBpRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAtUSURBVHhe7Z1NiBvnGcef550ZSbZVRyUbopItK8gejLupHZzDHgKbUIO3jaGBNNBDb6WnHnrKuZSeego99NT21kOhDqTgtOvQQgw+5GBTu9kmW9iCDAoooICSyrakmXmf/p9XI+96uxvL9srej+dnz75fo4/Vx2//82pmxGQcLuaWKuVapV60yKdRzXFeK5rkc66T5JWiScwyR96HughVWATjEtr3wFQRT3WWvOjYhI4J1SkfXc8kMNMMCVW3va0HgaknxJ2iNREcuTaK/qi1BRftOCbOtXG/744JRzeLqt6Pvhtdb8BL1HVJ3i2aNOj223Tz8va3aRxITL57nZNvVsvJlzNe4qpTIQFPMosidsRVEXla+2CrWcgqFhYIa7QewHocM6GPedwHoCO/SWoQnNzThiQ3O89vEqr26/h2YIx3GAsOLSQ+MXqhR5YvXuK6PAgOj+wOFxF2uL6isZWtYy4qKkD7dbyA8WRuvhHR9vjCIh08Qz1UMrRaoY+pw4I+pgzjoY+ZP8drAetRhnsc+vA0dhxnvUF6vEMf/0nHjD3KxrNvTIelpbjcrcx6QsIkruHNUYehkCCDII9BLTOsEg1JT6qo19BXgzBreHeFRIp6eFcF7Y49qBVcSPtGY1rVEgv+jyUYpBokFhqhz9jjjCUOOQdJgw3p40fRNyq1X5/wkehHBfowBoHrc99F2UUNpXRxnT2sDrlLD326RXALL6MObqCPi7TxCus6yruDWr9Fly+r/I0pUTyLxqQceWF5NmPdVCekUYhUfBUJ5Dm8/EcSJWmMSrQZ40QVfXNwrgIsEuY4WYZS26M6NulDG2l2Q6ShNIyHJAgaC0q8TlGFlEO5IfiNOuKBrq/rRCghZLwU26gVsubmWNqe3GfMvqeJW4Ude9+589HKKKUbE6EPuVGk01yS2bFUHfln8fA0kArqmlJDGTbj0Rs2n4sUOhao9gVfQqKoa9eoD5XQMIx9RiHr8TSMoLwr6lDXdaINYaMPr/RWSNZI0SjbuFRTRe1EOp65HXHaslQ9Qh++A4+m1ZTjBv5SN/CCmMVvPYcs2sALQ9szeOFgKdJpEOeoHC86P3pPn2EY26NSDikbIlYph7aKGn1FPaRqTx28D9t417Wg7SasfRPCbom4ZiJZ8zCk6AMh36Mnv1fPEz4BbapM5/BrNaBLyJUb+AVVtnFIq1hEPzzSTXmVaq5t7UdbE6xhGI8HTdAq6SDjQtChHY0ErYtQU5OzTndoiQD0qYtc0+X52kGQ876Rrwp2GLt5lvwEnpzn8WSgzvNIrPP4Nar6AZNkRTINgi02/3X3pjBvqothGPsGCJgh5jDdMV7QVkGjr4/39DoEvY5UvY73+7+Fo7VS5tdvf/yXu7v07WX2nHxLC+dPUEQnYMwF6PLUVsHqvqKSQ65BqoVotW7zqoZxeBjPRauco1FaZi21zdzDj3VhWcdaNzC4SjmtDVcvrhWX3hM8OfmeOT9TTv1LeKAgWvoWgulpSBZ1SBZCDYk1ywrJmmANw5gQFXOYyhjJmOJ4nKBVymuw3nWs9S8WWRsk7ipdu/hAB+HsFo9HvnqgQOn2oohgoTO40ZfxAM2EqYJxis20LBaTrGEYu02QsgoZSzwSs6ZlIe7AOFcwfI2ZPxxIfJVu/Pnu0YfTYvflu7QUJ91jCyJu0bGcgUkXcTMLusu3aJJNM2IIVlKVLKRrGIbxJNH9mxNIWKWcaEqOEZBpFT+uqpAREa+ktVuru7173K7IVz8MSxNaxpWdg2OXyVGNM/0ADPdVE22YPkBpGIaxHxinYywcJySx62GDfIW8XIKaV3Zjb4uHk284KKH6MnLrOVbZMp0OUwhDTbYpZIsl7GFgGIZxANApiyQZJWOU4nhViC86okuDWu/Kw6TiyeU7t1Qp1b62TCJvEMvruGSVhkizY9lqwjUMwzgMhCkKlTGWUtQjz+9C0O8Mu/9dmfTsdPeVb/Lt1xaY5aeo/ghLVedsaQDZpkP7YMwwDCOk4hJROSRjPZPcH0T4N+k/31sdrbA9O8q3dOr86yL+Z8z8CvuMpA/ZDky4hmEYO6IiLpeIKyWE4egDZvfr4Y2L7xaj9/B/8i2ffu2siLyNoQWdUuB+n0TTrmEYhjExnMQklQpRnFxnR28Nrr/3t2IosCHfU9+vJZT+lol/EOZwb92xPRQMwzAeFd1r4ugRkji+kFLyk/E+xEG+ekivOPmrI2nIrdtEw6F2G4ZhGLtFqQQJH22SuO/qoc482keX/+F8Xpcve6PzJRiGYRi7j54c6PixdpxHL0buG/O/ZJKz8oV+ZZSJ1zAMY2roDguDrCpHS3Hkjn/zd5Rlx8NRaIZhGMaUEfyjWRfmd4dp0WkYhmFMHXjXUSm5gKXoMQzDMKYOvOuS5Oiv6Ei5Hb7WwzAMw5gqQtxW77rwlRs+fpWOV5vhkzjDMAxjKghzk5869qp6N9hW9zkbRuUX+anjF8K+aIZhGMauIknpQvr1mReHq++HrzPa/vDiNH2bbt1ZsCPcDMMwHpE4us6Vo28NPrm0w+HFW9AT69Bw+HPq3zltp4s0DMN4QCBdqhz5xfCT9yc7sc5W4heWF13uf0yD9IeUDqt2VjPDMIwdYOpRqfzHKC7//s7ayodF77bcV753OflmtZLcej0fDN9w6XBZ0rxiIjYMw6A+J/GKL5ffSXn4Ln18Wc/pe18ml+9mIOJS3HtF0uwcpflZztITNj9sGMZhQZxbpyRZ4XJyaSiDDyYV7mYeTr5bKJ861yDvzsow/Q5l2TJlac2+w80wjAMDU0/i0ook8d+jSrQyuHGpWYw8NLsi33sovjre5fkikvEZyv0ihGx7ThiGsX9wbpXi+Con7pp3lSvpM3v0q+Pvy8k3q+XSbch4uCjD7Azn+cuU+Rk7i5phGE8c5g7H0RWJomsclz4clCpXxyc8nyaPR77bceb8TDn1L0mOVJzlpyj1C+RTJGSJ9QA8wzCMXSajOFoljlcpoRscJavJkdLV3rWLnWL8sfLk5LsdxZRFlPuFPEtPEUrOckjZz9pJ3g3DmBRx3GIXrUoC0UbRDeJkdRpTB4/C3pLvTswtVZKnqvPs03nKCUv+vHg/z3l+wsRsGIeTINgoWqPIrZPj/5BL1iWR9fSL4TrdvNwvVtuz7A/5fhWbxZxRQySfUyFzLrOoN1DWbW7ZMPYfevYvjlxLXNSkiJBk+dP9JtivYv/L934sLcXlL8sNGvKsF4KMNSlncyI063zekFw/+CP78M8wHifMHSxtcq5FUdSCiW6Ki1sudk0SaQ2eGTT30hTBNDj48p0EFXS3MssCQad+xhPXneTPksrZS91B0F6kziI2xWEYX8FortV1oBYVa5si1/TsPnMRdxxFbaTW1qDWbx10sU6CyfcBOfLC8mzGUc3l2YzPuU6UVfEgPic+n2FPVSFpuDyvQtEzSNkYJzsM29iv9AXpNMhUz1mAzX+0e9j876hQUfYckquXqBtHvnPno5VWcTljAky+06ZI1T6FsDmvBWFLXsEDP4syQlZoUA5ls06J5DE0rek6ZmJL2cauoGmUhDJIVDfvM5VoGEAqRTDIdXMf/X0XubaK1CV519Lp9DH57mXmlirlWqXuJa5q0tYunbem3JNjQcr2TxP8DHWH1K0JW+XNkDexVNCs67p4kmv4YYd87xeYukIcdvJnCBFFn5gzYsgTjNNnGHf0OYQZzisQ5kuBRwp17HqDbr+93z+UOsiYfA8bhdCLFo0TedGkcTIvmnjPi+49EuqQeYVF9x7ZRuJMFfFUZ9nmMHIdK/4QTAqzfgg6+oPySOgx+TQS1aTcFd52uGjHMXGujft9d0w4ullU9X6EZFm08HdwlDCLJpkoDxtE/wORHFqEAjglbgAAAABJRU5ErkJggg==" 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
12
src/assets/img/tray.svg
Normal 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>
|
||||||
@ -268,11 +268,23 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
name: "MicEnvironment",
|
name: "MicEnvironment",
|
||||||
component: () => import("../views/MicEnvironment/index.vue"),
|
component: () => import("../views/MicEnvironment/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/MicroExhibition",
|
||||||
|
children: [
|
||||||
{
|
{
|
||||||
path: "/MicroExhibition",
|
path: "/MicroExhibition",
|
||||||
name: "MicroExhibition",
|
name: "MicroExhibition",
|
||||||
component: () => import("../views/MicroExhibition/index.vue"),
|
component: () => import("../views/MicroExhibition/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/MicroExhibition/:id",
|
||||||
|
name: "MicroExhibitionChild",
|
||||||
|
component: () => import("../views/MicroExhibition/child/index.vue"),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
98
src/views/MicroExhibition/child/LineChart.vue
Normal file
98
src/views/MicroExhibition/child/LineChart.vue
Normal 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>
|
||||||
170
src/views/MicroExhibition/child/index.vue
Normal file
170
src/views/MicroExhibition/child/index.vue
Normal 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>
|
||||||
@ -5,6 +5,16 @@
|
|||||||
|
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
import { ref, getCurrentInstance, onMounted } from 'vue'
|
||||||
|
|
||||||
|
|
||||||
|
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;
|
||||||
@ -12,7 +22,7 @@ const setCharts = ()=>{
|
|||||||
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: 'Stacked Line'
|
text: prop.config.title
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis'
|
trigger: 'axis'
|
||||||
|
|||||||
39
src/views/MicroExhibition/components/PbjCard.vue
Normal file
39
src/views/MicroExhibition/components/PbjCard.vue
Normal 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>
|
||||||
@ -52,7 +52,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="rt">
|
<div class="rt">
|
||||||
<Card title="富 怡 全 自 动 铺 布 机 (梭 织)"></Card>
|
<Card title="富 怡 全 自 动 铺 布 机 (梭 织)">
|
||||||
|
<PbjCard></PbjCard>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
<div class="rb">
|
<div class="rb">
|
||||||
<Card title="缝纫设备">
|
<Card title="缝纫设备">
|
||||||
@ -73,6 +75,7 @@ import LineChart from './components/LineChart.vue'
|
|||||||
import BarChart from './components/BarChart.vue'
|
import BarChart from './components/BarChart.vue'
|
||||||
import ringChart from "./components/ringChart.vue";
|
import ringChart from "./components/ringChart.vue";
|
||||||
import DevCard from "./components/DevCard.vue";
|
import DevCard from "./components/DevCard.vue";
|
||||||
|
import PbjCard from './components/PbjCard.vue';
|
||||||
import scrollBoard from "./components/scrollBoard.vue";
|
import scrollBoard from "./components/scrollBoard.vue";
|
||||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||||
|
|
||||||
@ -92,6 +95,7 @@ let titleTip = [
|
|||||||
name: t('messages.disconnection'),
|
name: t('messages.disconnection'),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
document.title = '设备大屏展示系统';
|
||||||
let ringData = ref([]);
|
let ringData = ref([]);
|
||||||
ringData.value = [
|
ringData.value = [
|
||||||
{ name: '工作', value: 7 },
|
{ name: '工作', value: 7 },
|
||||||
@ -250,6 +254,7 @@ h2 {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-title {
|
.progress-title {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user