展会设备大屏，组件开发
This commit is contained in:
hzz
parent
f25827fa51
commit
5ff05f1279
12
src/assets/img/title_bg.svg
Normal file
12
src/assets/img/title_bg.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="68px" height="30px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="15" x2="68" y2="15" id="LinearGradient47">
|
||||
<stop id="Stop48" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
|
||||
<stop id="Stop49" stop-color="#00ffff" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -910 -863 )">
|
||||
<path d="M 1 29.80000000000001 L 1 0.19999999999998863 L 60.811428571428486 0.19999999999998863 L 67 7.800000000000012 L 67 29.80000000000001 L 1 29.80000000000001 Z " fill-rule="nonzero" fill="url(#LinearGradient47)" stroke="none" transform="matrix(1 0 0 1 910 863 )" />
|
||||
</g>
|
||||
</svg>
|
||||
43
src/views/MicroExhibition/components/BarChart.vue
Normal file
43
src/views/MicroExhibition/components/BarChart.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div ref="LChartRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
||||
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:'工作时间'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
charts.setOption(option);
|
||||
}
|
||||
onMounted(() => {
|
||||
setCharts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cc {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
46
src/views/MicroExhibition/components/Card.vue
Normal file
46
src/views/MicroExhibition/components/Card.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<Border13>
|
||||
<div class="card-container">
|
||||
<h2 class="title">
|
||||
<DecorationFadeOut>
|
||||
{{ title }}
|
||||
</DecorationFadeOut>
|
||||
</h2>
|
||||
<div class="card-content">
|
||||
<slot ></slot>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Border13>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import Border13 from '@/components/border/Border13.vue'
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
|
||||
const prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.title {
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.card-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
83
src/views/MicroExhibition/components/DevCard.vue
Normal file
83
src/views/MicroExhibition/components/DevCard.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="dev-card">
|
||||
<div class="dev-left">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="dev-right">
|
||||
<div class="dev-box">
|
||||
<div class="dev-content dev-title">
|
||||
<div class="key" v-for="item in dev_title">{{ item }}</div>
|
||||
</div>
|
||||
<div class="dev-content" v-for="(item,index) in dev_value">
|
||||
<div>{{ item.a }}</div>
|
||||
<div>{{ item.b }}</div>
|
||||
<div>{{ item.c }}</div>
|
||||
<div>{{ item.d }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
|
||||
const prop = defineProps({
|
||||
dev_title: {
|
||||
type: Array,
|
||||
default: ['机架号','状态','布料层数','裁片数量']
|
||||
},
|
||||
dev_value: {
|
||||
type: [Object],
|
||||
default: [{a:102014422,b:'待机',c:'40层',d:'1000片'}]
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dev-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.dev-left,.dev-right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dev-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.dev-title {
|
||||
color: #FFF;
|
||||
}
|
||||
.dev-box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
.dev-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.key {
|
||||
width: 75px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
|
||||
}
|
||||
</style>
|
||||
@ -26,11 +26,6 @@ const setCharts = ()=>{
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
|
||||
85
src/views/MicroExhibition/components/ringChart.vue
Normal file
85
src/views/MicroExhibition/components/ringChart.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\ringChart.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-04-28 08:01:55
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div ref="ringRef" class="ring" ></div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import DecorationFadeOut from "@/components/decoration/DecorationFadeOut.vue";
|
||||
let { t } = useI18n();
|
||||
let ringRef = ref();
|
||||
let ringChart = null;
|
||||
const prop = defineProps({
|
||||
data: []
|
||||
})
|
||||
const init = () => {
|
||||
ringChart = proxy.$echarts.init(ringRef.value, 'dark')
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
bottom: "0",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
center: ["50%", "45%"],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
formatter(params) {
|
||||
return `${params.name}:${params.value}台`
|
||||
},
|
||||
fontSize: 20
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
top: '5%',
|
||||
data: prop.data,
|
||||
},
|
||||
],
|
||||
}
|
||||
ringChart.setOption(option)
|
||||
}
|
||||
|
||||
onUpdated(() => {
|
||||
ringChart.setOption({
|
||||
series: [
|
||||
{
|
||||
data: prop.data
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.ring {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
118
src/views/MicroExhibition/components/scrollBoard.vue
Normal file
118
src/views/MicroExhibition/components/scrollBoard.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<!--
|
||||
* @FilePath: \code\gitscreenFront\src\views\Mechanics\components\scrollBoard.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-06-13 08:33:37
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div class="box-body">
|
||||
<ZdScrollBoard ref="devList" @click="dvClick" :config="prop.config" @mouseover="dvMouseover"
|
||||
@mouseend="dvmouseleave" :style="{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}" />
|
||||
<el-tooltip v-model:visible="visible" :content="tipcontent" placement="top" effect="light" trigger="click"
|
||||
popper-class="tooltip-class" virtual-triggering :virtual-ref="triggerRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
import { useRouter } from "vue-router"
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const prop = defineProps({
|
||||
config: Object,
|
||||
})
|
||||
const router = useRouter()
|
||||
//弹窗文本
|
||||
let tipcontent = ref(null)
|
||||
//弹窗显示与隐藏
|
||||
let visible = ref(false)
|
||||
//存储弹窗dom
|
||||
let triggerRef = ref(null)
|
||||
/**
|
||||
* @函数功能: 鼠标移入组件方法
|
||||
* @param {*} value
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const dvMouseover = (value) => {
|
||||
if (value.toElement && value.toElement.innerHTML && value.toElement.className == 'ceil') {
|
||||
triggerRef.value = value.toElement
|
||||
tipcontent.value = value.toElement.innerText
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
};
|
||||
/**
|
||||
* 点击表格事件
|
||||
*/
|
||||
const dvClick = (value) => {
|
||||
if (value.row) {
|
||||
let id = {
|
||||
'精加车间': 1,
|
||||
'机加车间': 2,
|
||||
'大件车间': 3,
|
||||
'精饰车间': 4,
|
||||
'焊接车间': 5,
|
||||
}
|
||||
|
||||
prop.config.rawData.forEach((res, index) => {
|
||||
|
||||
if (index == value.row[0] - 1) {
|
||||
router.push({
|
||||
name: "Mechanicsson",
|
||||
params: {
|
||||
id: id[value.row[2]],
|
||||
dev: res.id
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* @函数功能: 鼠标移出组件方法
|
||||
* @出口参数:
|
||||
* @函数备注:
|
||||
*/
|
||||
const dvmouseleave = () => {
|
||||
triggerRef.value = null
|
||||
tipcontent.value = null
|
||||
visible.value = false
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.box-body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.dv-scroll-board .rows .ceil) {
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
text-overflow: none
|
||||
}
|
||||
|
||||
:deep(.dv-scroll-board .rows .row-item) {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-popper.tooltip-class {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
@ -2,21 +2,21 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="t('messages.微工厂环境实时监测系统')"
|
||||
:titleTip="titleTip" :typeFun="['time']" :alarmType="[]"></header2>
|
||||
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'设备大屏展示系统'" :titleTip="titleTip"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<Border13>
|
||||
|
||||
</Border13>
|
||||
<Card title="设备状态总览">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<Border13>
|
||||
|
||||
</Border13>
|
||||
<Card title="设备列表">
|
||||
<scrollBoard :config="scrollBoardConfig"></scrollBoard>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
@ -39,18 +39,42 @@
|
||||
</div>
|
||||
</div>
|
||||
<LineChart class="cc"></LineChart>
|
||||
<div class="cb"></div>
|
||||
<div class="cb">
|
||||
<Card title="富 怡 全 自 动 裁 床">
|
||||
<DevCard>
|
||||
<div class="progress">
|
||||
<dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
|
||||
<div class="progress-title">工作时间</div>
|
||||
</div>
|
||||
</DevCard>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt">
|
||||
<Card title="富 怡 全 自 动 铺 布 机 (梭 织)"></Card>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<Card title="缝纫设备">
|
||||
<DevCard :dev_title="dev_title" :dev_value="dev_value">
|
||||
<BarChart style="width: 100%;height: 100%;"></BarChart>
|
||||
</DevCard>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
import Border13 from '@/components/border/Border13.vue'
|
||||
import Card from './components/Card.vue';
|
||||
import LineChart from './components/LineChart.vue'
|
||||
import {ref,getCurrentInstance} from 'vue'
|
||||
import BarChart from './components/BarChart.vue'
|
||||
import ringChart from "./components/ringChart.vue";
|
||||
import DevCard from "./components/DevCard.vue";
|
||||
import scrollBoard from "./components/scrollBoard.vue";
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
@ -68,7 +92,44 @@ let titleTip = [
|
||||
name: t('messages.disconnection'),
|
||||
},
|
||||
];
|
||||
let ringData = ref([]);
|
||||
ringData.value = [
|
||||
{ name: '工作', value: 7 },
|
||||
{ name: '停机', value: 6 },
|
||||
{ name: '待机', value: 3 },
|
||||
]
|
||||
let scrollBoardConfig = reactive({
|
||||
header: ['序号', '设备名称', '机架号', '工作时长', '状态'],//, '故障率'
|
||||
headerBGC: 'rgb(52, 105, 243)',
|
||||
oddRowBGC: '#100c2a',
|
||||
evenRowBGC: '#100c2a',
|
||||
wrap: [false, true, false, false, false],
|
||||
columnWidth: [80, 290, 120, 120, 120, 120],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
data: [
|
||||
[1, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[2, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[3, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[4, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[5, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[6, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[7, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[8, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[9, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
[10, '富怡全自动皮革缝纫机(任意转)整机', '10201421', '180分钟', '在线'],
|
||||
],
|
||||
rawData: []
|
||||
})
|
||||
let dev_title = ['机架号', '设备状态', '剪线次数', '压脚次数']
|
||||
let dev_value = [
|
||||
{ a: 102014422, b: '待机', c: '40层', d: '1000片' },
|
||||
{ a: 102014422, b: '待机', c: '40层', d: '1000片' },
|
||||
]
|
||||
|
||||
let pond_config = reactive({
|
||||
data: [55],
|
||||
shape: 'round'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -82,13 +143,11 @@ let titleTip = [
|
||||
.header {
|
||||
height: 150px;
|
||||
width: 1920px;
|
||||
background-color: #100c2a;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 930px;
|
||||
width: 1920px;
|
||||
background-color: #100c2a;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
@ -98,7 +157,6 @@ let titleTip = [
|
||||
.right {
|
||||
height: 930px;
|
||||
width: 600px;
|
||||
background-color: #100c2a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@ -107,7 +165,6 @@ let titleTip = [
|
||||
.center {
|
||||
flex: 1;
|
||||
height: 930px;
|
||||
background-color: #100c2a;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -131,6 +188,7 @@ let titleTip = [
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
@ -139,6 +197,7 @@ let titleTip = [
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.top-item .div_p {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
@ -147,29 +206,53 @@ let titleTip = [
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.div_p .div-p-tip {
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* color: #fff; */
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.on {
|
||||
color: #20AEC5;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.off {
|
||||
color: #797979;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
.cc,.cb {
|
||||
|
||||
.cc,
|
||||
.cb {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-color: #100c2a;
|
||||
}
|
||||
|
||||
.rt,
|
||||
.rb {
|
||||
width: 100%;
|
||||
height: 455px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.progress-title {
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user