diff --git a/src/api/screen/micro.js b/src/api/screen/micro.js index 1b42216..580f54a 100644 --- a/src/api/screen/micro.js +++ b/src/api/screen/micro.js @@ -1,10 +1,11 @@ import request from '@/utils/request' // 查询设备列表 -export function listDevice() { +export function listDevice(devId) { return request({ url: '/mf/device', method: 'get', + params: { devId } }) } @@ -40,5 +41,58 @@ export function deviceRate() { }) } +// 设备保养提醒 +export function deviceCheck(devId) { + return request({ + url: '/mf/deviceCheck', + method: 'get', + params: { devId } + }) +} + +//设备报警记录 +export function deviceRepair(devId) { + return request({ + url: '/mf/deviceRepair', + method: 'get', + params: { devId } + }) +} + +//单设备运行状态 +export function deviceStatusById(devId) { + return request({ + url: '/mf/deviceStatusById', + method: 'get', + params: { devId } + }) +} +//单设备运行状态 +export function deviceStatusChart(devId) { + return request({ + url: '/mf/deviceStatusChart', + method: 'get', + params: { devId } + }) +} + +//单设备运行状态 +export function deviceRateChart(devId) { + return request({ + url: '/mf/deviceRateChart', + method: 'get', + params: { devId } + }) +} + +//单设备用电量图表 +export function deviceElectChart(devId) { + return request({ + url: '/mf/deviceElectChart', + method: 'get', + params: { devId } + }) +} + diff --git a/src/assets/icons/svg/alarm.svg b/src/assets/icons/svg/alarm.svg new file mode 100644 index 0000000..1e04b36 --- /dev/null +++ b/src/assets/icons/svg/alarm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/repair.svg b/src/assets/icons/svg/repair.svg new file mode 100644 index 0000000..02e3ad7 --- /dev/null +++ b/src/assets/icons/svg/repair.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/icons/svg/run.svg b/src/assets/icons/svg/run.svg new file mode 100644 index 0000000..14fc73c --- /dev/null +++ b/src/assets/icons/svg/run.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/stop.svg b/src/assets/icons/svg/stop.svg new file mode 100644 index 0000000..4a44899 --- /dev/null +++ b/src/assets/icons/svg/stop.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/icons/svg/wait.svg b/src/assets/icons/svg/wait.svg new file mode 100644 index 0000000..f068a99 --- /dev/null +++ b/src/assets/icons/svg/wait.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/directive/index.js b/src/directive/index.js index 86b8f88..d373988 100644 --- a/src/directive/index.js +++ b/src/directive/index.js @@ -1,9 +1,11 @@ import hasRole from './permission/hasRole' import hasPermi from './permission/hasPermi' import copyText from './common/copyText' +import tableAutoScroll from './tableScroll/tableAutoScroll' export default function directive(app){ app.directive('hasRole', hasRole) app.directive('hasPermi', hasPermi) app.directive('copyText', copyText) + app.directive('tableAutoScroll', tableAutoScroll) } \ No newline at end of file diff --git a/src/directive/tableScroll/tableAutoScroll.ts b/src/directive/tableScroll/tableAutoScroll.ts new file mode 100644 index 0000000..f45c7db --- /dev/null +++ b/src/directive/tableScroll/tableAutoScroll.ts @@ -0,0 +1,59 @@ +interface ElType extends HTMLElement { + timer: number | null + isScroll: boolean + curTableTopValue: number +} +export default { + created(el: ElType) { + el.timer = null + el.isScroll = true + el.curTableTopValue = 0 + }, + mounted(el: ElType, binding: { value?: { delay?: number } }) { + const { delay = 15 } = binding.value || {} + const tableDom = el.getElementsByClassName( + 'el-scrollbar__wrap' + )[0] as HTMLElement + const viewDom = el.getElementsByClassName( + 'el-scrollbar__view' + )[0] as HTMLElement + + const onMouseOver = () => (el.isScroll = false) + const onMouseOut = () => { + el.curTableTopValue = tableDom.scrollTop + el.isScroll = true + } + + tableDom.addEventListener('mouseover', onMouseOver) + tableDom.addEventListener('mouseout', onMouseOut) + + el.timer = window.setInterval(() => { + const viewDomClientHeight = viewDom.scrollHeight + const tableDomClientHeight = el.clientHeight + + if (el.isScroll && viewDomClientHeight > tableDomClientHeight) { + const curScrollPosition = tableDom.clientHeight + el.curTableTopValue + el.curTableTopValue = + curScrollPosition === tableDom.scrollHeight + ? 0 + : el.curTableTopValue + 1 + tableDom.scrollTop = el.curTableTopValue + } + }, delay) + }, + unmounted(el: ElType) { + if (el.timer !== null) { + clearInterval(el.timer) + } + el.timer = null + + const tableDom = el.getElementsByClassName( + 'el-scrollbar__wrap' + )[0] as HTMLElement + tableDom.removeEventListener('mouseover', () => (el.isScroll = false)) + tableDom.removeEventListener('mouseout', () => { + el.curTableTopValue = tableDom.scrollTop + el.isScroll = true + }) + }, +} diff --git a/src/router/index.js b/src/router/index.js index 82ae054..8c3ead8 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -74,18 +74,16 @@ export const constantRoutes = [ { path: '/screen', component: ScaleScreen, - hidden: true, redirect: 'noredirect', children: [ { - path: "/screen/microFactory", + path: "microFactory", name: "MicroFactory", component: () => import("../views/screen/microFactory/index.vue"), - hidden: true + meta: { title: '大屏首页', icon: 'dashboard', affix: true } }, { - path: "/screen/devItem", - name: "devItem", + path: "devItem_:id", component: () => import("../views/screen/devItem/index.vue"), hidden: true }, diff --git a/src/views/device/device/add_edit.vue b/src/views/device/device/add_edit.vue index 3e6c6b6..e0a43d7 100644 --- a/src/views/device/device/add_edit.vue +++ b/src/views/device/device/add_edit.vue @@ -8,6 +8,12 @@ + + + + + - + {{ typeOptions.find(item => item.value == row.type)?.label }} @@ -90,10 +90,10 @@ - + @@ -102,10 +102,10 @@ - + @@ -195,7 +195,7 @@ let rules = ref({ // 列显隐信息 const columns = ref([ { key: 0, label: proxy.tLang('device', `设备名称`), visible: true }, - { key: 1, label: proxy.tLang('device', `设备编码`), visible: true }, + { key: 1, label: proxy.tLang('device', `机架号`), visible: true }, { key: 2, label: proxy.tLang('device', `设备类型`), visible: true }, { key: 3, label: proxy.tLang('device', `设备型号`), visible: false }, { key: 4, label: proxy.tLang('device', `设备版本`), visible: true }, diff --git a/src/views/device/device/info.vue b/src/views/device/device/info.vue index 53d4edb..bccf5be 100644 --- a/src/views/device/device/info.vue +++ b/src/views/device/device/info.vue @@ -1,8 +1,9 @@ - {{ props.info.code }} {{ props.info.name }} + {{ props.info.label }} + {{ props.info.code }} {{ props.info.type }} {{ props.info.model }} diff --git a/src/views/screen/devItem/component/Progress.vue b/src/views/screen/devItem/component/Progress.vue new file mode 100644 index 0000000..af8bf6e --- /dev/null +++ b/src/views/screen/devItem/component/Progress.vue @@ -0,0 +1,65 @@ + + + + {{ prop.mdoelValue1.date }} + {{ prop.mdoelValue1.rate }} % + + + + + + + + + + diff --git a/src/views/screen/devItem/component/lineChart.vue b/src/views/screen/devItem/component/lineChart.vue new file mode 100644 index 0000000..175f78d --- /dev/null +++ b/src/views/screen/devItem/component/lineChart.vue @@ -0,0 +1,108 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/screen/devItem/component/stackBarChart.vue b/src/views/screen/devItem/component/stackBarChart.vue index 141f2be..3567666 100644 --- a/src/views/screen/devItem/component/stackBarChart.vue +++ b/src/views/screen/devItem/component/stackBarChart.vue @@ -36,7 +36,7 @@ const options = computed(() => { }, xAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + data: prop.data.xAxis, }, yAxis: { name: 'h', @@ -48,9 +48,9 @@ const options = computed(() => { show: false } }, - series: [ - { - name: '工作', + series: prop.data.series.map((item, index) => { + return { + name: item.name, type: 'bar', stack: 'total', barWidth: '30%', @@ -60,48 +60,9 @@ const options = computed(() => { emphasis: { focus: 'series' }, - data: [320, 302, 301, 334, 390, 330, 320] - }, - { - name: '待机', - type: 'bar', - stack: 'total', - barWidth: '30%', - label: { - show: true - }, - emphasis: { - focus: 'series' - }, - data: [120, 132, 101, 134, 90, 230, 210] - }, - { - name: '停机', - type: 'bar', - stack: 'total', - barWidth: '30%', - label: { - show: true - }, - emphasis: { - focus: 'series' - }, - data: [220, 182, 191, 234, 290, 330, 310] - }, - { - name: '故障', - type: 'bar', - stack: 'total', - barWidth: '30%', - label: { - show: true - }, - emphasis: { - focus: 'series' - }, - data: [150, 212, 201, 154, 190, 330, 410] - } - ] + data: item.data + }; + }) } }); diff --git a/src/views/screen/devItem/image/u156.png b/src/views/screen/devItem/image/u156.png new file mode 100644 index 0000000..6627dbb Binary files /dev/null and b/src/views/screen/devItem/image/u156.png differ diff --git a/src/views/screen/devItem/image/u157.png b/src/views/screen/devItem/image/u157.png new file mode 100644 index 0000000..c3ee4db Binary files /dev/null and b/src/views/screen/devItem/image/u157.png differ diff --git a/src/views/screen/devItem/image/u158.png b/src/views/screen/devItem/image/u158.png new file mode 100644 index 0000000..d1c85da Binary files /dev/null and b/src/views/screen/devItem/image/u158.png differ diff --git a/src/views/screen/devItem/image/u83.png b/src/views/screen/devItem/image/u83.png new file mode 100644 index 0000000..36c0203 Binary files /dev/null and b/src/views/screen/devItem/image/u83.png differ diff --git a/src/views/screen/devItem/index.vue b/src/views/screen/devItem/index.vue index b8267c0..8dd912c 100644 --- a/src/views/screen/devItem/index.vue +++ b/src/views/screen/devItem/index.vue @@ -10,49 +10,121 @@ - 名称:{{ '什么什么什么什么什么缝纫机' }} + + 名称: + {{ deviceInfo.name }} + - 编号:{{ 'xxxxxx' }} + + 编号: + {{ deviceInfo.code }} + - 负责人:{{ 'xxxxxx' }} + + 负责人: + {{ deviceInfo.director }} + - 所在位置:{{ 'xxxxxx' }} + + 所在位置: + {{ deviceInfo.deviceLocation }} + - + + + + + + + + + 工作 + + + + 待机 + + + + 停机 + + + + 维修 + + + + 故障 + + - 当前状态: - 运行时长: + 当前状态: + + + + + + 运行时长:{{ devStatus.runTime }}min - 停机时长: - 工作时长: + 停机时长:{{ devStatus.stopTime }}min + + 工作时长:{{ devStatus.workTime }}min - 故障时长: - 待机时长: + 故障时长:{{ devStatus.faultTime }}min + 待机时长:{{ devStatus.waitTime }}min - + - + + + + + + + + + + - + + + + + + + + + + - + + + @@ -60,11 +132,126 @@