展会大屏修改

This commit is contained in:
hzz 2023-09-08 18:02:15 +08:00
parent a6a0833fdb
commit 9aaf1c0102
2 changed files with 24 additions and 12 deletions

View File

@ -20,7 +20,7 @@ export const useMicroExhibitionStore = defineStore(Names.MicroExhibition, {
state: () => { state: () => {
return { return {
devlist: [], devlist: [],
devnum: { all: 17, wait: 1, off: 3, on: 0 }, devnum: { all: 17, wait: 7, off: 3, on: 7 },
caijian: { caijian: {
'value': [ //'设备名称', '设备编码', '稼动率', '状态' //0:停机 1:待机 2:工作 3:待机 'value': [ //'设备名称', '设备编码', '稼动率', '状态' //0:停机 1:待机 2:工作 3:待机
['全自动针梭两用铺布机', '1050910', '95%', '0'], ['全自动针梭两用铺布机', '1050910', '95%', '0'],

View File

@ -11,7 +11,8 @@
<div class="lt"> <div class="lt">
<NewBoder :title="'裁剪设备'"> <NewBoder :title="'裁剪设备'">
<DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value" :last_index="3"> <DevCard :dev_title="dev_caijian_title" :dev_value="store.caijian.value" :last_index="3">
<BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData" :seriesData="store.caijian.chart.series"></BarChart> <BarChart style="width: 100%;height: 100%;" :xData="store.caijian.chart.xData"
:seriesData="store.caijian.chart.series"></BarChart>
</DevCard> </DevCard>
</NewBoder> </NewBoder>
</div> </div>
@ -55,7 +56,8 @@
<div class="rt"> <div class="rt">
<NewBoder :title="'一次性拖鞋自动生产线'"> <NewBoder :title="'一次性拖鞋自动生产线'">
<DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value" :last_index="2"> <DevCard :dev_title="dev_tuoxie_title" :dev_value="store.tuoxie.value" :last_index="2">
<BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData" :seriesData="store.tuoxie.chart.series"></BarChart> <BarChart style="width: 100%;height: 100%;" :xData="store.tuoxie.chart.xData"
:seriesData="store.tuoxie.chart.series"></BarChart>
</DevCard> </DevCard>
</NewBoder> </NewBoder>
</div> </div>
@ -101,18 +103,19 @@ import BarChart from './components/BarChart.vue'
import ringChart from "./components/ringChart.vue"; import ringChart from "./components/ringChart.vue";
import BoardBar from "./components/BoardBar.vue"; import BoardBar from "./components/BoardBar.vue";
import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated } from 'vue' import { ref, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed } from 'vue'
import { useMicroExhibitionStore } from '@/store/module/MicroExhibition' import { useMicroExhibitionStore } from '@/store/module/MicroExhibition'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
let { t } = useI18n(); let { t } = useI18n();
const store = useMicroExhibitionStore() const store = useMicroExhibitionStore()
let ringData = ref([]); let ringData = computed(() => {
ringData.value = [ return [
{ name: '工作', value: 7 }, { name: '工作', value: store.devnum.on },
{ name: '停机', value: 7 }, { name: '停机', value: store.devnum.off },
{ name: '待机', value: 3 }, { name: '待机', value: store.devnum.wait },
] ]
})
let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态'] let dev_caijian_title = ['设备名称', '设备编码', '稼动率', '状态']
let dev_tuoxie_title = ['设备编码', '稼动率', '状态'] let dev_tuoxie_title = ['设备编码', '稼动率', '状态']
@ -256,6 +259,7 @@ h2 {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.left-tip-type-item { .left-tip-type-item {
width: 33%; width: 33%;
height: 100%; height: 100%;
@ -264,26 +268,33 @@ h2 {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.yuan { .yuan {
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 50%; border-radius: 50%;
} }
.green { .green {
background-color: #7CFFB2; background-color: #7CFFB2;
} }
.yello { .yello {
background-color: #FDDD60; background-color: #FDDD60;
} }
.red { .red {
background-color: #FF6E76; background-color: #FF6E76;
} }
.blue { .blue {
color: #20AEC5; color: #20AEC5;
} }
.err { .err {
color: #FF6E76; color: #FF6E76;
} }
.right-tip-type { .right-tip-type {
position: absolute; position: absolute;
top: 15px; top: 15px;
@ -294,6 +305,7 @@ h2 {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.right-tip-type-item { .right-tip-type-item {
width: 58px; width: 58px;
height: 100%; height: 100%;
@ -302,7 +314,7 @@ h2 {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.gatway { .gatway {
font-size: 36px; font-size: 36px;
} }</style>
</style>