微工厂缝纫设备看板修改
This commit is contained in:
parent
c878e14c01
commit
f78a0f179a
@ -2,13 +2,13 @@
|
||||
<div class="container">
|
||||
<dv-border-box-6 :color="['#20aec5', '#20aec5']">
|
||||
<div class="content">
|
||||
<div class="status online">在线</div>
|
||||
<div class="status online">{{ prop.data.status }}</div>
|
||||
<div class="right-top">
|
||||
<div class="num">0</div>
|
||||
<div class="num">{{ prop.data.count }}</div>
|
||||
<div class="name">当日总针数</div>
|
||||
</div>
|
||||
<div class="chart" ref="chart"></div>
|
||||
<div class="bottom">五线包缝机(RP2011158)</div>
|
||||
<div class="bottom">{{ prop.data.name }}({{ prop.data.label }})</div>
|
||||
</div>
|
||||
</dv-border-box-6>
|
||||
|
||||
@ -16,19 +16,41 @@
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { getCurrentInstance, ref, onMounted } from 'vue';
|
||||
import { getCurrentInstance, ref, onMounted,watch } from 'vue';
|
||||
const { proxy } = getCurrentInstance()! as any;
|
||||
const chart = ref(null);
|
||||
let myChart: any = null;
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
id: '',
|
||||
status: '在线',
|
||||
name: '五线包缝机',
|
||||
label: 'RP2011158',
|
||||
count: 0,
|
||||
series: [
|
||||
{ value: 0, name: '工作时间' },
|
||||
{ value: 24, name: '空闲时间' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
const init = () => {
|
||||
myChart = proxy.$echarts.init(chart.value);
|
||||
if (!myChart) {
|
||||
myChart = proxy.$echarts.init(chart.value);
|
||||
}
|
||||
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
color:['#95A2FF','#FA8080'],
|
||||
color: ['#95A2FF', '#FA8080'],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['35%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
@ -40,15 +62,15 @@ const init = () => {
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 21, name: '工作时间' },
|
||||
{ value: 3, name: '空闲时间' },
|
||||
]
|
||||
data: prop.data.series
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
watch(() => prop.data, (newVal, oldVal) => {
|
||||
init();
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
|
@ -2,23 +2,16 @@
|
||||
<div :class="$style['container']">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<header2
|
||||
ref="headerref"
|
||||
:width="'100%'"
|
||||
:height="'120px'"
|
||||
:title="t('messages.微工厂缝纫设备看板')"
|
||||
:titleTip="titleTip"
|
||||
:typeFun="['time']"
|
||||
:alarmType="[]"
|
||||
>
|
||||
<header2 ref="headerref" :width="'100%'" :height="'120px'" :title="t('messages.微工厂缝纫设备看板')" :titleTip="titleTip"
|
||||
:typeFun="['time']" :alarmType="[]">
|
||||
</header2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" ref="Acontent">
|
||||
<div v-for="inem in 21" class="ringchart">
|
||||
<RingChart></RingChart>
|
||||
<div v-for="item in arr" class="ringchart">
|
||||
<RingChart :data="item"></RingChart>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -26,9 +19,9 @@
|
||||
<script setup lang='ts'>
|
||||
import header2 from "@/components/headerBox/header2.vue";
|
||||
import RingChart from "./components/RingChart.vue";
|
||||
import {ref} from 'vue'
|
||||
import { ref,onMounted,onUnmounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
let {t} = useI18n();
|
||||
let { t } = useI18n();
|
||||
|
||||
document.title = t('messages.微工厂缝纫设备看板');
|
||||
let titleTip = [
|
||||
@ -41,6 +34,36 @@ let titleTip = [
|
||||
name: t('messages.空闲时间'),
|
||||
},
|
||||
];
|
||||
let timer = null;
|
||||
let arr = [];
|
||||
for (let index = 0; index < 21; index++) {
|
||||
let random = +(Math.random() * 24).toFixed(1);
|
||||
arr.push({
|
||||
id: '',
|
||||
status: '在线',
|
||||
name: '五线包缝机',
|
||||
label: 'RP2011158',
|
||||
count: 0,
|
||||
series: [
|
||||
{ value: random, name: '工作时间' },
|
||||
{ value: (24-random).toFixed(1), name: '空闲时间' }
|
||||
]
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
timer = setInterval(() => {
|
||||
arr.forEach(item => {
|
||||
let random = +(Math.random() * 24).toFixed(1);
|
||||
item.series[0].value = random;
|
||||
item.series[1].value = (24-random).toFixed(1);
|
||||
})
|
||||
}, 5000);
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
clearInterval(timer);
|
||||
})
|
||||
</script>
|
||||
<style module>
|
||||
.container {
|
||||
@ -65,5 +88,4 @@ let titleTip = [
|
||||
width: 260px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
@ -130,15 +130,14 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.test {
|
||||
width: 20%;
|
||||
width: 340px;
|
||||
height: 30%;
|
||||
margin: 20px 47px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
Loading…
Reference in New Issue
Block a user