展会大屏修改
This commit is contained in:
hzz
parent
62a427dbe9
commit
d4bb2a5508
@ -53,31 +53,26 @@ const setCharts = ()=>{
|
||||
{
|
||||
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]
|
||||
}
|
||||
]
|
||||
|
||||
@ -4,18 +4,30 @@
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, getCurrentInstance, onMounted } from 'vue'
|
||||
|
||||
const prop = defineProps({
|
||||
xData: {
|
||||
type: Array,
|
||||
default: ['1050910', '1050269']
|
||||
}
|
||||
})
|
||||
|
||||
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: '工作时间'
|
||||
// title: {
|
||||
// text: '工作时间'
|
||||
// },
|
||||
backgroundColor: '#0E0E0E',
|
||||
legend: {
|
||||
data: ['计划完成','实际完成']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['步进抬压脚电\r\n脑花样平缝机', '超高速全自\r\n动电脑包缝\r\n机(五线)'],
|
||||
data: prop.xData,
|
||||
// axisLabel: {
|
||||
// interval: 0, //控制X轴刻度全部显示
|
||||
// rotate: 45, //倾斜角度
|
||||
@ -26,8 +38,14 @@ const setCharts = () => {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'计划完成',
|
||||
data: [120, 200],
|
||||
type: 'bar'
|
||||
},
|
||||
{
|
||||
name:'实际完成',
|
||||
data: [130, 180],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -47,6 +47,9 @@ const prop = defineProps({
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dev-right {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.dev-right {
|
||||
display: flex;
|
||||
@ -83,5 +86,8 @@ const prop = defineProps({
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #02C1D7;
|
||||
/* background: url(@/assets/img/title_bg.svg) no-repeat center center / 100% 100%; */
|
||||
}</style>
|
||||
|
||||
@ -49,35 +49,30 @@ const setCharts = ()=>{
|
||||
{
|
||||
name: '步进抬压脚电脑花样平缝机',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '富怡全自动皮革缝纫机(任意转)整机',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '富怡电脑绣花机(精密绣花机)',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '超高速全自动电脑包缝机(五线)',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '富怡全自动缝纫机(服装机)',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
|
||||
75
src/views/MicroExhibition/components/NewBoder.vue
Normal file
75
src/views/MicroExhibition/components/NewBoder.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="newboder">
|
||||
<img class="u305" src="./../images/u305.svg" alt="">
|
||||
<img class="u290" src="./../images/u290.svg" alt="">
|
||||
<div class="title">
|
||||
<text class="title-text">{{ newTitle }}</text>
|
||||
</div>
|
||||
<div class="newboder-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { computed} from 'vue'
|
||||
let prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '裁剪设备'
|
||||
}
|
||||
})
|
||||
|
||||
let newTitle = computed(() => {
|
||||
return prop.title.split('').join(' ')
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.newboder {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.u305 {
|
||||
width: 73px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.u290 {
|
||||
width: 61px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: rotate(180deg);
|
||||
opacity: 0.5;
|
||||
z-index: 2;
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-align: left;
|
||||
font-size: 20px;
|
||||
color: #02C1D7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title-text {
|
||||
margin-left: 30px;
|
||||
padding-left: 20px;
|
||||
border-left: #02C1D7 solid 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.newboder-content {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@ -15,7 +15,6 @@
|
||||
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;
|
||||
@ -28,6 +27,7 @@ const init = () => {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
backgroundColor: '#0E0E0E',
|
||||
legend: {
|
||||
type: "scroll",
|
||||
bottom: "0",
|
||||
|
||||
12
src/views/MicroExhibition/images/u290.svg
Normal file
12
src/views/MicroExhibition/images/u290.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="61px" height="87px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42" x2="58" y2="42" id="LinearGradient191">
|
||||
<stop id="Stop192" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
|
||||
<stop id="Stop193" stop-color="#00ffff" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -1847 -1012 )">
|
||||
<path d="M 57.58803112269304 0.15649613942387075 L 26.45614035087719 1.6000000000000454 L 1 30.799999999999955 L 1 83.20000000000005 " stroke-width="2" stroke="url(#LinearGradient191)" fill="none" transform="matrix(1 0 0 1 1848 1013 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
src/views/MicroExhibition/images/u305.svg
Normal file
12
src/views/MicroExhibition/images/u305.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="73px" height="88px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="42.5" x2="70" y2="42.5" id="LinearGradient194">
|
||||
<stop id="Stop195" stop-color="#0033ff" stop-opacity="0.5294117647058824" offset="0" />
|
||||
<stop id="Stop196" stop-color="#00ffff" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -666 -592 )">
|
||||
<path d="M 69.58823529411764 1 L 30.88235294117647 1 L 0 35.19718310049065 L 0 85 " stroke-width="2" stroke="url(#LinearGradient194)" fill="none" transform="matrix(1 0 0 1 667 593 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@ -2,21 +2,21 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'150px'" :title="'设备大屏展示系统'" :titleTip="titleTip"
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'设备大屏展示系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="lt">
|
||||
<Card title="设备状态总览">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</Card>
|
||||
<NewBoder :title="'裁剪设备'">
|
||||
<DevCard :dev_title="dev_title" :dev_value="dev_value">
|
||||
<BarChart style="width: 100%;height: 100%;"></BarChart>
|
||||
</DevCard>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<Card title="设备列表">
|
||||
<scrollBoard :config="scrollBoardConfig"></scrollBoard>
|
||||
</Card>
|
||||
<NewBoder :title="'缝中设备'"></NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
@ -38,30 +38,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LineChart class="cc" :config="{ title: '工作帧数' }"></LineChart>
|
||||
<div class="cc">
|
||||
<NewBoder :title="'设备状态总览'">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<Card title="富 怡 全 自 动 裁 床">
|
||||
<DevCard :dev_title="cc_title" :dev_value="cc_value">
|
||||
<div class="progress">
|
||||
<dv-water-level-pond :config="pond_config" style="width:120px;height:120px" />
|
||||
<div class="progress-title">工作时间</div>
|
||||
</div>
|
||||
</DevCard>
|
||||
</Card>
|
||||
<NewBoder :title="'板房设备'">
|
||||
</NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rt">
|
||||
<Card title="富 怡 全 自 动 铺 布 机 (梭 织)">
|
||||
<PbjCard></PbjCard>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<Card title="缝纫设备">
|
||||
<NewBoder :title="'一次性拖鞋自动生产线'">
|
||||
<DevCard :dev_title="dev_title" :dev_value="dev_value">
|
||||
<BarChart style="width: 100%;height: 100%;"></BarChart>
|
||||
</DevCard>
|
||||
</Card>
|
||||
</NewBoder>
|
||||
</div>
|
||||
<div class="rb">
|
||||
<NewBoder :title="'座椅面套生产线'"></NewBoder>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -70,127 +66,63 @@
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
import Card from './components/Card.vue';
|
||||
import LineChart from './components/LineChart.vue'
|
||||
import NewBoder from './components/NewBoder.vue';
|
||||
import DevCard from "./components/DevCard.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, onMounted } from 'vue'
|
||||
|
||||
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import { getCismaList } from '@/http/cisma/index'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
let titleTip = [
|
||||
{
|
||||
color: "#E43961",
|
||||
name: t('messages.abnormal'),
|
||||
},
|
||||
{
|
||||
color: "#20AEC5",
|
||||
name: t('messages.NoAbnormal'),
|
||||
},
|
||||
{
|
||||
color: "#A7A6BD",
|
||||
name: t('messages.disconnection'),
|
||||
},
|
||||
];
|
||||
document.title = '设备大屏展示系统';
|
||||
let ringData = ref([]);
|
||||
ringData.value = [
|
||||
{ name: '工作', value: 7 },
|
||||
{ name: '停机', value: 6 },
|
||||
{ name: '停机', value: 7 },
|
||||
{ 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 cc_title = ['机架号', '设备状态', '布料层数', '裁片数量']
|
||||
let cc_value = ref([[102014421, '待机', '40层', '1000片']])
|
||||
|
||||
let dev_title = ['设备名称', '设备编码', '稼动率', '状态']
|
||||
let dev_value = [
|
||||
[102014423, '待机', '40层', '1000片'],
|
||||
[102014424, '待机', '40层', '1000片'],
|
||||
['全自动针梭两用铺布机', '待机', '40层', '1000片'],
|
||||
['全自动9公分电脑裁床', '待机', '40层', '1000片'],
|
||||
]
|
||||
|
||||
let pond_config = reactive({
|
||||
data: [55],
|
||||
shape: 'round'
|
||||
})
|
||||
async function reqCismaList() {
|
||||
let res: any = await getCismaList()
|
||||
if (res.code === 200) {
|
||||
store.setDevlist(res.data.devlist)
|
||||
store.setDevnum(res.data.devnum)
|
||||
changeRingData()
|
||||
changescrollBoardConfig()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function changeRingData() {
|
||||
ringData.value = [
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
}
|
||||
function changescrollBoardConfig() {
|
||||
scrollBoardConfig.data = store.devlist.map((item: any, index: number) => {
|
||||
return [index + 1, item.name, item.label, item.runTime + '分', item.status]
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
reqCismaList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
background-color: #0E0E0E;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #20aec5;
|
||||
background-color: #100c2a;
|
||||
color: #FFFFFF;
|
||||
background-color: #0E0E0E;
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 150px;
|
||||
height: 100px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 930px;
|
||||
height: 980px;
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
height: 930px;
|
||||
height: 980px;
|
||||
width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -199,19 +131,19 @@ onMounted(() => {
|
||||
|
||||
.center {
|
||||
flex: 1;
|
||||
height: 930px;
|
||||
height: 980px;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lt {
|
||||
.lt,.rt {
|
||||
width: 100%;
|
||||
height: 370px;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.lb {
|
||||
.lb,.rb {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
}
|
||||
@ -223,6 +155,14 @@ onMounted(() => {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
.cb {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
width: 30%;
|
||||
@ -253,6 +193,7 @@ h2 {
|
||||
/* color: #fff; */
|
||||
font-size: 18px;
|
||||
line-height: 1.5rem;
|
||||
color: #02C1D7;
|
||||
}
|
||||
|
||||
.on {
|
||||
@ -264,31 +205,4 @@ h2 {
|
||||
color: #797979;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.cc,
|
||||
.cb {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
294
src/views/MicroExhibition/index1.vue
Normal file
294
src/views/MicroExhibition/index1.vue
Normal file
@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<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">
|
||||
<Card title="设备状态总览">
|
||||
<ringChart :data="ringData"></ringChart>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="lb">
|
||||
<Card title="设备列表">
|
||||
<scrollBoard :config="scrollBoardConfig"></scrollBoard>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="ct">
|
||||
<div class="top-item">
|
||||
<h2>设备总数</h2>
|
||||
<div class="div_p" style="color: #ff9e5b;font-size: 40px;">
|
||||
<!-- <i class="iconfont icon-zhengque1 div-p-tip"></i> -->
|
||||
<h5>{{ store.devnum.all }} {{ t('messages.units') }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<h2>网关状态</h2>
|
||||
<div class="div_p">
|
||||
<i :class="true
|
||||
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
|
||||
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
|
||||
"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<LineChart class="cc" :config="{ title: '工作帧数' }"></LineChart>
|
||||
<div class="cb">
|
||||
<Card title="富 怡 全 自 动 裁 床">
|
||||
<DevCard :dev_title="cc_title" :dev_value="cc_value">
|
||||
<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="富 怡 全 自 动 铺 布 机 (梭 织)">
|
||||
<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>
|
||||
</DevCard>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import header2 from '@/components/headerBox/header2.vue'
|
||||
import Card from './components/Card.vue';
|
||||
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, onMounted } from 'vue'
|
||||
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
|
||||
import { getCismaList } from '@/http/cisma/index'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let { t } = useI18n();
|
||||
const store = useMicroExhibitionStore()
|
||||
let titleTip = [
|
||||
{
|
||||
color: "#E43961",
|
||||
name: t('messages.abnormal'),
|
||||
},
|
||||
{
|
||||
color: "#20AEC5",
|
||||
name: t('messages.NoAbnormal'),
|
||||
},
|
||||
{
|
||||
color: "#A7A6BD",
|
||||
name: t('messages.disconnection'),
|
||||
},
|
||||
];
|
||||
document.title = '设备大屏展示系统';
|
||||
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 cc_title = ['机架号', '设备状态', '裁片数量']
|
||||
let cc_value = ref([[102014421, '待机', '1000片']])
|
||||
let dev_value = [
|
||||
[102014423, '待机', '40层', '1000片'],
|
||||
[102014424, '待机', '40层', '1000片'],
|
||||
]
|
||||
|
||||
let pond_config = reactive({
|
||||
data: [55],
|
||||
shape: 'round'
|
||||
})
|
||||
async function reqCismaList() {
|
||||
let res: any = await getCismaList()
|
||||
if (res.code === 200) {
|
||||
store.setDevlist(res.data.devlist)
|
||||
store.setDevnum(res.data.devnum)
|
||||
changeRingData()
|
||||
changescrollBoardConfig()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function changeRingData() {
|
||||
ringData.value = [
|
||||
{ name: '工作', value: store.devnum.on },
|
||||
{ name: '停机', value: store.devnum.off },
|
||||
{ name: '待机', value: store.devnum.wait },
|
||||
]
|
||||
}
|
||||
function changescrollBoardConfig() {
|
||||
scrollBoardConfig.data = store.devlist.map((item: any, index: number) => {
|
||||
return [index + 1, item.name, item.label, item.runTime + '分', item.status]
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
reqCismaList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 1080px;
|
||||
width: 1920px;
|
||||
color: #20aec5;
|
||||
background-color: #100c2a;
|
||||
}
|
||||
|
||||
.header {
|
||||
height: 150px;
|
||||
width: 1920px;
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 930px;
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
height: 930px;
|
||||
width: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center {
|
||||
flex: 1;
|
||||
height: 930px;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.lt {
|
||||
width: 100%;
|
||||
height: 370px;
|
||||
}
|
||||
|
||||
.lb {
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
}
|
||||
|
||||
.ct {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background-image: url(@/assets/img/u8.png);
|
||||
background-size: 100% 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.top-item .div_p {
|
||||
height: 60%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
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 {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.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