微工厂缝纫设备看板修改

This commit is contained in:
hzz 2023-07-14 18:01:06 +08:00
parent c878e14c01
commit f78a0f179a
3 changed files with 71 additions and 28 deletions

View File

@ -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();

View File

@ -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>

View File

@ -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>