update
This commit is contained in:
hzz
parent
02d38ddcf5
commit
815db97524
@ -1,13 +1,59 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'床垫生产线物联管理系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
|
||||
:typeFun="['time','comback']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="ltop">
|
||||
<BorderView :title="'工作速度'">
|
||||
<div class="box-lt">
|
||||
<div class="pie">
|
||||
<span>200</span>
|
||||
<span>rpm/min</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="lbottom">
|
||||
<BorderView :title="'订单完成量'">
|
||||
<DynamicChart style="width: 100%;height: 100%;" :optionData="optionData">
|
||||
</DynamicChart>
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<BorderView :title="'设备状态总览'">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="rtop">
|
||||
<BorderView :title="'维护保养'">
|
||||
<ZdScrollBoard ref="devList" class="dev-list" :config="config" />
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="rbottom">
|
||||
<BorderView :title="'生产报警'">
|
||||
<div class="rb-box">
|
||||
<div class="svg-box">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 1024 1024"
|
||||
data-v-ea893728="" class="WarnTriangleFilled">
|
||||
<path fill="currentColor"
|
||||
d="M928.99 755.83 574.6 203.25c-12.89-20.16-36.76-32.58-62.6-32.58s-49.71 12.43-62.6 32.58L95.01 755.83c-12.91 20.12-12.9 44.91.01 65.03 12.92 20.12 36.78 32.51 62.59 32.49h708.78c25.82.01 49.68-12.37 62.59-32.49 12.91-20.12 12.92-44.91.01-65.03M554.67 768h-85.33v-85.33h85.33zm0-426.67v298.66h-85.33V341.32z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>暂无报警信息</div>
|
||||
|
||||
</div>
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
@ -28,8 +74,81 @@
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
|
||||
import ZdScrollBoard from "@/components/data-view/index.vue";
|
||||
import header2 from './components/header2.vue'
|
||||
import BorderView from './components/Border.vue'
|
||||
import DynamicChart from './components/DynamicChart.vue'
|
||||
import ItemCard from './components/ItemCard.vue'
|
||||
|
||||
let xData = ref(['订单任务量', '任务完成量'])
|
||||
let series = ref([{
|
||||
name: '完成量',
|
||||
type: 'bar',
|
||||
data: [200, 300]
|
||||
}])
|
||||
let mjxhj_data = reactive([
|
||||
{ key: '机架号', value: '102014422' },
|
||||
{ key: '设备状态', value: 2 },
|
||||
{ key: '稼动率', value: '90%' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
let config = reactive({
|
||||
header: ['序号', '类型', '日期', '状态', '操作人员'],//, '故障率'
|
||||
headerBGC: 'transparent',
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: 'transparent',
|
||||
wrap: [false, false, false, false, false],
|
||||
columnWidth: [80, 150, 145, 110, 110, 185],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
rowNum: 5,
|
||||
waitTime: 3000,
|
||||
data: [
|
||||
[1, '保养', '2024-03-10', '完成', '1001'],
|
||||
[2, '机头保养', '2024-03-08', '完成', '1002'],
|
||||
[3, '电机保养', '2024-03-01', '完成', '1003'],
|
||||
[4, '保养', '2024-02-26', '完成', '1001'],
|
||||
[5, '机头保养', '2024-02-20', '完成', '1002'],
|
||||
[6, '维护', '2024-02-08', '完成', '1001'],
|
||||
]
|
||||
})
|
||||
let optionData = reactive({
|
||||
backgroundColor: 'transparent',
|
||||
legend: {
|
||||
data: ['计划完成', '实际完成'],
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
},
|
||||
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 14
|
||||
|
||||
},
|
||||
grid: {
|
||||
left: '80',
|
||||
right: '0',
|
||||
bottom: '40',
|
||||
},
|
||||
color: ['#2FC5D4', '#FEDA81'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData.value,
|
||||
axisLabel: {
|
||||
interval: 0, //控制X轴刻度全部显示
|
||||
// rotate: 45, //倾斜角度
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '产量',
|
||||
axisLabel: {
|
||||
fontSize: 14
|
||||
}
|
||||
}
|
||||
],
|
||||
series: series.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -58,6 +177,101 @@ import BorderView from './components/Border.vue'
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
height: 980px;
|
||||
width: 520px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 830px;
|
||||
height: 980px;
|
||||
margin: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.ltop {
|
||||
width: 100%;
|
||||
height: 340px;
|
||||
}
|
||||
|
||||
.box-lt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pie {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border: #05FCD0 30px solid;
|
||||
border-radius: 50%;
|
||||
color: #C6E4E2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.lbottom {
|
||||
width: 100%;
|
||||
height: calc(100% - 345px);
|
||||
}
|
||||
|
||||
|
||||
.rtop {
|
||||
width: 100%;
|
||||
height: 485px;
|
||||
}
|
||||
|
||||
.rbottom {
|
||||
width: 100%;
|
||||
height: 470px;
|
||||
}
|
||||
|
||||
.rb-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
color: #A3DDDE;
|
||||
}
|
||||
|
||||
.svg-box {
|
||||
width: 205px;
|
||||
height: 205px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: #CAD1D9 2px solid;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.WarnTriangleFilled {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.dev-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-tip-type {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<!-- <img class="borderpng" src="" alt=""> -->
|
||||
<div class="title">
|
||||
<text class="title-text">{{ title }}</text>
|
||||
<div class="hr"></div>
|
||||
<div class="hr" v-if="hr_show"></div>
|
||||
</div>
|
||||
|
||||
<div class="newboder-content">
|
||||
@ -18,6 +18,10 @@ let prop = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '裁剪设备'
|
||||
},
|
||||
hr_show: {
|
||||
type:Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@ -52,6 +56,7 @@ let prop = defineProps({
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16%;
|
||||
padding-left: 10%;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
@ -59,7 +64,7 @@ let prop = defineProps({
|
||||
color: rgba(0, 255, 255, 0.996078431372549);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* justify-content: center; */
|
||||
|
||||
}
|
||||
.hr {
|
||||
|
||||
40
src/views/Exhibition/CIFM/components/DynamicChart.vue
Normal file
40
src/views/Exhibition/CIFM/components/DynamicChart.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div ref="LChartRef" class="cc"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { ref, getCurrentInstance, onMounted, watch } from 'vue'
|
||||
|
||||
|
||||
const prop = defineProps({
|
||||
optionData: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
})
|
||||
|
||||
let LChartRef = ref(null);
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
let charts = null;
|
||||
const setCharts = () => {
|
||||
charts = proxy.$echarts.init(LChartRef.value, 'dark')
|
||||
let option = prop.optionData
|
||||
|
||||
charts.setOption(option);
|
||||
}
|
||||
|
||||
watch(() => prop.optionData, (newVal, oldVal) => {
|
||||
charts.setOption(newVal);
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
setCharts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cc {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -2,30 +2,30 @@
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'床垫生产线物联管理系统'" :titleTip="[]"
|
||||
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'再登工况物联管理系统'" :titleTip="[]"
|
||||
:typeFun="['time']" :alarmType="[]"></header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<BorderView :title="'床垫材料缝制设备'">
|
||||
<BorderView :title="'床笠裙边机'" @click="pushTo('床笠裙边机')">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="cc">
|
||||
<BorderView :title="'设备状态总览'">
|
||||
<BorderView :title="'电脑绗绣机'" @click="pushTo('床笠裙边机')">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
<div class="cb">
|
||||
<BorderView :title="'床垫包装设备'">
|
||||
<BorderView :title="'电脑绣花机'" @click="pushTo('床笠裙边机')">
|
||||
<ItemCard :mjxhj_data="mjxhj_data"></ItemCard>
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<BorderView :title="'床垫生产线设备'">
|
||||
<BorderView :title="'零等待皮革缝纫机'" @click="pushTo('床笠裙边机')">
|
||||
</BorderView>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,8 +51,9 @@ import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpd
|
||||
import header2 from './components/header2.vue'
|
||||
import BorderView from './components/Border.vue'
|
||||
import ItemCard from './components/ItemCard.vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
|
||||
let router = useRouter()
|
||||
|
||||
|
||||
let mjxhj_data = reactive([
|
||||
@ -61,6 +62,10 @@ let mjxhj_data = reactive([
|
||||
{ key: '稼动率', value: '90%' },
|
||||
{ key: '工作时长', value: '0min' },
|
||||
])
|
||||
|
||||
function pushTo(val){
|
||||
router.push({path:`/CIFMExhibitionMain_${val}`})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user