|
|
@@ -124,114 +124,8 @@
|
|
|
<div style="width:8px;height:8px;border-radius:50%;background:red;" />
|
|
|
</div>
|
|
|
</VueDragResize>
|
|
|
- <VueDragResize
|
|
|
- v-show="visible"
|
|
|
- :isActive="true"
|
|
|
- :w="540"
|
|
|
- :h="420"
|
|
|
- :minh="420"
|
|
|
- :x="opt.x"
|
|
|
- :y="opt.y"
|
|
|
- :isDraggable="true"
|
|
|
- :isResizable="false"
|
|
|
- :stickSize="5"
|
|
|
- >
|
|
|
- <div class="detail">
|
|
|
- <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
|
|
|
- <div class="title">
|
|
|
- <div>
|
|
|
- <span></span>
|
|
|
- <div>甲八车间</div>
|
|
|
- </div>
|
|
|
- <a-button type="link" @click="visible=false">
|
|
|
- <a-icon type="close" style="color:#fff" />
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- <div class="detail-info">
|
|
|
- <div class="detail-info-title">
|
|
|
- <div>基本信息</div>
|
|
|
- <div>查看更多</div>
|
|
|
- </div>
|
|
|
- <table class="tables">
|
|
|
- <tr>
|
|
|
- <td>设备名称:</td>
|
|
|
- <td>异丙苯装置区</td>
|
|
|
- <td>危险程度:</td>
|
|
|
- <td>三级</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>设备名称:</td>
|
|
|
- <td>异丙苯装置区</td>
|
|
|
- <td>危险程度:</td>
|
|
|
- <td>三级</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>设备名称:</td>
|
|
|
- <td>异丙苯装置区</td>
|
|
|
- <td>危险程度:</td>
|
|
|
- <td>三级</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>设备名称:</td>
|
|
|
- <td>异丙苯装置区</td>
|
|
|
- <td>危险程度:</td>
|
|
|
- <td>三级</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>设备名称:</td>
|
|
|
- <td>异丙苯装置区</td>
|
|
|
- <td>危险程度:</td>
|
|
|
- <td>三级</td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- <div class="detail-info-title">
|
|
|
- <div>设备记录</div>
|
|
|
- </div>
|
|
|
- <div class="btn">
|
|
|
- <a-button ghost icon="search">
|
|
|
- 设备设施
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 报警数据
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 巡检记录
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 应急预案
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- <div class="btn">
|
|
|
- <a-button ghost icon="search">
|
|
|
- 设备设施
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 报警数据
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 巡检记录
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 应急预案
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- <div class="btn">
|
|
|
- <a-button ghost icon="search">
|
|
|
- 设备设施
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 报警数据
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 巡检记录
|
|
|
- </a-button>
|
|
|
- <a-button ghost icon="search">
|
|
|
- 应急预案
|
|
|
- </a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </VueDragResize>
|
|
|
+ <SbInfoModel ref="sbInfoModel" />
|
|
|
+ <WorkshopModel ref="workshopModel" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -239,9 +133,13 @@
|
|
|
<script>
|
|
|
import VueDragResize from 'vue-drag-resize'
|
|
|
import * as echarts from 'echarts'
|
|
|
+import SbInfoModel from './modules/SbInfoModel'
|
|
|
+import WorkshopModel from './modules/WorkshopModel'
|
|
|
export default {
|
|
|
components: {
|
|
|
- VueDragResize
|
|
|
+ VueDragResize,
|
|
|
+ SbInfoModel,
|
|
|
+ WorkshopModel
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
|
@@ -300,7 +198,11 @@ export default {
|
|
|
console.log(newRect)
|
|
|
},
|
|
|
handleView (val) {
|
|
|
- this.visible = true
|
|
|
+ if (val.count === 3) {
|
|
|
+ this.$refs.sbInfoModel.base(val)
|
|
|
+ } else {
|
|
|
+ this.$refs.workshopModel.base(val)
|
|
|
+ }
|
|
|
},
|
|
|
createChart1 (data) {
|
|
|
data.forEach((item, index) => {
|
|
|
@@ -659,46 +561,6 @@ margin: 20px 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.detail{
|
|
|
- width: 540px;
|
|
|
-height: 420px;
|
|
|
-background: #484848;
|
|
|
-opacity: 0.73;
|
|
|
-padding: 15px;
|
|
|
-.title{
|
|
|
- font-size: 24px;
|
|
|
- font-weight: 400;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- div {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- span {
|
|
|
- width: 10px;
|
|
|
- height: 23px;
|
|
|
- margin-right: 10px;
|
|
|
- background: #00E8E8;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.detail-info{
|
|
|
- margin-top:10px;
|
|
|
- .detail-info-title{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid #496CEC ;
|
|
|
- font-size: 16px;
|
|
|
-font-weight: 400;
|
|
|
-color: #45E2F3;
|
|
|
- }
|
|
|
- .btn{
|
|
|
- display:flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin:10px 0;
|
|
|
- }
|
|
|
-}
|
|
|
-}
|
|
|
.top-left-two{
|
|
|
width: 30px;
|
|
|
height: 15px;
|
|
|
@@ -739,76 +601,4 @@ color: #45E2F3;
|
|
|
bottom: -2px;;
|
|
|
right: -2px;;
|
|
|
}
|
|
|
- .top-left{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- display: block;
|
|
|
- border-top: 5px solid #02E8FF;
|
|
|
- border-left: 5px solid #02E8FF;
|
|
|
- position: absolute;
|
|
|
- top: -2px;
|
|
|
- left: -2px;
|
|
|
- }
|
|
|
- .bottom-left{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- display: block;
|
|
|
- border-bottom: 5px solid #02E8FF;
|
|
|
- border-left: 5px solid #02E8FF;
|
|
|
- position: absolute;
|
|
|
- bottom: -2px;;
|
|
|
- left: -2px;;
|
|
|
- }
|
|
|
- .top-right{
|
|
|
- width: 100px;
|
|
|
- height: 30px;
|
|
|
- display: block;
|
|
|
- border-top: 5px solid #02E8FF;
|
|
|
- border-right: 5px solid #02E8FF;
|
|
|
- position: absolute;
|
|
|
- top: -2px;;
|
|
|
- right: -2px;;
|
|
|
- }
|
|
|
- .bottom-right {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- display: block;
|
|
|
- border-bottom: 5px solid #02E8FF;
|
|
|
- border-right: 5px solid #02E8FF;
|
|
|
- position: absolute;
|
|
|
- bottom: -2px;;
|
|
|
- right: -2px;;
|
|
|
- }
|
|
|
- .badge{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- .tables{
|
|
|
- margin: 10px auto;
|
|
|
- width: 100%;
|
|
|
- font-size: 14px;
|
|
|
- overflow-x:auto;
|
|
|
- table {
|
|
|
- min-width:100%;
|
|
|
- margin: 0 auto;
|
|
|
- border: 1px solid #45E2F3;
|
|
|
- border-radius: 6px;
|
|
|
- border-collapse: collapse;
|
|
|
- font-weight: 400;
|
|
|
- table-layout:fixed;
|
|
|
- }
|
|
|
- tr {
|
|
|
- height:26px;
|
|
|
- }
|
|
|
- th,
|
|
|
- td {
|
|
|
- border: 1px solid #45E2F3;
|
|
|
- text-align: center;
|
|
|
- padding: 3px 10px;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-}
|
|
|
</style>
|
