diff --git a/src/http/Exhibition/CIFM/index.ts b/src/http/Exhibition/CIFM/index.ts index 85a20b8..1db3e6f 100644 --- a/src/http/Exhibition/CIFM/index.ts +++ b/src/http/Exhibition/CIFM/index.ts @@ -5,3 +5,8 @@ export function scatteredLayoutExhibitionDevice(data){ return get('/screen/cisma/scatteredLayoutExhibitionDevice',data) } +//获取设备在线状态、设备列表 +export function cismaDeviceInfo(data){ + return get('/screen/cisma/cismaDeviceInfo',data) +} + diff --git a/src/views/Exhibition/CIFM/child.vue b/src/views/Exhibition/CIFM/child.vue index 055ce0d..316c953 100644 --- a/src/views/Exhibition/CIFM/child.vue +++ b/src/views/Exhibition/CIFM/child.vue @@ -3,7 +3,7 @@
+ :typeFun="['time', 'comback']" :alarmType="[]">
@@ -12,7 +12,7 @@
- 200 + {{ speed }} rpm/min
@@ -28,7 +28,7 @@
- +
@@ -79,42 +79,106 @@ import header2 from './components/header2.vue' import BorderView from './components/Border.vue' import DynamicChart from './components/DynamicChart.vue' import ItemCard from './components/ItemCard.vue' -import {scatteredLayoutExhibitionDevice} from '@/http/Exhibition/CIFM' +import { scatteredLayoutExhibitionDevice, cismaDeviceInfo } from '@/http/Exhibition/CIFM' import { connectWebsocket, closeWebsocket } from "@/utils/websocket" -import {useRouter,useRoute} from 'vue-router' +import { useRouter, useRoute } from 'vue-router' let route = useRoute() -console.log(route.params.name); let xData = ref(['订单任务量', '任务完成量']) let series = ref([{ name: '完成量', type: 'bar', - data: [200, 300] + label: { + show: true, + position: 'outside', + formatter: '{@score}' + }, + data: [200, 300], + barWidth: '35%', }]) let device_data = ref([ - { key: '机架号', value: '102014422' }, + { key: '设备名称', value: '床笠裙边机', value_style: { fontSize: '26px' } }, { key: '设备状态', value: 2 }, - { key: '稼动率', value: '90%' }, + { key: '机架号', value: '123456' }, { key: '工作时长', value: '0min' }, ]) + +let getImgSrc = computed(() => { + let name: string = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name; + let imgSrc = { + '床笠裙边机': require('./images/qbj.png'), + '电脑绗绣机': require('./images/hxj.png'), + '电脑绣花机': require('./images/xhj.png'), + '全自动缝纫机(零等待)': require('./images/ldd.png') + } + return imgSrc[name] +}) + +//转速 +let speed = ref(200) function scatteredLayoutExhibitionDeviceFun() { - scatteredLayoutExhibitionDevice({s:'WME'}).then((res:any) => { + scatteredLayoutExhibitionDevice({ s: 'WME' }).then((res: any) => { if (res.code == 200) { let data = res.data let name: string = Array.isArray(route.params.name) ? route.params.name[0] : route.params.name; let device_info = data[name] device_data.value = [ - { key: '机架号', value: device_info['label'] }, + { key: '设备名称', value: device_info['name'], value_style: { fontSize: '26px' } }, { key: '设备状态', value: device_info['status'] }, - { key: '稼动率', value: device_info['ratio'] }, + { key: '机架号', value: device_info['label'] }, { key: '工作时长', value: device_info['workTime'] }, ] + console.log(route.params.name,'11111'); + + if (name == '床笠裙边机') { + device_data.value.push({ key: '花型编号', value: device_info['fileName'] }) + } + if (device_info['status'] == 2) { + speed.value = 200 + } else { + speed.value = 0 + } + cismaDeviceInfoFun(device_info['id']) } }) } -let config = reactive({ +function cismaDeviceInfoFun(id) { + cismaDeviceInfo({ s: id }).then((res: any) => { + if (res.code == 200) { + let data = res.data + optionData.series = [{ + name: '完成量', + type: 'bar', + label: { + show: true, + position: 'outside', + formatter: '{@score} ' + unit[Array.isArray(route.params.name) ? route.params.name[0] : route.params.name] + }, + data: [data.dingdan.renwu, data.dingdan.wancheng], + barWidth: '35%', + }] + let config_data = data.weihu.map((item, index) => { + return [index + 1, item.taskType, item.date, item.status, item.name] + }) + config.value = { + 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: config_data + } + } + }) +} + +let config = ref({ header: ['序号', '类型', '日期', '状态', '操作人员'],//, '故障率' headerBGC: 'transparent', oddRowBGC: 'transparent', @@ -133,6 +197,13 @@ let config = reactive({ [6, '维护', '2024-02-08', '完成', '1001'], ] }) + +let unit = { + '床笠裙边机': '床', + '电脑绗绣机': 'cm', + '电脑绣花机': '件', + '全自动缝纫机(零等待)': '件' +} let optionData = reactive({ backgroundColor: 'transparent', legend: { @@ -163,7 +234,7 @@ let optionData = reactive({ yAxis: [ { type: 'value', - name: '产量', + name: '订单任务：\r\n单位(' + unit[Array.isArray(route.params.name) ? route.params.name[0] : route.params.name] + ")", axisLabel: { fontSize: 14 } @@ -180,11 +251,12 @@ function getWebsocket(val) { if (data.type == 'WorkingState') { - let { RackNumber, WorkingState } = data.msg - - + let { RackNumber, WorkingState, speed } = data.msg + + if (device_data.value[0].value == RackNumber) { device_data.value[1].value = WorkingState + speed.value = speed } } @@ -198,6 +270,9 @@ function errWebsocket(val) { } onMounted(() => { scatteredLayoutExhibitionDeviceFun() + setInterval(() => { + scatteredLayoutExhibitionDeviceFun() + }, 60000) connectWebsocket(null, null, getWebsocket, errWebsocket) }) onUnmounted(() => { diff --git a/src/views/Exhibition/CIFM/components/BoardBar.vue b/src/views/Exhibition/CIFM/components/BoardBar.vue index 015ae57..a647721 100644 --- a/src/views/Exhibition/CIFM/components/BoardBar.vue +++ b/src/views/Exhibition/CIFM/components/BoardBar.vue @@ -2,7 +2,7 @@
-
+
{{ item }}
@@ -23,6 +23,10 @@ import { getCurrentInstance, onMounted, reactive, ref, computed, watch } from "v const devList = ref(null); const prop = defineProps({ + header: { + type: Array, + default: ['序号', '设备名称', '设备编码', '完成率', '稼动率', '状态'] + }, data: { type: Array, default: [] @@ -40,8 +44,8 @@ const prop = defineProps({ default: 2 } }) -let header = ['序号', '设备名称', '设备编码','完成率', '稼动率', '状态'] -let columnWidth = [90, 295, 145, 110, 110,85]; +let columnWidth = [90, 280, 140, 140, 110,85]; +let align:any = ['center', 'left', 'center', 'center', 'center', 'center']; let sum = 850; let computedWidth = (width: number) => { @@ -53,8 +57,8 @@ let config = reactive({ oddRowBGC: 'transparent', evenRowBGC: 'transparent', wrap: [false, true, false, false, false], - columnWidth: [80, 295, 145, 110, 110,85], - align: ['center', 'center', 'center', 'center', 'center', 'center'], + columnWidth: [80, 280, 130, 125, 110,85], + align: ['center', 'left', 'center', 'center', 'center', 'center'], rowNum: prop.rowNum, waitTime: 3000, }) diff --git a/src/views/Exhibition/CIFM/components/DynamicChart.vue b/src/views/Exhibition/CIFM/components/DynamicChart.vue index 37b41ac..75a3c67 100644 --- a/src/views/Exhibition/CIFM/components/DynamicChart.vue +++ b/src/views/Exhibition/CIFM/components/DynamicChart.vue @@ -24,6 +24,8 @@ const setCharts = () => { } watch(() => prop.optionData, (newVal, oldVal) => { + console.log(newVal,'1111111'); + charts.setOption(newVal); }, { deep: true }) diff --git a/src/views/Exhibition/CIFM/components/ItemCard.vue b/src/views/Exhibition/CIFM/components/ItemCard.vue index 785de70..1966ec6 100644 --- a/src/views/Exhibition/CIFM/components/ItemCard.vue +++ b/src/views/Exhibition/CIFM/components/ItemCard.vue @@ -1,34 +1,48 @@