update
This commit is contained in:
hzz
parent
ddddc85dd3
commit
ca5d1cc56e
@ -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 }
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
1
src/assets/icons/svg/alarm.svg
Normal file
1
src/assets/icons/svg/alarm.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1740536373624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3564" width="256" height="256"><path d="M845.3 978.7c-8.7-8.7-19.9-14.9-32.4-17.4-7.5-1.5-12.9-7.9-12.9-15.5V578.2c0-159-130.1-290.8-289.1-290.2-158.5 0.6-286.9 129.3-286.9 288v369.8c0 7.6-5.4 14-12.9 15.5-29.2 6-51.1 31.8-51.1 62.7h704c0-17.7-7.2-33.7-18.7-45.3zM567.3 464l-19.4 173.3H624L456.8 880l19.4-173.3H400L567.3 464zM512 208c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32s32 14.3 32 32v144c0 17.7-14.3 32-32 32zM280 296.1c-15.3 8.8-34.9 3.6-43.7-11.7l-72-124.7c-8.8-15.3-3.6-34.9 11.7-43.7 15.3-8.8 34.9-3.6 43.7 11.7l72 124.7c8.8 15.3 3.6 34.8-11.7 43.7zM744 296.1c15.3 8.8 34.9 3.6 43.7-11.7l72-124.7c8.8-15.3 3.6-34.9-11.7-43.7-15.3-8.8-34.9-3.6-43.7 11.7l-72 124.7c-8.8 15.3-3.6 34.8 11.7 43.7zM202.5 444.9c-4.6 17.1-22.1 27.2-39.2 22.6L24.2 430.3C7.1 425.7-3 408.2 1.5 391.1c4.6-17.1 22.1-27.2 39.2-22.6l139.1 37.3c17.1 4.5 27.2 22 22.7 39.1zM821.5 444.9c4.6 17.1 22.1 27.2 39.2 22.6l139.1-37.3c17.1-4.6 27.2-22.1 22.6-39.2-4.6-17.1-22.1-27.2-39.2-22.6l-139.1 37.3c-17 4.6-27.1 22.1-22.6 39.2z" p-id="3565" fill="#F7595B"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
src/assets/icons/svg/repair.svg
Normal file
1
src/assets/icons/svg/repair.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1740535935166" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2370" width="256" height="256"><path d="M835.707408 791.0893c8.945488 8.935549 8.945488 23.039602-0.268365 32.52182-8.667184 8.408759-22.771238 8.408759-31.99503-0.546669l-140.434229-140.145985c-8.667184-8.935549-8.667184-23.039602 0.546669-32.253456 8.677124-8.677124 23.317907-8.677124 32.531759 0L835.707408 791.0893zM773.625718 0c14.640783 0 29.55987 1.083398 44.190713 4.601957 15.455816 2.713465 29.54993 7.325361 43.107315 13.020655 18.974375 8.130455 28.198167 30.633328 19.789408 50.154372a39.638453 39.638453 0 0 1-7.86209 11.927318c-29.013201 29.003261-58.016462 57.748098-86.761299 86.751359l4.880261 17.354247 4.343532 17.622613 17.890977 4.88026 17.354247 4.611897c28.734897-29.003261 57.748098-57.479733 86.751359-86.761299 14.650722-14.909147 39.042087-14.909147 54.2196 0 4.343532 4.611896 7.593726 10.307191 9.223792 16.27085a195.558317 195.558317 0 0 1 11.658953 38.495418v0.546669h0.268365c2.703525 13.825749 4.343532 28.734897 4.343532 44.459078 0 60.998292-25.216338 117.116322-65.610188 157.788476-40.125485 40.39385-96.52182 65.341823-157.788477 65.341823-4.343532 0-8.677124-0.268365-13.020655-0.268364l-42.292282 41.745612L950.935238 721.145519l1.888492 2.166797a156.715018 156.715018 0 0 1 44.190713 109.254232c0 40.125485-15.177512 80.519335-46.089144 111.152663l-0.546669 0.546669c-30.901693 30.374903-70.490449 45.552415-110.615934 45.552415s-81.056065-15.177512-111.152663-46.099084l-233.159187-232.880882-237.741264 238.307812c-49.617642 49.607703-109.532536 53.951235-158.60351 32.810063-18.974375-7.86209-36.050318-19.789408-50.154371-33.893461h-0.268365c-14.094114-14.362479-25.753067-31.179997-33.615158-49.886007-21.141171-49.070974-16.807579-109.254232 33.078429-158.593571v-0.546669L313.290884 473.892219l-97.05855-97.058549-86.214629-25.753067a37.740022 37.740022 0 0 1-24.401305-21.419475L22.930269 135.822333c-7.593726-14.094114-5.148626-32.53176 6.778692-44.459078L64.407517 56.933064 98.569343 22.771238c10.575555-10.565616 27.114769-14.640783 41.755552-8.130455l196.283895 83.769529a37.571051 37.571051 0 0 1 21.68784 24.401305l25.484703 86.214629 97.058549 97.05855 69.675415-69.138686c-0.268365-4.880261-0.546669-9.492157-0.546668-13.010716h0.268364c0-62.08169 24.947973-118.19972 65.341824-158.325206v-0.278304c40.383911-40.115546 96.511881-65.331884 158.046901-65.331884z m-109.532536 542.752601l-114.402857 114.412797 232.602578 232.602578c15.455816 15.724181 36.865352 23.854636 57.469793 23.854636s41.487187-8.130455 56.943004-23.586271l0.536729-0.268365c15.724181-15.177512 23.049542-36.596987 23.049542-57.201428 0-20.067712-7.325361-40.39385-21.966144-55.581302l-1.620127-1.620127-232.612518-232.612518zM366.963814 420.209349l59.914894-59.636589-103.837242-104.105607a38.525237 38.525237 0 0 1-10.297251-18.974375l-22.502873-76.185743L134.082932 95.428483l-15.992545 15.72418-15.992546 16.260911 66.425222 156.158409 78.620903 23.049542c6.510328 1.898431 11.927318 5.148626 16.27085 10.028887L366.963814 420.209349zM768.208728 76.454108a146.248796 146.248796 0 0 0-98.688616 43.375679 145.562976 145.562976 0 0 0-43.37568 104.105607h0.546669v10.575555l1.083398 8.945488c2.703525 11.927318-1.083398 24.938034-10.30719 34.430191L102.097841 792.987731h-0.268364c-23.854636 24.669669-26.568101 52.599472-16.807579 75.639074 4.065228 8.935549 10.307191 17.890977 17.622612 25.474764 7.86209 7.593726 16.539214 13.557385 26.031371 17.622612 23.039602 10.028886 50.701041 7.315422 75.092406-16.539214l264.060879-264.05094 1.083398-1.083398 168.085728-168.354092 1.083398-1.351763 80.7877-80.250971h0.268364c7.86209-8.677124 20.067712-13.010716 32.263395-11.112284 3.796863 0.536729 7.315422 1.083398 11.390589 1.083398 2.703525 0.268365 6.500388 0.546669 10.84392 0.546669 40.672154 0 77.537506-16.539214 104.105606-42.560646v-0.546669c25.216338-24.938034 41.208883-59.914894 42.570586-98.688616-16.539214 16.807579-33.078428 33.078428-49.617643 50.154371-9.482218 10.565616-23.854636 14.909147-38.495418 11.658954l-38.495419-10.575556-39.042087-10.565615c-13.020655-3.528498-23.586271-13.020655-27.11477-27.11477l-10.297251-39.042087-10.575555-39.042087c-2.981829-11.927318-0.268365-26.568101 10.038826-36.060258 17.056065-17.344308 34.141948-34.420252 51.496195-51.774499z" fill="#E0E500" p-id="2371"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
6
src/assets/icons/svg/run.svg
Normal file
6
src/assets/icons/svg/run.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -436 -253 )">
|
||||
<path d="M 6.15 6.22 C 7.15 5.24325581395349 8.57 4.69627906976744 10 4.69627906976744 C 11.43 4.69627906976744 12.86 5.25302325581395 13.86 6.22976744186046 C 14.86 7.20651162790698 15.43 8.46651162790698 15.43 9.85348837209303 C 15.43 11.2404651162791 14.86 12.5004651162791 13.86 13.4772093023256 C 11.72 15.5674418604651 8.29 15.5674418604651 6.15 13.6139534883721 C 5.15 12.6372093023256 4.58 11.2404651162791 4.58 9.84372093023256 C 4.58 8.44697674418605 5.15 7.19674418604651 6.15 6.22 Z M 11.43 1.2093023255814 L 11.29 1.2093023255814 C 14.43 1.6293023255814 17 3.71953488372093 18.29 6.51302325581395 C 18.58 7.20651162790698 18.86 7.90976744186047 19 8.60325581395349 L 20 8.60325581395349 C 19.43 4.27627906976744 15.86 0.789302325581395 11.43 0.232558139534884 L 11.43 1.2093023255814 Z M 0 8.60325581395349 L 1 8.60325581395349 C 1.14 7.90976744186047 1.29 7.20651162790698 1.57 6.51302325581395 C 2.86 3.71953488372093 5.57 1.6293023255814 8.57 1.2093023255814 L 8.57 0.232558139534884 C 4.14 0.789302325581395 0.57 4.27627906976744 0 8.60325581395349 Z M 20 11.26 L 19 11.26 C 18.86 11.953488372093 18.71 12.6567441860465 18.43 13.3502325581395 C 17.14 16.1437209302326 14.57 18.2339534883721 11.43 18.6539534883721 L 11.43 19.6306976744186 C 15.86 19.0739534883721 19.43 15.586976744186 20 11.26 Z M 8.57 19.6306976744186 L 8.57 18.6539534883721 C 5.43 18.2339534883721 2.86 16.1437209302326 1.57 13.3502325581395 C 1.28 12.6567441860465 1.14 11.953488372093 1 11.26 L 0 11.26 C 0.57 15.586976744186 4.14 19.0739534883721 8.57 19.6306976744186 Z " fill-rule="nonzero" fill="#aaef8a" stroke="none" transform="matrix(1 0 0 1 436 253 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/icons/svg/stop.svg
Normal file
6
src/assets/icons/svg/stop.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -436 -311 )">
|
||||
<path d="M 6.15 6.22 C 7.15 5.24325581395349 8.57 4.69627906976744 10 4.69627906976744 C 11.43 4.69627906976744 12.86 5.25302325581395 13.86 6.22976744186046 C 14.86 7.20651162790698 15.43 8.46651162790698 15.43 9.85348837209303 C 15.43 11.2404651162791 14.86 12.5004651162791 13.86 13.4772093023256 C 11.72 15.5674418604651 8.29 15.5674418604651 6.15 13.6139534883721 C 5.15 12.6372093023256 4.58 11.2404651162791 4.58 9.84372093023256 C 4.58 8.44697674418605 5.15 7.19674418604651 6.15 6.22 Z M 11.43 1.2093023255814 L 11.29 1.2093023255814 C 14.43 1.6293023255814 17 3.71953488372093 18.29 6.51302325581395 C 18.58 7.20651162790698 18.86 7.90976744186047 19 8.60325581395349 L 20 8.60325581395349 C 19.43 4.27627906976744 15.86 0.789302325581395 11.43 0.232558139534884 L 11.43 1.2093023255814 Z M 0 8.60325581395349 L 1 8.60325581395349 C 1.14 7.90976744186047 1.29 7.20651162790698 1.57 6.51302325581395 C 2.86 3.71953488372093 5.57 1.6293023255814 8.57 1.2093023255814 L 8.57 0.232558139534884 C 4.14 0.789302325581395 0.57 4.27627906976744 0 8.60325581395349 Z M 20 11.26 L 19 11.26 C 18.86 11.953488372093 18.71 12.6567441860465 18.43 13.3502325581395 C 17.14 16.1437209302326 14.57 18.2339534883721 11.43 18.6539534883721 L 11.43 19.6306976744186 C 15.86 19.0739534883721 19.43 15.586976744186 20 11.26 Z M 8.57 19.6306976744186 L 8.57 18.6539534883721 C 5.43 18.2339534883721 2.86 16.1437209302326 1.57 13.3502325581395 C 1.28 12.6567441860465 1.14 11.953488372093 1 11.26 L 0 11.26 C 0.57 15.586976744186 4.14 19.0739534883721 8.57 19.6306976744186 Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" transform="matrix(1 0 0 1 436 311 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/icons/svg/wait.svg
Normal file
6
src/assets/icons/svg/wait.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -436 -281 )">
|
||||
<path d="M 6.15 6.22 C 7.15 5.24325581395349 8.57 4.69627906976744 10 4.69627906976744 C 11.43 4.69627906976744 12.86 5.25302325581395 13.86 6.22976744186046 C 14.86 7.20651162790698 15.43 8.46651162790698 15.43 9.85348837209303 C 15.43 11.2404651162791 14.86 12.5004651162791 13.86 13.4772093023256 C 11.72 15.5674418604651 8.29 15.5674418604651 6.15 13.6139534883721 C 5.15 12.6372093023256 4.58 11.2404651162791 4.58 9.84372093023256 C 4.58 8.44697674418605 5.15 7.19674418604651 6.15 6.22 Z M 11.43 1.2093023255814 L 11.29 1.2093023255814 C 14.43 1.6293023255814 17 3.71953488372093 18.29 6.51302325581395 C 18.58 7.20651162790698 18.86 7.90976744186047 19 8.60325581395349 L 20 8.60325581395349 C 19.43 4.27627906976744 15.86 0.789302325581395 11.43 0.232558139534884 L 11.43 1.2093023255814 Z M 0 8.60325581395349 L 1 8.60325581395349 C 1.14 7.90976744186047 1.29 7.20651162790698 1.57 6.51302325581395 C 2.86 3.71953488372093 5.57 1.6293023255814 8.57 1.2093023255814 L 8.57 0.232558139534884 C 4.14 0.789302325581395 0.57 4.27627906976744 0 8.60325581395349 Z M 20 11.26 L 19 11.26 C 18.86 11.953488372093 18.71 12.6567441860465 18.43 13.3502325581395 C 17.14 16.1437209302326 14.57 18.2339534883721 11.43 18.6539534883721 L 11.43 19.6306976744186 C 15.86 19.0739534883721 19.43 15.586976744186 20 11.26 Z M 8.57 19.6306976744186 L 8.57 18.6539534883721 C 5.43 18.2339534883721 2.86 16.1437209302326 1.57 13.3502325581395 C 1.28 12.6567441860465 1.14 11.953488372093 1 11.26 L 0 11.26 C 0.57 15.586976744186 4.14 19.0739534883721 8.57 19.6306976744186 Z " fill-rule="nonzero" fill="#f59a23" stroke="none" transform="matrix(1 0 0 1 436 281 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@ -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)
|
||||
}
|
||||
59
src/directive/tableScroll/tableAutoScroll.ts
Normal file
59
src/directive/tableScroll/tableAutoScroll.ts
Normal file
@ -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
|
||||
})
|
||||
},
|
||||
}
|
||||
@ -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
|
||||
},
|
||||
|
||||
@ -8,6 +8,12 @@
|
||||
<el-input v-model="form.name" :placeholder="tLang('common', '请输入') + tLang('device', '设备名称')" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="tLang('device', '机架号')" prop="label">
|
||||
<el-input v-model="form.code" :placeholder="tLang('common', '请输入') + tLang('device', '机架号')"
|
||||
:disabled="form.id !== null" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item :label="tLang('device', '设备编码')" prop="code">
|
||||
<el-input v-model="form.code" :placeholder="tLang('common', '请输入') + tLang('device', '设备编码')"
|
||||
@ -189,8 +195,8 @@ const rules = {
|
||||
name: [
|
||||
{ required: true, message: `${proxy.tLang('device', '设备名称')} ` + proxy.tLang('validate', '不能为空'), trigger: "blur" }
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: `${proxy.tLang('device', '设备编码')} ` + proxy.tLang('validate', '不能为空'), trigger: "blur" }
|
||||
label: [
|
||||
{ required: true, message: `${proxy.tLang('device', '机架号')} ` + proxy.tLang('validate', '不能为空'), trigger: "blur" }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: `${proxy.tLang('device', '设备类型')} ` + proxy.tLang('validate', '不能为空'), trigger: "change" }
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column type="index" :label="$t('common.序号')" width="60" align="center" />
|
||||
<el-table-column :label="tLang('device', '设备名称')" align="center" v-if="columns[0].visible" prop="name" />
|
||||
<el-table-column :label="tLang('device', '设备编码')" align="center" v-if="columns[1].visible" prop="code" />
|
||||
<el-table-column :label="tLang('device', '机架号')" align="center" v-if="columns[1].visible" prop="label" />
|
||||
<el-table-column :label="tLang('device', '设备类型')" align="center" v-if="columns[2].visible" prop="type">
|
||||
<template #default="{ row }">
|
||||
<span>{{ typeOptions.find(item => item.value == row.type)?.label }}</span>
|
||||
@ -90,10 +90,10 @@
|
||||
<el-table-column :label="tLang('device', '备注')" align="center" v-if="columns[12].visible" prop="remark" />
|
||||
<el-table-column :label="tLang('common', '操作')" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip :content="tLang('common', '下载报表')" placement="top" v-if="scope.row.userId !== 1">
|
||||
<!-- <el-tooltip :content="tLang('common', '下载报表')" placement="top" v-if="scope.row.userId !== 1">
|
||||
<el-button link type="primary" icon="Download" @click="handleDownload(scope.row)"
|
||||
v-hasPermi="['pms:device:download']"></el-button>
|
||||
</el-tooltip>
|
||||
</el-tooltip> -->
|
||||
<el-tooltip :content="tLang('common', '详情')" placement="top" v-if="scope.row.userId !== 1">
|
||||
<el-button link type="primary" icon="Tickets" @click="handleInfo(scope.row)"
|
||||
v-hasPermi="['pms:device:query']"></el-button>
|
||||
@ -102,10 +102,10 @@
|
||||
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['pms:device:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip :content="tLang('common', '解绑')" placement="top" v-if="scope.row.sn&&scope.row.sn.length > 0">
|
||||
<!-- <el-tooltip :content="tLang('common', '解绑')" placement="top" v-if="scope.row.sn&&scope.row.sn.length > 0">
|
||||
<el-button link type="primary" icon="Failed" @click="handleUnbind(scope.row)"
|
||||
v-hasPermi="['pms:device:edit']"></el-button>
|
||||
</el-tooltip>
|
||||
</el-tooltip> -->
|
||||
<el-tooltip :content="tLang('common', '删除')" placement="top" v-if="scope.row.userId !== 1">
|
||||
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
|
||||
v-hasPermi="['pms:device:remove']"></el-button>
|
||||
@ -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 },
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<el-dialog v-model="props.modelValue" :title="tLang('device','设备详情')" @close="close" width="800">
|
||||
<el-descriptions :title="tLang('device','设备信息')">
|
||||
<el-descriptions-item :label="tLang('device','设备编码')">{{ props.info.code }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="tLang('device','设备名称')">{{ props.info.name }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="tLang('device','机架号')">{{ props.info.label }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="tLang('device','设备编码')">{{ props.info.code }}</el-descriptions-item>
|
||||
<el-descriptions-item :label="tLang('device','设备类型')">{{ props.info.type }}</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item :label="tLang('device','设备型号')">{{ props.info.model }}</el-descriptions-item>
|
||||
|
||||
65
src/views/screen/devItem/component/Progress.vue
Normal file
65
src/views/screen/devItem/component/Progress.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="progress-container">
|
||||
<div class="text-label">
|
||||
<div class="label-left">{{ prop.mdoelValue1.date }}</div>
|
||||
<div class="label-right"><i class="value">{{ prop.mdoelValue1.rate }}</i> %</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<el-progress :percentage="percentage" stroke-width="8" :color="checkCb(prop.mdoelValue1)" :show-text="false"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,computed } from 'vue';
|
||||
|
||||
const prop = defineProps({
|
||||
mdoelValue1:{
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
date: '',
|
||||
rate: 10,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
const percentage = computed(() => {
|
||||
console.log(prop.mdoelValue1.data);
|
||||
|
||||
return prop.mdoelValue1.rate > 100 ? 100 : prop.mdoelValue1.rate;
|
||||
})
|
||||
|
||||
//检测是否超标
|
||||
function checkCb(item) {
|
||||
if (item.data > 85) {
|
||||
return '#FF0000'
|
||||
} else {
|
||||
return '#469DE9'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
.text-label {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #2affff;
|
||||
box-sizing: border-box;
|
||||
.label-right {
|
||||
.value {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
src/views/screen/devItem/component/lineChart.vue
Normal file
108
src/views/screen/devItem/component/lineChart.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
xAxis: [],
|
||||
series: []
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const options = computed(() => {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00c6ff',
|
||||
borderWidth: 2,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
formatter: function (params) {
|
||||
let tooltipText = '';
|
||||
let xAxisValue = params[0].name;
|
||||
params.forEach((item) => {
|
||||
tooltipText += `<div style="padding: 2px 0;"><strong>${item.seriesName}:</strong> ${item.value}%</div>`;
|
||||
});
|
||||
return `${xAxisValue}<br>${tooltipText}`;
|
||||
},
|
||||
padding: 10,
|
||||
extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
|
||||
},
|
||||
backgroundColor: 'transparent',
|
||||
// legend: {
|
||||
// data: ['上月', '本月'],
|
||||
// right: 'left',
|
||||
// textStyle: {
|
||||
// color: '#ffff'
|
||||
// }
|
||||
// },
|
||||
grid: {
|
||||
left: '10%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: prop.data.xAxis,
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#3c3a4a85',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
formatter: function (value) {
|
||||
return `${value} %`;
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '利用率',
|
||||
data: prop.data.series,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
color: 'rgb(150 ,162 ,116)',
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: 'rgb(150 ,162 ,116 ,0.6)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(150 ,162 ,116 ,0.2)'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -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
|
||||
};
|
||||
})
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
BIN
src/views/screen/devItem/image/u156.png
Normal file
BIN
src/views/screen/devItem/image/u156.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 642 B |
BIN
src/views/screen/devItem/image/u157.png
Normal file
BIN
src/views/screen/devItem/image/u157.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
BIN
src/views/screen/devItem/image/u158.png
Normal file
BIN
src/views/screen/devItem/image/u158.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/views/screen/devItem/image/u83.png
Normal file
BIN
src/views/screen/devItem/image/u83.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 611 B |
@ -10,49 +10,121 @@
|
||||
<Card class="ltl-item1" title="设备详情">
|
||||
<div class="ltl-content">
|
||||
<div class="ltl-box">
|
||||
<div class="ltl-item-box"><div class="label">名称：</div><div class="value">{{ '什么什么什么什么什么缝纫机' }}</div></div>
|
||||
<div class="ltl-item-box">
|
||||
<div class="label">名称：</div>
|
||||
<div class="value">{{ deviceInfo.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ltl-box">
|
||||
<div class="ltl-item-box"><div class="label">编号：</div><div class="value">{{ 'xxxxxx' }}</div></div>
|
||||
<div class="ltl-item-box">
|
||||
<div class="label">编号：</div>
|
||||
<div class="value">{{ deviceInfo.code }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ltl-box">
|
||||
<div class="ltl-item-box"><div class="label">负责人：</div><div class="value">{{ 'xxxxxx' }}</div></div>
|
||||
<div class="ltl-item-box">
|
||||
<div class="label">负责人：</div>
|
||||
<div class="value">{{ deviceInfo.director }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ltl-box">
|
||||
<div class="ltl-item-box"><div class="label">所在位置：</div><div class="value">{{ 'xxxxxx' }}</div></div>
|
||||
<div class="ltl-item-box">
|
||||
<div class="label">所在位置：</div>
|
||||
<div class="value">{{ deviceInfo.deviceLocation }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Card>
|
||||
<Card class="ltl-item2" title="设备详情"></Card>
|
||||
<Card class="ltl-item2" title="设备利用率">
|
||||
<div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-around;align-items: center;">
|
||||
<Progress :mdoelValue1="item" v-for="item in deviceRateChartData"></Progress>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div class="ltr-plane">
|
||||
<div class="tip-type">
|
||||
<div class="tip-type-item">
|
||||
<svg-icon icon-class="run" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="tip-type-item">
|
||||
<svg-icon icon-class="wait" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="tip-type-item">
|
||||
<svg-icon icon-class="stop" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="tip-type-item-text">停机</div>
|
||||
</div>
|
||||
<div class="tip-type-item">
|
||||
<svg-icon icon-class="repair" class="el-input__icon"
|
||||
style="width: 26px;height: 26px;" />
|
||||
<div class="tip-type-item-text">维修</div>
|
||||
</div>
|
||||
<div class="tip-type-item">
|
||||
<svg-icon icon-class="alarm" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="tip-type-item-text">故障</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-item c-top">
|
||||
<div class="item-box">当前状态：</div>
|
||||
<div class="item-box">运行时长：</div>
|
||||
<div class="item-box">当前状态：
|
||||
<svg-icon v-if="devStatus.state == 0" icon-class="stop"
|
||||
class="el-input__icon input-icon" />
|
||||
<svg-icon v-else-if="devStatus.state == 1" icon-class="wait"
|
||||
class="el-input__icon input-icon" />
|
||||
<svg-icon v-else-if="devStatus.state == 2" icon-class="run"
|
||||
class="el-input__icon input-icon" />
|
||||
<svg-icon v-else-if="devStatus.state == 4" icon-class="alarm"
|
||||
class="el-input__icon input-icon" />
|
||||
</div>
|
||||
<div class="item-box">运行时长：{{ devStatus.runTime }}min</div>
|
||||
</div>
|
||||
<div class="c-item c-center">
|
||||
<div class="item-box">停机时长：</div>
|
||||
<div class="item-box">工作时长：</div>
|
||||
<div class="item-box">停机时长：{{ devStatus.stopTime }}min</div>
|
||||
<el-image :src="baseUrl + deviceInfo.file"
|
||||
style="height: 100%;position: relative;top: -30px;" />
|
||||
<div class="item-box">工作时长：{{ devStatus.workTime }}min</div>
|
||||
</div>
|
||||
<div class="c-item c-bottom">
|
||||
<div class="item-box">故障时长：</div>
|
||||
<div class="item-box">待机时长：</div>
|
||||
<div class="item-box">故障时长：{{ devStatus.faultTime }}min</div>
|
||||
<div class="item-box">待机时长：{{ devStatus.waitTime }}min</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Card class="lb-plane" title="设备状态分析">
|
||||
<StackBarChart></StackBarChart>
|
||||
<StackBarChart :data="deviceStatusChartData"></StackBarChart>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
<div class="right-plane">
|
||||
|
||||
<Card class="right-item1" title="设备维修记录"></Card>
|
||||
<Card class="right-item1" title="设备维修记录">
|
||||
<el-table :data="repairData" v-if="repairData.length > 0" v-tableAutoScroll="{ delay: 15 }"
|
||||
header-row-class-name="table_header" style="width: 100%;height: 100%;">
|
||||
<el-table-column prop="devCode" label="编码" width="90" />
|
||||
<el-table-column prop="name" label="设备名称" />
|
||||
<el-table-column prop="runTime" label="报警内容" />
|
||||
<el-table-column prop="person" label="负责人" />
|
||||
<el-table-column prop="time" label="报警时间" />
|
||||
</el-table>
|
||||
<el-empty v-else description="暂无记录" />
|
||||
</Card>
|
||||
|
||||
<Card class="right-item2" title="设备保养记录"></Card>
|
||||
<Card class="right-item2" title="设备保养记录">
|
||||
<el-table :data="remindData" v-if="remindData.length > 0" v-tableAutoScroll="{ delay: 15 }"
|
||||
header-row-class-name="table_header" style="width: 100%;height: 100%;">
|
||||
<el-table-column prop="devCode" label="编码" width="90" />
|
||||
<el-table-column prop="name" label="设备名称" />
|
||||
<el-table-column prop="runTime" label="保养内容" />
|
||||
<el-table-column prop="person" label="负责人" />
|
||||
<el-table-column prop="time" label="保养时间" />
|
||||
</el-table>
|
||||
<el-empty v-else description="暂无记录" />
|
||||
</Card>
|
||||
|
||||
<Card class="right-item3" title="设备用电量分析"></Card>
|
||||
<Card class="right-item3" title="设备用电量分析">
|
||||
<LineChart :data="deviceElectChartData"></LineChart>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -60,11 +132,126 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import { onMounted, ref } from 'vue';
|
||||
import Card from './component/card.vue';
|
||||
import StackBarChart from './component/stackBarChart.vue';
|
||||
import Progress from './component/Progress.vue';
|
||||
import LineChart from './component/lineChart.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { listDevice, deviceCheck, deviceRepair, deviceStatusById, deviceStatusChart,deviceRateChart,deviceElectChart } from '@/api/screen/micro'
|
||||
|
||||
|
||||
const route = useRoute();
|
||||
let id = ref(0)
|
||||
|
||||
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||
let deviceInfo = ref({})
|
||||
//获取设备列表
|
||||
function getListDevice() {
|
||||
listDevice(id.value).then(res => {
|
||||
deviceInfo.value = res.data
|
||||
|
||||
})
|
||||
}
|
||||
let remindData = ref([])
|
||||
//获取保养记录
|
||||
const getDeviceCheck = async () => {
|
||||
const res = await deviceCheck(id.value);
|
||||
remindData.value = res.data;
|
||||
}
|
||||
|
||||
let repairData = ref([])
|
||||
//获取维修记录
|
||||
const getDeviceRepair = async () => {
|
||||
const res = await deviceRepair(id.value);
|
||||
repairData.value = res.data;
|
||||
}
|
||||
|
||||
let devStatus = ref({
|
||||
"deviceCode": null,
|
||||
"onlineTime": null,
|
||||
"realTime": null,
|
||||
"deviceId": null,
|
||||
"workTime": null,
|
||||
"runTime": null,
|
||||
"waitTime": null,
|
||||
"stopTime": null,
|
||||
"faultTime": null,
|
||||
"ts": null,
|
||||
"state": null,
|
||||
})
|
||||
//单设备运行状态
|
||||
const getDeviceStatus = async () => {
|
||||
const res = await deviceStatusById(id.value);
|
||||
devStatus.value = res.data;
|
||||
}
|
||||
|
||||
let deviceStatusChartData = reactive({
|
||||
xAxis: [],
|
||||
series: []
|
||||
})
|
||||
//设备状态图表
|
||||
const getDeviceStatusChart = async () => {
|
||||
const res = await deviceStatusChart(id.value);
|
||||
deviceStatusChartData.xAxis = res.data.dates;
|
||||
deviceStatusChartData.series.push({
|
||||
name: '工作',
|
||||
data: res.data.work
|
||||
})
|
||||
deviceStatusChartData.series.push({
|
||||
name: '待机',
|
||||
data: res.data.wait
|
||||
})
|
||||
deviceStatusChartData.series.push({
|
||||
name: '停机',
|
||||
data: res.data.stop
|
||||
})
|
||||
deviceStatusChartData.series.push({
|
||||
name: '故障',
|
||||
data: res.data.fault
|
||||
})
|
||||
}
|
||||
|
||||
//设备利用率
|
||||
let deviceRateChartData = ref([])
|
||||
const getDeviceRateChart = async () => {
|
||||
const res = await deviceRateChart(id.value);
|
||||
deviceRateChartData.value = res.data;
|
||||
}
|
||||
|
||||
//单设备用电量图表
|
||||
let deviceElectChartData = reactive({
|
||||
xAxis: [],
|
||||
series: []
|
||||
})
|
||||
function getdeviceElectChart() {
|
||||
deviceElectChart(id.value).then(res => {
|
||||
deviceElectChartData.xAxis = res.data.dates;
|
||||
deviceElectChartData.series = res.data.elects;
|
||||
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
id.value = route.params.id;
|
||||
getDeviceCheck();
|
||||
getDeviceRepair();
|
||||
getListDevice()
|
||||
getDeviceStatus()
|
||||
getDeviceStatusChart()
|
||||
getDeviceRateChart()
|
||||
getdeviceElectChart()
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.table_header th) {
|
||||
background-color: transparent !important;
|
||||
color: #21dadb;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
@ -175,6 +362,7 @@ import StackBarChart from './component/stackBarChart.vue';
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
width: 50%;
|
||||
text-wrap: nowrap;
|
||||
@ -194,6 +382,7 @@ import StackBarChart from './component/stackBarChart.vue';
|
||||
}
|
||||
|
||||
.ltr-plane {
|
||||
position: relative;
|
||||
width: 892px;
|
||||
height: 100%;
|
||||
background: url('./image/center-bg.png') no-repeat;
|
||||
@ -204,15 +393,39 @@ import StackBarChart from './component/stackBarChart.vue';
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tip-type {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 260px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
.tip-type-item {
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.c-top,
|
||||
.c-bottom {
|
||||
width: 70%;
|
||||
height: 120px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.c-center {
|
||||
width: 85%;
|
||||
height: 100px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.c-item {
|
||||
|
||||
@ -6,13 +6,8 @@
|
||||
import { computed, ref } from 'vue';
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
xAxis: [],
|
||||
series: []
|
||||
};
|
||||
}
|
||||
type: Number,
|
||||
default: 84.3
|
||||
}
|
||||
});
|
||||
|
||||
@ -43,10 +38,15 @@ const options = computed(() => {
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false },
|
||||
data: [{
|
||||
value: 82.43,
|
||||
value: prop.data,
|
||||
// name: '完成率',
|
||||
title: { offsetCenter: ['0%', '0%'] },
|
||||
detail: { offsetCenter: ['0%', '0%'] }
|
||||
detail: {
|
||||
offsetCenter: ['0%', '0%'], formatter: function (value) {
|
||||
return value.toFixed(1) + '%';
|
||||
}
|
||||
},
|
||||
|
||||
}]
|
||||
}]
|
||||
}
|
||||
|
||||
@ -1,30 +1,55 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">微工厂设备</div>
|
||||
<div class="title">{{ skinName }}</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="left-panel">
|
||||
<CardVue class="left-container-1" title="设备列表">
|
||||
<scrollBoard ref="DvScrollBoard" :data="scrollBoardConfig_data" :config="scrollBoardConfig">
|
||||
</scrollBoard>
|
||||
<!-- <scrollBoard ref="DvScrollBoard" :data="scrollBoardConfig_data" :config="scrollBoardConfig">
|
||||
</scrollBoard> -->
|
||||
<el-table :data="devList"
|
||||
v-tableAutoScroll="{delay:15}"
|
||||
header-row-class-name="table_header"
|
||||
style="width: 100%;height: 100%;"
|
||||
@row-click="handlePush2item"
|
||||
>
|
||||
<el-table-column prop="code" label="编码" width="90"/>
|
||||
<el-table-column prop="name" label="设备名称" />
|
||||
<el-table-column prop="runTime" label="运行时长" />
|
||||
<el-table-column prop="rate" label="设备利用率" />
|
||||
<el-table-column prop="state" label="状态" >
|
||||
<template #default="{row}">
|
||||
<div style="width:100%;height:100%;display:flex;justify-content: space-around;align-items: center;">
|
||||
<svg-icon v-if="row.state == 0" icon-class="stop" class="el-input__icon input-icon" />
|
||||
<svg-icon v-else-if="row.state == 1" icon-class="wait" class="el-input__icon input-icon" />
|
||||
<svg-icon v-else-if="row.state == 2" icon-class="run" class="el-input__icon input-icon" />
|
||||
<svg-icon v-else-if="row.state == 4" icon-class="alarm" class="el-input__icon input-icon" />
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="left-tip-type">
|
||||
<div class="left-tip-type-item">
|
||||
<img :src="u83" width="26" height="26">
|
||||
<svg-icon icon-class="run" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="left-tip-type-item-text">工作</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<img :src="u156" width="26" height="26">
|
||||
<svg-icon icon-class="wait" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="left-tip-type-item-text">待机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<img :src="u157" width="26" height="26">
|
||||
<svg-icon icon-class="stop" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="left-tip-type-item-text">停机</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<img :src="u158" width="26" height="26">
|
||||
<svg-icon icon-class="repair" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="left-tip-type-item-text">维修</div>
|
||||
</div>
|
||||
<div class="left-tip-type-item">
|
||||
<svg-icon icon-class="alarm" class="el-input__icon" style="width: 26px;height: 26px;" />
|
||||
<div class="left-tip-type-item-text">故障</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardVue>
|
||||
|
||||
@ -64,15 +89,15 @@
|
||||
</div>
|
||||
<div class="status-center">
|
||||
<div class="status-center-item">
|
||||
<div class="item-value item-label-1">{{devStatus.work}}台</div>
|
||||
<div class="item-value item-label-2">{{devStatus.stop}}台</div>
|
||||
<div class="item-value item-label-3">{{devStatus.wait}}台</div>
|
||||
<div class="item-value item-label-4">{{devStatus.total}}台</div>
|
||||
<div class="item-value item-label-1">{{ devStatus.work }}台</div>
|
||||
<div class="item-value item-label-2">{{ devStatus.stop }}台</div>
|
||||
<div class="item-value item-label-3">{{ devStatus.wait }}台</div>
|
||||
<div class="item-value item-label-4">{{ devStatus.total }}台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centerChart">
|
||||
<div class="ring-chart">
|
||||
<RingChart />
|
||||
<RingChart :data="devStatus.work/devStatus.total * 100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -89,25 +114,38 @@
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<CardVue class="left-container" title="设备利用率">
|
||||
<LineChart :data="rateData"/>
|
||||
<LineChart :data="rateData" />
|
||||
</CardVue>
|
||||
<CardVue class="left-container" title="设备提醒">
|
||||
|
||||
<scrollBoard ref="DvScrollBoard" :data="remindData" :config="remindConfig">
|
||||
</scrollBoard>
|
||||
<el-table :data="remindData" v-if="remindData.length > 0" v-tableAutoScroll="{delay:15}" header-row-class-name="table_header" style="width: 100%;height: 100%;">
|
||||
<el-table-column prop="devCode" label="编码" width="90"/>
|
||||
<el-table-column prop="name" label="设备名称" />
|
||||
<el-table-column prop="runTime" label="保养内容" />
|
||||
<el-table-column prop="person" label="负责人" />
|
||||
<el-table-column prop="time" label="保养时间" />
|
||||
</el-table>
|
||||
<el-empty v-else description="暂无记录" />
|
||||
</CardVue>
|
||||
<CardVue class="left-container" title="设备报警">
|
||||
<el-empty description="暂无报警" />
|
||||
<el-table :data="repairData" v-if="repairData.length > 0" v-tableAutoScroll="{delay:15}" header-row-class-name="table_header" style="width: 100%;height: 100%;">
|
||||
<el-table-column prop="devCode" label="编码" width="90"/>
|
||||
<el-table-column prop="name" label="设备名称" />
|
||||
<el-table-column prop="runTime" label="报警内容" />
|
||||
<el-table-column prop="person" label="负责人" />
|
||||
<el-table-column prop="time" label="报警时间" />
|
||||
</el-table>
|
||||
<el-empty v-else description="暂无记录" />
|
||||
</CardVue>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer"></div>
|
||||
<div class="footer">{{skinName}}</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, reactive, onMounted, onUnmounted,getCurrentInstance } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import CardVue from './component/card.vue'
|
||||
import CenterCard from './component/centerCard.vue'
|
||||
import BarChart from './component/barChart.vue'
|
||||
@ -121,43 +159,14 @@ import u156 from './image/u156.png'
|
||||
import u157 from './image/u157.png'
|
||||
import u158 from './image/u158.png'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import { listDevice, listElect, electMonitoring,deviceStatus,deviceRate } from '@/api/screen/micro'
|
||||
|
||||
import { getConfigKey } from "@/api/system/config";
|
||||
import { listDevice, listElect, electMonitoring, deviceStatus, deviceRate,deviceCheck,deviceRepair } from '@/api/screen/micro'
|
||||
|
||||
let {proxy} = getCurrentInstance()
|
||||
let router = useRouter()
|
||||
let radio_bar = ref('d')
|
||||
let scrollBoardConfig = reactive({
|
||||
header: [
|
||||
'<div style="color: #21dadb;">编码</div>',
|
||||
'<div style="color: #21dadb;">设备名称</div>',
|
||||
'<div style="color: #21dadb;">运行时长</div>',
|
||||
'<div style="color: #21dadb;">设备利用率</div>',
|
||||
'<div style="color: #21dadb;">状态</div>'],//, '故障率'
|
||||
headerBGC: 'transparent',
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: 'transparent',
|
||||
rowNum: 10,
|
||||
columnWidth: [180, 280, 180, 180, 120, 120],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
data: [],
|
||||
rawData: []
|
||||
})
|
||||
|
||||
let remindConfig = reactive({
|
||||
header: [
|
||||
'<div style="color: #21dadb;">编码</div>',
|
||||
'<div style="color: #21dadb;">设备名称</div>',
|
||||
'<div style="color: #21dadb;">保养内容</div>',
|
||||
'<div style="color: #21dadb;">负责人</div>',
|
||||
'<div style="color: #21dadb;">保养时间</div>'],//, '故障率'
|
||||
headerBGC: 'transparent',
|
||||
oddRowBGC: 'transparent',
|
||||
evenRowBGC: 'transparent',
|
||||
rowNum: 6,
|
||||
columnWidth: [300, 120, 180, 180, 180, 100],
|
||||
align: ['center', 'center', 'center', 'center', 'center', 'center'],
|
||||
data: [],
|
||||
rawData: []
|
||||
})
|
||||
let skinName = ref('');
|
||||
|
||||
let devStatus = reactive({
|
||||
"wait": 0,
|
||||
@ -165,24 +174,16 @@ let devStatus = reactive({
|
||||
"stop": 0,
|
||||
"rate": 0,
|
||||
"work": 0,
|
||||
"devTypes": [ ]
|
||||
"devTypes": []
|
||||
})
|
||||
|
||||
let devList = ref([])
|
||||
let scrollBoardConfig_data = computed(()=>{
|
||||
let data = []
|
||||
data = devList.value.map(item => {
|
||||
return [
|
||||
item.code,
|
||||
item.name,
|
||||
item.runTime + 'min',
|
||||
item.rate,
|
||||
status2Img(item.state)
|
||||
]
|
||||
})
|
||||
return data
|
||||
})
|
||||
|
||||
function getConfigKeyFun(key) {
|
||||
getConfigKey(key).then(res => {
|
||||
skinName.value = res.msg
|
||||
})
|
||||
}
|
||||
function status2Img(status) {
|
||||
let html = `<div style="width:100%;height:100%;display:flex;justify-content: space-around;align-items: center;">`
|
||||
switch (status) {
|
||||
@ -210,7 +211,7 @@ function status2Img(status) {
|
||||
function getListDevice() {
|
||||
listDevice().then(res => {
|
||||
devList.value = res.data
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
@ -251,24 +252,35 @@ function getelectMonitoring() {
|
||||
})
|
||||
}
|
||||
|
||||
let remindData = ref([
|
||||
['abc', '模板缝纫机', '上油', '张三', '2025-02-19'],
|
||||
['acg', '铺布机', '检查', '李四', '2025-02-20'],
|
||||
let remindData = ref([])
|
||||
|
||||
//获取设备提醒
|
||||
function getdeviceCheck() {
|
||||
deviceCheck().then(res => {
|
||||
remindData.value = res.data
|
||||
})
|
||||
}
|
||||
let repairData = ref([])
|
||||
//获取设备维修
|
||||
function getdeviceRepair() {
|
||||
deviceRepair().then(res => {
|
||||
repairData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
])
|
||||
|
||||
|
||||
|
||||
//获取设备状态
|
||||
function getdeviceStatus() {
|
||||
deviceStatus().then(res=>{
|
||||
deviceStatus().then(res => {
|
||||
devStatus.wait = res.data.wait
|
||||
devStatus.total = res.data.total
|
||||
devStatus.stop = res.data.stop
|
||||
devStatus.rate = res.data.rate
|
||||
devStatus.work = res.data.work
|
||||
devStatus.devTypes = res.data.devTypes
|
||||
getdeviceRepair()
|
||||
})
|
||||
}
|
||||
let rateData = ref()
|
||||
@ -276,9 +288,17 @@ let rateData = ref()
|
||||
function getdeviceRate() {
|
||||
deviceRate().then(res => {
|
||||
rateData.value = {
|
||||
xAxis: res.data.dates,
|
||||
series: res.data.rate
|
||||
}
|
||||
xAxis: res.data.dates,
|
||||
series: res.data.rate
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function handlePush2item(row) {
|
||||
|
||||
router.push({
|
||||
path: '/screen/devItem_' + row.id,
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
@ -287,7 +307,8 @@ onMounted(() => {
|
||||
getelectMonitoring()
|
||||
getdeviceStatus()
|
||||
getdeviceRate()
|
||||
|
||||
getdeviceCheck()
|
||||
getConfigKeyFun('screen.microFactory.title')
|
||||
|
||||
})
|
||||
onUnmounted(() => {
|
||||
@ -295,6 +316,15 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep(.table_header th) {
|
||||
background-color: transparent !important;
|
||||
color: #21dadb;
|
||||
text-align: center;
|
||||
}
|
||||
.input-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
@ -362,7 +392,7 @@ onUnmounted(() => {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 160px;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user