From 5b1322f88a7bf4c48b59bec22d3b86de0a831110 Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期五, 01 十二月 2023 13:13:24 +0800
Subject: [PATCH] 登录页标题改为MDC智慧车间
---
src/views/WorkshopSignage.vue | 566 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 348 insertions(+), 218 deletions(-)
diff --git a/src/views/WorkshopSignage.vue b/src/views/WorkshopSignage.vue
index d77fc20..5dc5cb2 100644
--- a/src/views/WorkshopSignage.vue
+++ b/src/views/WorkshopSignage.vue
@@ -1,257 +1,362 @@
<template>
<dv-full-screen-container class="full-screen-container">
- <header class="page-header">
- {{getWorkshopName}}
- <div class="header-right">
- <a-button type="primary" icon="save" size="large" @click="saveDevicePositionByApi">淇濆瓨浣嶇疆</a-button>
+ <header class="page-header" :style="{height: pageHeaderHeight+'px'}">
+ {{ workshopDetails.workshopName }}
+ <div class="header-left" v-has="'home:saveDevicePositionAndSize'">
+ <a-space>
+ <span v-if="!isSwitchChecked">寮�鍚姛鑳�</span>
+ <span v-else>鍏抽棴鍔熻兘</span>
+ <a-switch
+ checked-children="寮�"
+ un-checked-children="鍏�"
+ @change="handleSwitchChange"
+ v-model="isSwitchChecked"
+ :disabled="isSwitchChecked"
+ />
+ </a-space>
+ <a-button type="primary" icon="save" size="large" @click="saveDevicePositionAndSizeByApi">淇濆瓨浣嶇疆</a-button>
+ </div>
+ <div class="device-status-info">
+ <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info">
+ <div>{{ item.label }}</div>
+ <div class="status-square" :style="{ backgroundColor: item.color }"></div>
+ <div>{{ getDeviceNumberByStatus(item.value) }}</div>
+ </a-space>
</div>
</header>
- <dv-border-box-8 class="content-container">
- <!--<div v-for="item in deviceList" :key="item.equipmentId" class="single-device"-->
- <!--:style="{top:item.top+'px',left:item.left+'px',height:'135px',width:'175px'}" @mousedown="handleMouseDown"-->
- <!--:id="item.equipmentId">-->
- <!--<div class="device-status">-->
- <!--<img v-if="item.status==0" src="@/assets/yellow.png" draggable="false">-->
- <!--<img v-if="item.status==1" src="@/assets/red.png" draggable="false">-->
- <!--<img v-if="item.status==2" src="@/assets/gray.png" draggable="false">-->
- <!--<img v-if="item.status==3" src="@/assets/green.png" draggable="false">-->
- <!--<img :src="item.equipmentImageUrl" draggable="false">-->
- <!--</div>-->
- <!--<div class="device-id">{{item.equipmentId}}</div>-->
- <!--<!–<div draggable="false" class="device-info">–>-->
- <!--<!–<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>–>-->
- <!--<!–<div v-if="item.status==1" class="status-square" style="background-color: red"></div>–>-->
- <!--<!–<div v-if="item.status==2" class="status-square" style="background-color: green"></div>–>-->
- <!--<!–<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>–>-->
- <!--<!–<div class="device-id">{{item.equipmentId}}</div>–>-->
- <!--<!–</div>–>-->
- <!--<!–</div>–>-->
- <!--</div>-->
- <VueDragResize v-for="(item,index) in deviceList" :key="item.equipmentId" :w="item.vw"
- :h="item.vh" :x="item.left" :y="item.top"
- v-on:resizing="resize($event,index)"
- v-on:dragging="resize($event,index)"
- :parentLimitation="true"
- :minw="175"
- :minh="135"
- :id="item.equipmentId"
-
- >
- <div class="single-device"
- :style="{width: + item.vw+ 'px',height:+item.vh+'px'}">
- <div class="device-status">
- <div v-if="item.status==0"
- :style="{backgroundImage:`url(${require('@/assets/yellow.png')})`}" class="status-image"></div>
- <div v-if="item.status==1" :style="{backgroundImage:`url(${require('@/assets/red.png')})`}"
- class="status-image"></div>
- <div v-if="item.status==2" :style="{backgroundImage:`url(${require('@/assets/gray.png')})`}"
- class="status-image"></div>
- <div v-if="item.status==3" :style="{backgroundImage:`url(${require('@/assets/green.png')})`}"
- class="status-image"></div>
- <div
- :style="{backgroundImage:`url(${item.equipmentImageUrl})`}"
- class="device-image"></div>
+ <dv-border-box-8>
+ <div class="content-container" ref="deviceContainerRef">
+ <VueDragResize
+ v-for="(item, index) in deviceList"
+ :key="item.equipmentId"
+ :w="item.vw"
+ :h="item.vh"
+ :x="item.coordinateLeft"
+ :y="item.coordinateTop"
+ v-on:resizing="resize($event, index)"
+ v-on:dragging="resize($event, index)"
+ :parentLimitation="true"
+ :minw="70"
+ :minh="70"
+ :isDraggable="isDraggable"
+ :isResizable="isResizable"
+ :stickSize="6"
+ >
+ <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }"
+ @click="openDetail(item)">
+ <div class="device-status">
+ <div
+ v-if="item.equipmentStatus == 2 || item.equipmentStatus == 1"
+ :style="{ backgroundImage: `url(${require('@/assets/yellow.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ v-if="item.equipmentStatus == 22"
+ :style="{ backgroundImage: `url(${require('@/assets/red.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ v-if="item.equipmentStatus == 0"
+ :style="{ backgroundImage: `url(${require('@/assets/gray.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ v-if="item.equipmentStatus == 3"
+ :style="{ backgroundImage: `url(${require('@/assets/green.png')})` }"
+ class="status-image"
+ ></div>
+ <div
+ :style="{ backgroundImage: `url(${getImgView(item.equipmentImage) || require('@/assets/8.png')})` }"
+ class="device-image"
+ ></div>
+ </div>
+ <div class="device-id" id="deviceId"
+ :style="{ fontSize: item.fontSize + 'px',color:workshopDetails.equipmentIdColor }">
+ {{ item.equipmentId }}
+ </div>
</div>
- <div class="device-id" :style="{fontSize: item.fontSize+'px'}">
- {{item.equipmentId}}
- </div>
- <!--<div draggable="false" class="device-info">-->
- <!--<div v-if="item.status==0" class="status-square" style="background-color: gray"></div>-->
- <!--<div v-if="item.status==1" class="status-square" style="background-color: red"></div>-->
- <!--<div v-if="item.status==2" class="status-square" style="background-color: green"></div>-->
- <!--<div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>-->
- <!--<div class="device-id">{{item.equipmentId}}</div>-->
- <!--</div>-->
- </div>
- </VueDragResize>
+ </VueDragResize>
+ </div>
</dv-border-box-8>
+
+ <EquipmentDetailModal ref="EquipmentDetailModal"></EquipmentDetailModal>
</dv-full-screen-container>
</template>
<script>
import VueDragResize from 'vue-drag-resize'
+ import api from '@/api/mdc'
+ import { getFileAccessHttpUrl } from '@/api/manage'
+ import EquipmentDetailModal from './mdc/base/modules/WorkshopSignage/EquipmentDetailModal'
+ import { message } from 'ant-design-vue'
+
+ message.config({
+ maxCount: 3
+ })
export default {
components: {
- VueDragResize
+ VueDragResize,
+ EquipmentDetailModal
},
data() {
return {
- mouseX: 0, // 榧犳爣鍦ㄥ厓绱犲唴鐨刋鍧愭爣
- mouseY: 0, // 榧犳爣鍦ㄥ厓绱犲唴鐨刌鍧愭爣,
- dragging: false, //鏄惁鍦ㄦ嫋鎷戒腑
- elementId: '',// 琚嫋鎷藉厓绱犵殑id灞炴�у��
- elementWidth: '',
- elementHeight: '',
+ pageHeaderHeight: 80,// 椤靛ご楂樺害
+ taskBarHeight: window.screen.height - window.screen.availHeight,// 灞忓箷搴曢儴浠诲姟鏍忛珮搴�
+ utilsBarHeight: window.outerHeight - window.innerHeight,// 娴忚鍣ㄥ伐鍏锋爮楂樺害
+ normalPageHeight: 0,
+ fullScreenPageHeight: 0,
+ workshopDetails: {}, // 杞﹂棿璇︾粏淇℃伅,
+ isDraggable: false, // 鏄惁寮�鍚嫋鎷�
+ isResizable: false, // 鏄惁寮�鍚缉鏀�
+ isSwitchChecked: false, // 鏄惁寮�鍚姛鑳�
+ timingAcquisition: null, // 瀹氭椂鍒锋柊鏄惁寮�鍚�
deviceList: [
+ // {
+ // equipmentId: '123213213123232',// 璁惧ID
+ // equipmentImage: require('@/assets/8.png'), // 璁惧鍥剧墖
+ // coordinateTop: 200, // 鎷栨嫿鍏冪礌璺濈洅瀛愰《璺濈
+ // coordinateLeft: 100, // 鎷栨嫿鍏冪礌璺濈洅瀛愬乏渚ц窛绂�
+ // vw: 100, // 缂╂斁鍏冪礌瀹藉害
+ // vh: 100, // 缂╂斁鍏冪礌楂樺害
+ // fontSize: 12, // 缂╂斁鍏冪礌瀛椾綋澶у皬
+ // equipmentStatus: 1 // 璁惧鐘舵�� 0:鍏虫満 22:鎶ヨ 2:寰呮満 3:杩愯 寮�鏈�:1锛堟病鏈夊洓鑹茬伅鏍囪瘑褰掍负寰呮満锛�
+ // }
+ ], // 璁惧淇℃伅鍒楄〃
+ deviceStatusList: [
{
- equipmentId: '123213213123232',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 200,
- left: 100,
- vw: 175,
- vh: 135,
- fontSize: 20,
- status: 1
+ label: '鍏虫満',
+ value: 0,
+ color: '#A8A8A8'
},
{
- equipmentId: '512346789561232',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 500,
- left: 753,
- vw: 175,
- vh: 135,
- fontSize: 20,
- status: 0
+ label: '寰呮満',
+ value: 2,
+ color: '#FFFF00'
},
{
- equipmentId: '64746965647653',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 300,
- left: 860,
- vw: 175,
- vh: 135,
- fontSize: 20,
- status: 2
+ label: '杩愯',
+ value: 3,
+ color: '#00EE00'
},
{
- equipmentId: '33548976965462',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 100,
- left: 380,
- vw: 175,
- vh: 135,
- fontSize: 20,
- status: 3
- },
- {
- equipmentId: '85484913549253',
- equipmentImageUrl: require('@/assets/8.png'),
- top: 200,
- left: 1500,
- vw: 175,
- vh: 135,
- fontSize: 20,
- status: 2
+ label: '鎶ヨ',
+ value: 22,
+ color: '#FF0000'
}
- ]
+ ],// 璁惧鐘舵�佹寚绀虹伅鍒楄〃锛�
+ isFullscreen: false
}
},
- computed: {
- getWorkshopName() {
- switch (this.$route.params.workshopId) {
- case '5321':
- return '闀挎矙杞﹂棿'
- case '6312':
- return '澶╂触杞﹂棿'
- case '3463':
- return '姝︽眽杞﹂棿'
- case '8421':
- return '鍖椾含杞﹂棿'
- default:
- return '娴嬭瘯杞﹂棿'
- }
+ watch: {
+ isSwitchChecked: {
+ handler(newVal) {
+ if (!newVal) {
+ console.log('瀹氭椂鍣ㄥ紑鍚腑')
+ this.timingAcquisition = setInterval(() => {
+ this.getDeviceListByApi(this.$route.params.id)
+ }, 2000)
+ } else {
+ console.log('鍏抽棴瀹氭椂鍣�')
+ clearInterval(this.timingAcquisition)
+ this.timingAcquisition = null
+ }
+ },
+ immediate: true
}
},
methods: {
/**
- * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧鍒楄〃
- * @param workshopId 杞﹂棿Id
+ * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇璁惧淇℃伅鍒楄〃
+ * @param id 杞﹂棿Id
*/
- getDeviceListByApi(workshopId) {
- console.log('杞﹂棿Id', workshopId)
+ getDeviceListByApi(id) {
+ console.log('閲嶆柊鍒锋柊')
+ api.getDeviceListInWorkshopSignagePageApi(id).then((res) => {
+ if (res.result && res.result.length > 0) {
+ this.deviceList = res.result
+ }
+ })
},
+
/**
- * 鎷栨嫿瀵硅薄榧犳爣鎸夐敭鎸変笅浜嬩欢
- * @param event
+ * 閫氳繃杞﹂棿Id璋冪敤鎺ュ彛鑾峰彇杞﹂棿璇︾粏淇℃伅
+ * @param id 杞﹂棿Id
*/
- handleMouseDown(event) {
- this.dragging = true
- this.mouseX = event.clientX
- this.mouseY = event.clientY
- this.elementId = event.currentTarget.id
- this.top = event.currentTarget.offsetTop
- this.left = event.currentTarget.offsetLeft
- document.addEventListener('mousemove', this.handleMouseMove)
- document.addEventListener('mouseup', this.handleMouseUp)
- this.elementWidth = +event.currentTarget.style.width.replace('px', '')
- this.elementHeight = +event.currentTarget.style.height.replace('px', '')
+ getWorkshopDetailsByApi(id) {
+ api.getWorkshopDetailByWorkshopIdApi(id).then((res) => {
+ this.workshopDetails = res.result
+ this.$refs.deviceContainerRef.style.backgroundImage = `url(${this.getImgView(
+ this.workshopDetails.backgroundImage
+ )})`
+
+ this.fullScreenPageHeight = `calc(100% - ${this.pageHeaderHeight}px)`
+ this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
+
+ if (this.isFullscreen) {
+ this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
+ } else {
+ this.$refs.deviceContainerRef.style.height = this.normalPageHeight
+ }
+ })
},
+
/**
- * 鏂囨。瀵硅薄榧犳爣绉诲姩浜嬩欢
- * @param event
+ * 鍥剧墖棰勮
+ * @param text 鍥剧墖鍦板潃
*/
- handleMouseMove(event) {
- if (this.dragging) {
- // x鏂瑰悜榧犳爣鍋忕Щ閲�
- const deltaX = event.clientX - this.mouseX
- // y鏂瑰悜榧犳爣鍋忕Щ閲�
- const deltaY = event.clientY - this.mouseY
- this.left += deltaX
- this.top += deltaY
- this.deviceList.forEach(item => {
- if (item.equipmentId === this.elementId) {
- item.top = this.top
- item.left = this.left
- // 闄愬埗鎷栨嫿瓒呭嚭鍖哄煙(缂╂斁娴忚鍣ㄧ獥鍙ｅ悗璺濆洓鍛ㄨ窛绂诲嚭鐜伴棶棰�)
- if (item.top < 0) {
- item.top = 0
- } else if (item.top + this.elementHeight + 80 > window.innerHeight) {
- item.top = window.innerHeight - this.elementHeight
+ getImgView(text) {
+ if (text && text.indexOf(',') > 0) {
+ text = text.substring(0, text.indexOf(','))
+ }
+ return getFileAccessHttpUrl(text)
+ },
+
+ /**
+ * 鐐瑰嚮淇濆瓨鎸夐挳璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆涓庤澶囧浘鏍囧昂瀵�
+ */
+ saveDevicePositionAndSizeByApi() {
+ console.log('瑙﹀彂淇濆瓨')
+ if (this.isOperatingDevice) {
+ api.saveDevicePositionAndSizeApi(this.deviceList).then((res) => {
+ if (res.code === 200) {
+ this.$notification.success({
+ message: '娑堟伅',
+ description: res.message
+ })
+ this.isOperatingDevice = false
+ if (this.isSwitchChecked) {
+ this.isSwitchChecked = false
+ this.isResizable = !this.isResizable
+ this.isDraggable = !this.isDraggable
}
- if (item.left < 0) {
- item.left = 0
- } else if (item.left + this.elementWidth > window.innerWidth) {
- item.left = window.innerWidth - this.elementWidth
- }
+ this.getDeviceListByApi(this.$route.params.id)
}
})
- this.mouseX = event.clientX
- this.mouseY = event.clientY
+ } else {
+ this.$notification.warning({
+ message: '娑堟伅',
+ description: '璇峰紑鍚姛鑳藉悗鍐嶈繘琛屼繚瀛�'
+ })
}
},
- /**
- * 鏂囨。瀵硅薄榧犳爣鎸夐敭寮硅捣浜嬩欢
- * @param event
- */
- handleMouseUp(event) {
- this.dragging = false
- document.removeEventListener('mousemove', this.handleMouseMove)
- document.removeEventListener('mouseup', this.handleMouseUp)
- },
- /**
- * 鐐瑰嚮淇濆瓨鎸夐挳璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆
- */
- saveDevicePositionByApi() {
- console.log('淇濆瓨浣嶇疆')
- },
+
/**
* 璁惧鎷栨嫿鎴栫缉鏀炬椂瑙﹀彂浜嬩欢
* @param newRect 鎷栨嫿鎴栫缉鏀惧悗鐨勫昂瀵稿強璺濈
* @param index 鎷栨嫿璁惧鍦ㄦ暟缁勪腑鐨勪笅鏍�
*/
resize(newRect, index) {
- console.log('newRect', newRect)
- if (newRect.width > 200) {
- this.deviceList[index].fontSize = newRect.width / 10
- } else {
- this.deviceList[index].fontSize = 20
- }
- this.deviceList[index].top = newRect.top
- this.deviceList[index].left = newRect.left
+ // if (newRect.width > 100) {
+ // if (newRect.width / newRect.height < 2) {
+ // this.deviceList[index].fontSize = newRect.width / 10
+ // } else {
+ // this.deviceList[index].fontSize = newRect.height / 5
+ // }
+ // } else {
+ // this.deviceList[index].fontSize = 12
+ // }
this.deviceList[index].vw = newRect.width
this.deviceList[index].vh = newRect.height
+ this.deviceList[index].coordinateTop = newRect.top
+ this.deviceList[index].coordinateLeft = newRect.left
+ },
+
+ /**
+ * 鏍规嵁璁惧鐘舵�佸�艰幏鍙栧搴旇澶囨暟閲�
+ * @param value 璁惧鐘舵�佸��
+ * @returns {number} 璁惧鏁伴噺
+ */
+ getDeviceNumberByStatus(value) {
+ return this.deviceList.filter((item) => item.equipmentStatus === value).length
+ },
+
+ /**
+ * 寮�鍚姛鑳借Е鍙戜簨浠�
+ * @param checked 褰撳墠switch鐘舵�侊紝鏄惁寮�鍚紝鍒濆涓篺alse
+ */
+ handleSwitchChange(checked) {
+ this.isOperatingDevice = true
+ this.isResizable = !this.isResizable
+ this.isDraggable = !this.isDraggable
+ },
+
+ openDetail(item) {
+ if (!this.isSwitchChecked) {
+ if (item.equipmentStatus == 0) {
+ // this.$message.warn("璁惧澶勪簬鍏虫満鐘舵�侊紒");
+ this.$message.warning('璁惧澶勪簬鍏虫満鐘舵�侊紒')
+ return false
+ }
+ console.log(item)
+ console.log(this.$refs.EquipmentDetailModal)
+ this.$refs.EquipmentDetailModal.initData(item.equId)
+ this.$refs.EquipmentDetailModal.timerModel(item.equId)
+ // this.equipMessageTimer = setInterval(() => {
+ // setTimeout( this.$refs.equmentDetaiModel.initData(item.equipmentId),0)
+ // },1000*10)
+ }
+ },
+
+ onResize() {
+ // 鍒╃敤灞忓箷鍒嗚鲸鐜囧拰window瀵硅薄鐨勫唴楂樺害鏉ュ垽鏂吋瀹笽E
+ let winFlag = window.innerHeight === window.screen.height
+ // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
+ let isFull = window.fullScreen || document.webkitIsFullScreen
+
+ if (isFull === undefined) {
+ this.isFullscreen = winFlag
+ } else {
+ this.isFullscreen = winFlag || isFull
+ }
+ console.log(winFlag) // true鍏ㄥ睆 false涓嶆槸鍏ㄥ睆
+ console.log('浠诲姟鏍忛珮搴�', this.taskBarHeight)
+ console.log('宸ュ叿鏍忛珮搴�', this.utilsBarHeight)
+
+ //鍏ㄥ睆鍒欏浘绾哥洅瀛愬彲瑙嗛珮搴﹀噺鍘婚〉澶撮珮搴︼紝姝ｅ父绐楀彛鍒欏噺鍘婚〉澶淬�佸睆骞曞簳閮ㄤ换鍔℃爮浠ュ強娴忚鍣ㄥ伐鍏锋爮楂樺害
+ if (winFlag) {
+ console.log('瑙﹀彂鍏ㄥ睆')
+ this.$refs.deviceContainerRef.style.height = this.fullScreenPageHeight
+
+ } else {
+ console.log('鍏抽棴鍏ㄥ睆')
+ // 濡傛灉鍒锋柊椤甸潰閲嶆柊鍔犺浇鍚庨粯璁ゅ浜庡叏灞忔ā寮忥紝鍒欏伐鍏锋爮楂樺害涓鸿礋鏁帮紝鍥犳闇�瑕侀��鍑哄叏灞忔ā寮忔椂閲嶇疆宸ュ叿鏍忛珮搴�
+ this.utilsBarHeight = window.outerHeight - window.innerHeight
+ this.normalPageHeight = `calc(100% - ${this.pageHeaderHeight}px - ${this.taskBarHeight}px - ${this.utilsBarHeight}px)`
+ this.$refs.deviceContainerRef.style.height = this.normalPageHeight
+ }
}
+
+ },
+ created() {
+ if (this.$route.params.id) {
+ this.getDeviceListByApi(this.$route.params.id)
+ this.getWorkshopDetailsByApi(this.$route.params.id)
+ }
+
+
+ let winFlag = window.innerHeight === window.screen.height
+ // 鍒╃敤window鍏ㄥ睆鏍囪瘑鏉ュ垽鏂� -- IE鏃犳晥
+ let isFull = window.fullScreen || document.webkitIsFullScreen
+
+ if (isFull === undefined) {
+ this.isFullscreen = winFlag
+ } else {
+ this.isFullscreen = winFlag || isFull
+ }
+
+ // window.addEventListener('resize', this.onResize)
},
mounted() {
// 绂佹鐢ㄦ埛閫変腑鍐呭
document.onselectstart = () => false
},
- created() {
- if (this.$route.params.workshopId) {
- this.getDeviceListByApi(this.$route.params.workshopId)
- }
+ beforeDestroy() {
+ // 纭繚閿�姣佸畾鏃跺櫒銆佷簨浠跺強鍥炴敹璧勬簮
+ clearInterval(this.timingAcquisition)
+ this.timingAcquisition = null
+ // window.removeEventListener('resize', this.onResize)
}
}
</script>
@@ -263,19 +368,54 @@
color: #fff;
.page-header {
- height: 80px;
font-size: 50px;
text-align: center;
position: relative;
- .header-right {
+
+ .header-left {
+ width: 450px;
position: absolute;
- right: 200px;
- top: 0;
+ left: 0px;
+ top: 35px;
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ font-size: 16px;
+ }
+
+ .device-status-info {
+ font-size: 16px;
+ width: 400px;
+ position: absolute;
+ top: 40px;
+ right: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .single-status-info {
+ /*width: 70px;*/
+ /*display: flex;*/
+ /*align-items: center;*/
+ /*justify-content: space-between;*/
+
+ .status-square {
+ width: 14px;
+ height: 14px;
+ border: 1px solid #fff;
+ border-radius: 2px;
+ }
+ }
}
}
.content-container {
- position: relative;
+ width: 100%;
+ /*height: calc(100% - 200px);*/
+ /*height: 100%;*/
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+
.single-device {
position: absolute;
border: 1px solid transparent;
@@ -285,20 +425,25 @@
align-items: center;
justify-content: space-between;
cursor: default;
+
&:active {
border: 1px solid #1890ff;
}
+
.device-status {
width: 100%;
height: 100%;
display: flex;
- justify-content: space-between;
+ align-items: end;
+
.status-image {
background-size: 100% 100%;
background-repeat: no-repeat;
- width: 45px;
- margin-right: 10px;
+ width: 10px;
+ height: 60%;
+ margin-right: 5px;
}
+
.device-image {
background-size: 100% 100%;
background-repeat: no-repeat;
@@ -306,21 +451,6 @@
height: 100%;
}
}
- .device-id {
- /*font-size: 20px;*/
- }
- /*.device-info {*/
- /*width: 100%;*/
- /*display: flex;*/
- /*align-items: center;*/
- /*justify-content: space-between;*/
- /*.status-square {*/
- /*width: 14px;*/
- /*height: 14px;*/
- /*border: 1px solid #fff;*/
- /*border-radius: 2px;*/
- /*}*/
- /*}*/
}
}
}
--
Gitblit v1.9.3