场内环图颜色修改 展会大屏优化
This commit is contained in:
hzz
parent
1e437cc5d7
commit
df7125e470
@ -18,14 +18,14 @@
|
|||||||
<el-col :span="24"
|
<el-col :span="24"
|
||||||
><installtable
|
><installtable
|
||||||
ref="install1"
|
ref="install1"
|
||||||
:color="['#ee6666', '#a14646']"
|
:color="['#91cc75', '#658c52']"
|
||||||
:title="t('messages.QiCheDevSchedule')"
|
:title="t('messages.QiCheDevSchedule')"
|
||||||
></installtable
|
></installtable
|
||||||
></el-col>
|
></el-col>
|
||||||
<el-col :span="24"
|
<el-col :span="24"
|
||||||
><installtable
|
><installtable
|
||||||
ref="install2"
|
ref="install2"
|
||||||
:color="['#5470C6', '#384a81']"
|
:color="['#91cc75', '#658c52']"
|
||||||
:title="t('messages.FuZhuangDevSchedule')"
|
:title="t('messages.FuZhuangDevSchedule')"
|
||||||
></installtable
|
></installtable
|
||||||
></el-col>
|
></el-col>
|
||||||
@ -37,7 +37,7 @@
|
|||||||
<el-col :span="5">
|
<el-col :span="5">
|
||||||
<installtable
|
<installtable
|
||||||
ref="install3"
|
ref="install3"
|
||||||
:color="['#FAC858', '#ac8b40']"
|
:color="['#91cc75', '#658c52']"
|
||||||
:title="t('messages.JiaFangDevSchedule')"
|
:title="t('messages.JiaFangDevSchedule')"
|
||||||
></installtable>
|
></installtable>
|
||||||
<installtable
|
<installtable
|
||||||
|
|||||||
@ -9,9 +9,11 @@
|
|||||||
<div class="key" v-for="item in dev_title">{{ item }}</div>
|
<div class="key" v-for="item in dev_title">{{ item }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dev-content" v-for="(items, index) in (dev_value as any)">
|
<div class="dev-content" v-for="(items, index) in (dev_value as any)">
|
||||||
<div v-for="(item,index) in items" :class="{status:index == (items.length - 1)}"
|
<div v-for="(item, index) in items" class="dev_value">
|
||||||
:style="{background:index == (items.length - 1)?status_color[item]:''}"
|
<div :class="{ status: index == (items.length - 1) }"
|
||||||
>{{ index == (items.length - 1)?'':item}}</div>
|
:style="{ background: index == (items.length - 1) ? status_color[item] : '' }">{{ index ==
|
||||||
|
(items.length - 1) ? '' : item }}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -33,10 +35,10 @@ const prop = defineProps({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
const status_color = {
|
const status_color = {
|
||||||
'0':'#FF6E76',
|
'0': '#FF6E76',
|
||||||
'1':'#FDDD60',
|
'1': '#FDDD60',
|
||||||
'2':'#7CFFB2',
|
'2': '#7CFFB2',
|
||||||
'3':'#FDDD60',
|
'3': '#FDDD60',
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -55,6 +57,7 @@ const status_color = {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dev-right {
|
.dev-right {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
@ -88,6 +91,12 @@ const status_color = {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
.dev_value {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.key {
|
.key {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
@ -101,8 +110,8 @@ const status_color = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
width:24px;
|
width: 24px;
|
||||||
height:24px;
|
height: 24px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,294 +0,0 @@
|
|||||||
<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