| | |
| | | <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> |
| | | <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 class="alert-box"> |
| | | <div class="title"> |
| | | <span style="margin-right:130px">安保活动</span> |
| | | <span |
| | | class="activity" |
| | | :class="{ choosed: acttype == 0 }" |
| | | @click="actTabClick(0)" |
| | | >正在进行</span> |
| | | <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span> |
| | | <span>/</span> |
| | | <span |
| | | class="activity" |
| | | :class="{ choosed: acttype == 1 }" |
| | | @click="actTabClick(1)" |
| | | >历史活动</span> |
| | | <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span> |
| | | </div> |
| | | <div id="peopleList" class="echarts-box"> |
| | | <el-table |
| | | :data="acttype == 0 ? underwayArr : historyArr" |
| | | style="width: 100%" |
| | | <el-table :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" |
| | | :row-class-name="tableRowClassName" |
| | | ref="activityTable" |
| | | @row-click="activityRowClick" |
| | | > |
| | | :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick"> |
| | | <el-table-column prop="activityName" label="活动名称" width="100"></el-table-column> |
| | | <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column> |
| | | <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column> |
| | |
| | | <div class="crowd-box"> |
| | | <div class="title"> |
| | | <span style="margin-right:130px">现有设备</span> |
| | | <span |
| | | class="equiment" |
| | | :class="{ choosed: linetype == 0 }" |
| | | @click="lineTabClick(0)" |
| | | >在线设备</span> |
| | | <span class="equiment" :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">在线设备</span> |
| | | <span>/</span> |
| | | <span |
| | | class="activity" |
| | | :class="{ choosed: linetype == 1 }" |
| | | @click="lineTabClick(1)" |
| | | >离线设备</span> |
| | | <span class="activity" :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">离线设备</span> |
| | | </div> |
| | | <div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div> |
| | | </div> |
| | |
| | | .crowd-box { |
| | | display: flex; |
| | | flex-direction: column; |
| | | padding: 0 10px; |
| | | |
| | | .title::after { |
| | | content: ''; |
| | |
| | | } |
| | | |
| | | .sub-tab { |
| | | padding: 10px; |
| | | display: flex; |
| | | |
| | | .tab { |
| | |
| | | border: 1px solid rgba(20, 50, 123, 1); |
| | | cursor: pointer; |
| | | |
| | | & > div { |
| | | &>div { |
| | | height: 26px; |
| | | line-height: 26px; |
| | | } |
| | |
| | | } |
| | | |
| | | .echarts-box { |
| | | padding: 10px; |
| | | flex: 1; |
| | | } |
| | | |
| | | .sub-tab + .echarts-box { |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | #peopleList { |