| | |
| | | |
| | | <a-col :span="7" class="device-status-info"> |
| | | <!--<a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"--> |
| | | <!--@click="handleScreenDevive(item)">--> |
| | | <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>--> |
| | | <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>--> |
| | | <!--<!–<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>–>--> |
| | | <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>--> |
| | | <!--@click="handleScreenDevive(item)">--> |
| | | <!--<div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div>--> |
| | | <!--<div class="status-square" :style="{ backgroundColor: item.color }"></div>--> |
| | | <!--<!–<a-checkbox :checked="item.checked" @change="checkboxChange(item)"></a-checkbox>–>--> |
| | | <!--<div>{{getDeviceNumberByStatus(item.value) }}</div>--> |
| | | <!--</a-space>--> |
| | | <a-space v-for="item in deviceStatusList" :key="item.value" class="single-status-info"> |
| | | <div :style="{color:item.checked?'#1890FF':'#fff'}">{{ item.label }}</div> |
| | |
| | | <!--拖拽设备区域--> |
| | | <div class="content-container" ref="deviceContainerRef" style="overflow: auto"> |
| | | <img :src="imgSrc" width="1920" height="900"> |
| | | <div class="guideline guidelineX" :style="{top:guidelineXTop+'px',display:showGuideline}"></div> |
| | | <div class="guideline guidelineY" :style="{left:guidelineYLeft+'px',display:showGuideline}"></div> |
| | | <VueDragResize |
| | | v-for="(item, index) in deviceList" |
| | | :key="item.equipmentId" |
| | |
| | | :isDraggable="isDraggable" |
| | | :isResizable="isResizable" |
| | | :stickSize="6" |
| | | @deactivated="showGuideline = 'none'" |
| | | > |
| | | <div class="single-device" :style="{ width: item.vw + 'px', height: item.vh + 'px' }" |
| | | @click="openDetail(item)"> |
| | |
| | | timingAcquisition: null, // 定时刷新是否开启 |
| | | parentH: 5000,//父级高度 |
| | | parentW: 1920,//父级宽度 |
| | | showGuideline: 'none', |
| | | guidelineXTop: 0, |
| | | guidelineYLeft: 0, |
| | | deviceList: [ |
| | | // { |
| | | // equipmentId: '123213213123232',// 设备ID |
| | |
| | | // } else { |
| | | // this.deviceList[index].fontSize = 12 |
| | | // } |
| | | this.showGuideline = 'block' |
| | | this.deviceList[index].vw = newRect.width |
| | | this.deviceList[index].vh = newRect.height |
| | | this.deviceList[index].coordinateTop = newRect.top |
| | | this.deviceList[index].coordinateLeft = newRect.left |
| | | this.guidelineXTop = newRect.top + newRect.height / 2 |
| | | this.guidelineYLeft = newRect.left + newRect.width / 2 |
| | | }, |
| | | |
| | | /** |
| | |
| | | width: 100%; |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | position: relative; |
| | | |
| | | .guideline{ |
| | | position: absolute; |
| | | border: 1px dashed #ccc; |
| | | } |
| | | |
| | | .guidelineX { |
| | | width: 1920px; |
| | | left: 0; |
| | | } |
| | | |
| | | .guidelineY { |
| | | top: 0; |
| | | height: 900px; |
| | | } |
| | | |
| | | .single-device { |
| | | position: absolute; |