| | |
| | | <template> |
| | | <div class="container" ref="Container"> |
| | | <div class="case-box" ref="caseBox"> |
| | | <div class="title" ref="alertBoxTitle"> |
| | | <div>值班信息(当日)</div> |
| | | </div> |
| | | <div class="table-box"> |
| | | <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column prop="station" label="岗位"></el-table-column> |
| | | <el-table-column prop="name" label="姓名"></el-table-column> |
| | | <el-table-column prop="contact" label="联系方式"></el-table-column> |
| | | </el-table> |
| | | <div class="box"> |
| | | <div class="title" ref="alertBoxTitle"> |
| | | <div>值班信息(当日)</div> |
| | | </div> |
| | | <div class="table-box"> |
| | | <el-table size="small" :height="tableHeight" :data="schedulingList" style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" |
| | | :row-class-name="tableRowClassName"> |
| | | <el-table-column prop="station" label="岗位"></el-table-column> |
| | | <el-table-column prop="name" label="姓名"></el-table-column> |
| | | <el-table-column prop="contact" label="联系方式"></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | |
| | | <svg class="border-svg"> |
| | |
| | | </div> |
| | | |
| | | <div class="alert-box" ref="alertBox "> |
| | | <div class="title"> |
| | | 案件统计 |
| | | <div class="timer"> |
| | | <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至" |
| | | start-placeholder="开始日期" end-placeholder="结束日期" |
| | | :picker-options="pickerOptions"></el-date-picker> |
| | | <div class="box"> |
| | | <div class="title"> |
| | | 案件统计 |
| | | <div class="timer"> |
| | | <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels |
| | | range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" |
| | | :picker-options="pickerOptions"></el-date-picker> |
| | | </div> |
| | | </div> |
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
| | | </div> |
| | | <div id="EventChangeEcharts" class="echarts-box"></div> |
| | | |
| | | <svg class="border-svg"> |
| | | <defs> |
| | |
| | | </div>--> |
| | | |
| | | <div class="crowd-box" ref="crowdBox"> |
| | | <div class="title"> |
| | | <div>现有设备</div> |
| | | <div class="title-tab"> |
| | | <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/ |
| | | <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span> |
| | | <div class="box"> |
| | | <div class="title"> |
| | | <div>现有设备</div> |
| | | <div class="title-tab"> |
| | | <span :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>/ |
| | | <span :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span> |
| | | </div> |
| | | </div> |
| | | <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> |
| | | </div> |
| | | <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> |
| | | |
| | | <svg class="border-svg"> |
| | | <defs> |
| | |
| | | // margin-left: 8px; |
| | | // } |
| | | |
| | | .box { |
| | | display: flex; |
| | | position: absolute; |
| | | flex-direction: column; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: 11; |
| | | } |
| | | |
| | | .title { |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: -1; |
| | | z-index: 1; |
| | | } |
| | | } |
| | | </style> |