@{
    Layout = null;
}

<!DOCTYPE html>
<html style="overflow: auto;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BLW日志</title>
    <!-- Vue.js -->
    <script src="~/js/vue2.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- jQuery -->
    <script src="~/js/jquery.min.js"></script>

    <!-- 引入第三方库 -->
    <script src="~/js/echarts.min.js"></script>
    <script src="~/js/xlsx.mini.min.js"></script>
    <script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .el-table__empty-block {
            height: auto !important;
        }

        .el-dialog__footer {
            text-align: left;
        }

        .headbox {
            /*margin: 10px;*/
        }

        .seachbox {
            margin: 10px;
            display: inline-block;
        }

        .bodybox {
            margin: 10px;
            text-align: center;
        }

        .dialogbox .el-table .el-table__cell {
            padding: 2px;
        }

        .el-table .el-table__cell {
            padding: 6px 0;
        }

        .iconClass {
            font-size: 20px; /* 加大图标大小 */
            font-weight: bold;
        }

        /* 日志列css */
        .cell .logdata {
            /*  white-space: nowrap; 不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
            cursor: pointer;
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
        }

        /* 表格行颜色设置 */
        .el-table .up-row {
            background: #ECF5FF;
        }

        .el-table .down-row {
            background: #FEF0F0;
        }

        .el-table .error-row {
            background: #F78989;
        }

    </style>
</head>
<body>

    <div id="app" v-show="isReady" v-cloak style="width:100%;">

        <div style="align-content: center; text-align: center; font-size: 22px; margin: 10px;">
            <el-button type="primary" v-on:click="logHome" plain circle style="float: left" icon="el-icon-s-home"></el-button>
            RCU日志追综系统
            <span style="font-size:12px;color:gray"> --v1.4.6</span>
        </div>
        <div id="appleft" style="display: inline-block; float:left; ">
            <!-- 顶部导航栏以及弹窗 -->
            <div class="headbox">
                <div class="seachbox">
                    <el-button type="warning" v-on:click="openDialog = true" plain round>
                        监控对象
                    </el-button>
                    <el-select v-model="cmdCurrent"
                               multiple
                               clearable
                               collapse-tags
                               placeholder="请选择命令">
                        <el-button type="text" v-on:click="allCmdBtn">&nbsp;&nbsp;全选</el-button>
                        <el-option v-for="cmd in cmdList"
                                   :key="cmd.value"
                                   :label="cmd.label"
                                   :value="cmd.value">
                            @* <span style="float: left">{{ room.roomno }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;Mac:{{ room.mac }}</span> *@
                        </el-option>
                    </el-select>
                    <span v-if="dialogw != '100%'">
                        <el-date-picker v-model="pickerDate"
                                        type="daterange"
                                        align="right"
                                        unlink-panels
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions"
                                        style="width: 230px;">
                        </el-date-picker>
                    </span>
                    <span v-else>
                        <span v-show="mobileSelectedVis">
                            <br />
                            <span class="demonstration" style="margin: 0 26px 0 27px;font-size:13px;"> 开始日期 </span>
                            <el-date-picker v-model="pickerDate[0]"
                                            type="date" style="width: 217px;"
                                            placeholder="开始日期">
                            </el-date-picker>
                            <br />
                            <span class="demonstration" style="margin: 0 26px 0 27px;font-size:13px;"> 结束日期 </span>
                            <el-date-picker v-model="pickerDate[1]"
                                            type="date" style="width: 217px;"
                                            placeholder="结束日期">
                            </el-date-picker>
                        </span>

                        <br />
                        <span>
                            <span style="margin: 0 0 0 26px;"></span>
                            <el-button type="text" v-on:click="dateMobile(1)">今天</el-button>
                            <el-button type="text" v-on:click="dateMobile(3)">3天内</el-button>
                            <el-button type="text" v-on:click="dateMobile(7)">7天内</el-button>
                            <el-button type="text" v-on:click="dateMobile(15)">15天内</el-button>
                            <el-button type="text" v-on:click="dateMobile(30)">30天内</el-button>
                        </span>
                        <br />
                    </span>

                    <el-button v-show="logs != unll" type="info" class="el-icon-refresh" v-on:click="showSelectedLogs(1)" :disabled="multipleBtn"
                               :size="40" circle plain></el-button>
                    <el-button v-show="logs != unll" type="success" class="el-icon-document" v-on:click="exportExcel"
                               :size="40" circle plain></el-button>
                    <el-button v-show="logs != unll" type="warning" class="el-icon-picture-outline" v-on:click="echartShow"
                               :size="40" circle plain></el-button>
                    <div class="seachbox">
                        <el-checkbox v-model="displayCheck" style="display:inline-block">列筛选</el-checkbox>
                        <el-checkbox v-show="displayCheck" :indeterminate="isIndeterminate" v-model="checkAll" v-on:change="handleCheckAllChange" style="display:inline-block">全选</el-checkbox>
                    </div>
                    <div class="seachbox" v-show="displayCheck">
                        <el-checkbox-group v-model="visTabCol" v-on:change="handleCheckedTabChange">
                            <el-checkbox style="display:inline-block" v-for="tabcol in tabCols" :label="tabcol" :key="tabcol">{{tabcol}}</el-checkbox>
                        </el-checkbox-group>
                    </div>

                    <!-- 弹窗 -->
                    <el-dialog title="日志监控添加"
                               :width="dialogw"
                               :visible.sync="openDialog">
                        <div v-if="mobileSelectedVis || dialogw != '100%'">
                            <div class="seachbox">
                                <el-select v-model="hotelCurrent"
                                           value-key="code"
                                           filterable
                                           clearable
                                           remote
                                           v-on:change="hotelChange"
                                           :remote-method="remoteHotel"
                                           placeholder="请选择酒店">
                                    <el-option v-for="hotel in hotels"
                                               :key="hotel.code"
                                               :label="hotel.name"
                                               :value="hotel">
                                        <span style="float: left">{{ hotel.name }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;Code:{{ hotel.code }}</span>
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="seachbox">
                                <el-select v-model="roomCurrent"
                                           value-key="roomno"
                                           multiple
                                           filterable
                                           clearable
                                           remote
                                           collapse-tags
                                           :disabled="roomDisable"
                                           :remote-method="remoteRoom"
                                           placeholder="请选择房间">
                                    <el-button type="text" v-on:click="allRoomsBtn">&nbsp;&nbsp;全选房间</el-button>
                                    <el-option v-for="room in rooms"
                                               :key="room.id"
                                               :label="room.roomno"
                                               :value="room">
                                        <span style="float: left">{{ room.roomno }}</span>
                                        <span style="float: right; color: #8492a6; font-size: 13px">&nbsp;&nbsp;&nbsp;&nbsp;Mac:{{ room.mac }}</span>
                                    </el-option>
                                </el-select>
                                <div class="seachbox" style="margin-left: 10px">
                                    <el-button type="success" v-on:click="handleAdd" :disabled="btnIntoDisable"
                                               round plain>加入监控</el-button>
                                </div>
                                <el-button type="danger" v-on:click="delSelectedLogs" :disabled="multipleBtn"
                                           round plain>删除所选</el-button>

                                <el-button type="info" class="el-icon-zoom-in" :size="40" v-on:click="stateTable" circle plain v-if="dialogw != '100%'"></el-button>
                                <el-button type="success" class="el-icon-refresh" :size="40" v-on:click="refreshViewValue" circle plain></el-button>
                            </div>
                        </div>
                        <div style="display:inline" v-else>
                            <el-button type="success" class="el-icon-refresh" :size="40" v-on:click="refreshViewValue" circle plain></el-button>

                        </div>
                        <div style="display:inline" v-if="dialogw == '100%'">
                            <el-button type="info" class="el-icon-zoom-in" :size="40" v-on:click="stateTable" circle plain></el-button>
                            <el-button type="success" class="el-icon-sort" :size="40" v-on:click="mobileSelectedVis = !mobileSelectedVis"
                                       circle plain></el-button>
                        </div>

                        <div class="dialogbox" style="display: inline-block;width: 100%">
                            <el-table v-if="dialogw != '100%'"
                                      border
                                      :data="selectHotelRoom"
                                      empty-text="暂无监控对象"
                                      :height="tableHeight - 350"
                                      v-on:selection-change="handleSelectionChange">
                                <el-table-column prop="IsSelect"
                                                 type="selection"
                                                 width="50"
                                                 align="center"
                                                 header-align="center">
                                </el-table-column>
                                <el-table-column label="操作" width="158">
                                    <template slot-scope="scope">
                                        <el-button slot="scope.row" type="primary" icon="el-icon-search" v-on:click="showLog(scope.$index, scope.row)"
                                                   circle plain></el-button>
                                        <el-popconfirm title="确定取消监控吗？"
                                                       v-on:confirm="handleRemove(scope.row)">
                                            <el-button slot="reference" type="danger" icon="el-icon-delete"
                                                       circle plain></el-button>
                                        </el-popconfirm>
                                        <el-popconfirm title="确定延长有效期吗？"
                                                       v-on:confirm="handleDelayed(scope.row)">
                                            <el-button slot="reference" type="warning" icon="el-icon-refresh-left"
                                                       circle plain></el-button>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="hotelNameAndCode" label="酒店" width="188" align="center"
                                                 :filter-method="filterHandler" :filters="CreatDataTable.hotel" header-align="center" sortable></el-table-column>
                                <el-table-column prop="roomNumber" label="房间" width="90" align="center"
                                                 :filter-method="filterHandler" :filters="CreatDataTable.room" header-align="center" sortable></el-table-column>
                                <el-table-column prop="mac" label="Mac地址" width="170" align="center"
                                                 header-align="center" sortable></el-table-column>
                                <el-table-column prop="createDateTime" label="创建时间" width="180" align="center"
                                                 header-align="center" sortable></el-table-column>
                                <el-table-column prop="remainingTime" label="有效期" width="110" align="center"
                                                 header-align="center" sortable></el-table-column>
                                <el-table-column label="TX" width="68" align="center"
                                                 header-align="center">
                                    <template slot-scope="scope">
                                        <i v-if="!scope.row.lastData" class="el-icon-loading"></i>
                                        <span v-else>{{ scope.row.tx }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="RX" width="68" align="center"
                                                 header-align="center">
                                    <template slot-scope="scope">
                                        <i v-if="!scope.row.lastData" class="el-icon-loading"></i>
                                        <span v-else>{{ scope.row.rx }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="最后记录" width="110" align="center"
                                                 header-align="center">
                                    <template slot-scope="scope">
                                        <i v-if="!scope.row.lastData" class="el-icon-loading"></i>
                                        <span v-else>{{ scope.row.lastData }}</span>
                                    </template>
                                </el-table-column>

                            </el-table>
                            <el-table v-else
                                      border
                                      :data="selectHotelRoom"
                                      empty-text="暂无监控对象"
                                      :height="tableHeight - 350"
                                      v-on:selection-change="handleSelectionChange">
                                <el-table-column prop="IsSelect"
                                                 type="selection"
                                                 width="43"
                                                 align="center"
                                                 header-align="center">
                                </el-table-column>
                                <el-table-column label="操作" width="60" align="center" header-align="center">
                                    <template slot-scope="scope">
                                        @* <el-popconfirm title="确定取消监控吗？"
                                                       v-on:confirm="handleRemove(scope.row)">
                                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="small"
                                                       circle plain></el-button>
                                        </el-popconfirm> *@
                                        <el-button slot="scope.row" type="info" icon="el-icon-search" size="small" v-on:click="showLog(scope.$index, scope.row)"
                                                   circle plain></el-button>
                                        <br />
                                        <el-popconfirm title="确定延长有效期吗？"
                                                       v-on:confirm="handleDelayed(scope.row)">
                                            <el-button slot="reference" type="warning" icon="el-icon-refresh-left" size="small"
                                                       circle plain></el-button>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                                <el-table-column label="酒店&房间" width="140" align="center" header-align="center" :filter-method="filterHandlerMobile" :filters="CreatDataTable.hotel">
                                    <template slot-scope="scope">
                                        <p style="font-size:10px">{{scope.row.hotelNameAndCode}}</p>
                                        <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                        <p>{{scope.row.roomNumber}}</p>
                                        <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                        <p style="font-size:11px">{{scope.row.mac}}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="TX/RX" width="77" align="center" header-align="center">
                                    <template slot-scope="scope">
                                        <i v-if="!scope.row.lastData" class="el-icon-loading"></i>
                                        <div v-if="scope.row.lastData">
                                            <p>{{scope.row.tx}}</p>
                                            <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                            <p>{{scope.row.rx}}</p>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="创建&有效&最后" width="155" align="center" header-align="center">
                                    <template slot-scope="scope">
                                        <p style="font-size:11px">{{scope.row.createDateTime}}</p>
                                        <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                        <p>{{scope.row.remainingTime}}</p>
                                        <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                        <i v-if="!scope.row.lastData" class="el-icon-loading"></i>
                                        <p v-if="scope.row.lastData" style="font-size:10px">{{scope.row.lastData}}</p>
                                    </template>
                                </el-table-column>



                            </el-table>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <span>
                                <el-select v-model="cmdCurrent"
                                           multiple
                                           clearable
                                           collapse-tags
                                           placeholder="请选择命令">
                                    <el-button type="text" v-on:click="allCmdBtn">&nbsp;&nbsp;全选</el-button>
                                    <el-option v-for="cmd in cmdList"
                                               :key="cmd.value"
                                               :label="cmd.label"
                                               :value="cmd.value">
                                    </el-option>
                                </el-select>
                            </span>
                            <span v-if="dialogw != '100%'">
                                <el-date-picker v-model="pickerDate"
                                                type="daterange"
                                                align="right"
                                                unlink-panels
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                :picker-options="pickerOptions"
                                                style="width: 230px;">
                                </el-date-picker>
                            </span>
                            <span v-else>
                                <span v-show="mobileSelectedVis">
                                    <br />
                                    <el-date-picker v-model="pickerDate[0]"
                                                    type="date" style="width: 217px;"
                                                    placeholder="开始日期">
                                    </el-date-picker>
                                    <span class="demonstration">开始日期 </span>
                                    <br />
                                    <el-date-picker v-model="pickerDate[1]"
                                                    type="date" style="width: 217px;"
                                                    placeholder="结束日期">
                                    </el-date-picker>
                                    <span class="demonstration">结束日期 </span>
                                </span>

                                <br />
                                <span>
                                    <el-button type="text" v-on:click="dateMobile(1)">今天</el-button>
                                    <el-button type="text" v-on:click="dateMobile(3)">3天内</el-button>
                                    <el-button type="text" v-on:click="dateMobile(7)">7天内</el-button>
                                    <el-button type="text" v-on:click="dateMobile(15)">15天内</el-button>
                                    <el-button type="text" v-on:click="dateMobile(30)">30天内</el-button>
                                </span>
                                <br />
                            </span>

                            <span>
                                <br v-if="dialogw == '100%'" />
                                <el-button type="primary" v-on:click="showSelectedLogs(1)" style="margin-left:10px" :disabled="multipleBtn"
                                           round plain>显示日志</el-button>
                                <el-button type="info" v-on:click="openDialog = false"
                                           round plain>取 消</el-button>
                            </span>

                        </span>
                    </el-dialog>
                    <!-- 弹窗次级 -->
                    <el-dialog title="监控房间状态"
                               :width="dialogw"
                               :visible.sync="stateVis">
                        <div style="margin: 0 10px 3px 0;">
                            <el-button v-show="selectHotelRoom != null" type="success" class="el-icon-refresh" v-on:click="stateTable"
                                       :size="40" circle plain></el-button>
                        </div>

                        <div class="dialogbox" style="display: inline-block;width: 100%">
                            <el-table v-if="dialogw != '100%'"
                                      border
                                      :data="selectHotelRoom"
                                      empty-text="暂无监控对象"
                                      :height="tableHeight - 177">
                                <el-table-column label="操作" width="66">
                                    <template slot-scope="scope">
                                        <el-button slot="scope.row" type="primary" icon="el-icon-search" v-on:click="showLog(scope.$index, scope.row)"
                                                   circle plain></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="hotelNameAndCode" label="酒店" width="188" align="center"
                                                 :filter-method="filterHandler" :filters="CreatDataTable.hotel" header-align="center" sortable></el-table-column>
                                <el-table-column prop="roomNumber" label="房间" width="90" align="center"
                                                 :filter-method="filterHandler" :filters="CreatDataTable.room" header-align="center" sortable></el-table-column>
                                <el-table-column prop="mac" label="Mac地址" width="170" align="center"
                                                 header-align="center" sortable></el-table-column>
                                <el-table-column label="在线" width="70">
                                    <template slot-scope="scope">
                                        <el-tag type="info" effect="plain">
                                            <i v-if="!scope.row.isSupply" class="el-icon-loading iconClass"></i>
                                            <span v-else>
                                                <i v-if="scope.row.isSupply == 'False'" class="el-icon-minus iconClass"></i>
                                                <i v-if="scope.row.isSupply == 'True'" class="el-icon-check iconClass"></i>
                                                <i v-if="scope.row.isSupply != 'True' && scope.row.isSupply != 'False'" class="el-icon-close iconClass"></i>
                                            </span>

                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="取电" width="70">
                                    <template slot-scope="scope">
                                        <el-tag type="info" effect="plain">
                                            <i v-if="!scope.row.TakeCard_Status" class="el-icon-loading iconClass"></i>
                                            <span v-else>
                                                <i v-if="scope.row.TakeCard_Status == 'False'" class="el-icon-minus iconClass"></i>
                                                <i v-if="scope.row.TakeCard_Status == 'True'" class="el-icon-s-opportunity iconClass"></i>
                                                <i v-if="scope.row.TakeCard_Status != 'True' && scope.row.TakeCard_Status != 'False'" class="el-icon-close iconClass"></i>
                                            </span>
                                        </el-tag>
                                    </template>
                                </el-table-column>

                            </el-table>
                            <el-table v-else
                                      border
                                      :data="selectHotelRoom"
                                      empty-text="暂无监控对象"
                                      :height="tableHeight - 233">
                                <el-table-column label="操作" width="60" align="center" header-align="center">
                                    <template slot-scope="scope">
                                        <el-button slot="scope.row" type="info" icon="el-icon-search" size="small" v-on:click="showLog(scope.$index, scope.row)"
                                                   circle plain></el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="酒店&房间" width="140" align="center" header-align="center" :filter-method="filterHandlerMobile" :filters="CreatDataTable.hotel">
                                    <template slot-scope="scope">
                                        <p style="font-size:10px">{{scope.row.hotelNameAndCode}}</p>
                                        <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                        <p>{{scope.row.roomNumber}}</p>
                                        <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                        <p style="font-size:11px">{{scope.row.mac}}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="在线/取电" width="62" align="center" header-align="center">
                                    <template slot-scope="scope">
                                        <i v-if="!scope.row.isSupply" class="el-icon-loading"></i>
                                        <div v-else>
                                            <i v-if="scope.row.isSupply == 'False'" class="el-icon-minus "></i>
                                            <i v-if="scope.row.isSupply == 'True'" class="el-icon-check "></i>
                                            <i v-if="scope.row.isSupply != 'True' && scope.row.isSupply != 'False'" class="el-icon-close iconClass"></i>
                                            <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                            <i v-if="scope.row.TakeCard_Status == 'False'" class="el-icon-minus "></i>
                                            <i v-if="scope.row.TakeCard_Status == 'True'" class="el-icon-s-opportunity "></i>
                                            <i v-if="scope.row.TakeCard_Status != 'True' && scope.row.TakeCard_Status != 'False'" class="el-icon-close iconClass"></i>
                                        </div>
                                    </template>
                                </el-table-column>


                            </el-table>
                        </div>

                    </el-dialog>
                </div>

                <div class="seachbox"></div>

            </div>
            <!-- 主体内容 -->
            <div class="">
                <el-table v-if="dialogw != '100%'"
                          :data="logs"
                          ref="logsTable"
                          border
                          style="width: 100%; "
                          empty-text="请选择监控对象"
                          :row-class-name="tableRowClassName"
                          :height="tableHeight">
                    <el-table-column v-if="visTabCol.includes('时间')" label="时间" width="100">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 13px">
                                {{ scope.row.createTime }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('酒店名')" label="酒店名" width="150">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.hotelNameAndCode }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('房间号')" label="房间号" width="85">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.roomNo }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('Mac地址')" label="Mac地址" width="150">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.mac }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('主机编号')" label="主机编号" width="130">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.hostNumber }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('内网IP')" label="内网IP" width="115">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.lanIp }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('外网IP')" label="外网IP" width="115">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.wwwIp }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('外网Port')" label="Port" width="65">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.wwwPort }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('间隔')" label="间隔(ms)" width="85">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.timeDifference }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('方向')" label="方向文字" width="70">
                        <template slot-scope="scope">
                            <div v-if="scope.row.sendOrReceive == '主机->服务器'">
                                上传
                            </div>
                            <div v-else>
                                下发
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('方向')" label="方向" width="70">
                        <template slot-scope="scope">
                            <el-tag type="info"
                                    effect="plain">
                                <i v-if="scope.row.sendOrReceive == '主机->服务器'" class="el-icon-upload iconClass"></i>
                                <i v-if="scope.row.sendOrReceive == '服务器->主机'" class="el-icon-download iconClass"></i>
                                <i v-if="scope.row.sendOrReceive != '服务器->主机' && scope.row.sendOrReceive != '主机->服务器'" class="el-icon-close iconClass"></i>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('日志')" label="日志" width="80">
                        <template slot-scope="scope">
                            <el-popover trigger="click"
                                        placement="right"
                                        width="250">
                                <div style="font-size: 11px; ">
                                    {{ scope.row.data }}
                                </div>
                                <div class="logdata" title="点击复制" style="color:#ADADAD"
                                     slot="reference">
                                    {{ scope.row.data }} @*  v-on:click="copyData(scope.row.data)" *@
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('帧号')" label="帧号" width="80">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD">
                                {{ scope.row.frameNo }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('命令')" label="命令" width="125">
                        <template slot-scope="scope">
                            <el-popover placement="right"
                                        width="500"
                                        :style="{maxHeight:'92vh', overflowY:'auto'}"
                                        trigger="hover"
                                        v-on:show="analyzeLogs(scope.row)">
                                <el-table :data="logAnalysisList"
                                          size="small"
                                          :style="{maxHeight:'98vh', overflowY:'auto'}"
                                          border>
                                    <el-table-column width="100" property="key" label="指令编码"></el-table-column>
                                    <el-table-column width="180" property="value" label="内容"></el-table-column>
                                    <el-table-column min-width="140" property="data" label="上报数据"></el-table-column>
                                </el-table>
                                <div slot="reference">
                                    <span>{{ scope.row.commandTypeVal }}</span>
                                    <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                    <span>{{ scope.row.commandType }}</span>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>

                </el-table>
                <el-table v-else
                          :data="logs"
                          ref="logsTable"
                          border
                          style="width: 100%; "
                          empty-text="请选择监控对象"
                          :row-class-name="tableRowClassName"
                          :height="tableHeight-80">
                    <el-table-column v-if="visTabCol.includes('时间')" label="时间" width="90">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 11px">
                                {{ scope.row.createTime }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('酒店名')" label="酒店名" width="130">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 11px">
                                {{ scope.row.hotelNameAndCode }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('房间号')" label="房间号" width="70">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 12px">
                                {{ scope.row.roomNo }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('Mac地址')" label="Mac地址" width="120">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 10px">
                                {{ scope.row.mac }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('主机编号')" label="主机编号" width="120">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 10px">
                                {{ scope.row.hostNumber }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('IP')" label="IP/Prot" width="98">
                        <template slot-scope="scope">
                            <div style="color:#ADADAD; font-size: 11px">
                                {{ scope.row.lanIp }}: {{ scope.row.lanPort }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('方向')" label="方向" width="45">
                        <template slot-scope="scope">
                            <el-tag type="info" size="mini"
                                    effect="plain">
                                <i v-if="scope.row.sendOrReceive == '主机->服务器'" class="el-icon-upload"></i>
                                <i v-if="scope.row.sendOrReceive == '服务器->主机'" class="el-icon-download"></i>
                                <i v-if="scope.row.sendOrReceive != '服务器->主机' && scope.row.sendOrReceive != '主机->服务器'" class="el-icon-close"></i>
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('日志')" label="日志" width="75">
                        <template slot-scope="scope">
                            <el-popover trigger="click"
                                        placement="right"
                                        width="250">
                                <div style="font-size: 11px; ">
                                    {{ scope.row.data }}
                                </div>
                                <div class="logdata" title="点击复制" style="color:#ADADAD"
                                     slot="reference">
                                    {{ scope.row.data }} @*  v-on:click="copyData(scope.row.data)" *@
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('帧号')" label="帧号 间隔" width="63">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.timeDifference }}
                            </div>
                            <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                            <div style="color:#ADADAD">
                                {{ scope.row.frameNo }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="visTabCol.includes('命令')" label="命令" width="125">
                        <template slot-scope="scope">
                            <el-popover placement="right"
                                        width="300"
                                        trigger="hover">
                                <el-table :data="testData"
                                          border>
                                    <el-table-column width="99" property="key" label="指令编码"></el-table-column>
                                    <el-table-column width="200" property="value" label="内容"></el-table-column>
                                </el-table>
                                <div slot="reference">
                                    <span>{{ scope.row.commandTypeVal }}</span>
                                    <hr style="border: none; height: 1px; background-color: #D3DCE6;">
                                    <span>{{ scope.row.commandType }}</span>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>


                </el-table>
                <div class="block" v-show="allPageNum > 0">
                    <span v-if="dialogw != '100%'">
                        <el-pagination style="margin:5px 0 0 10px"
                                       background
                                       pager-count="10"
                                       v-on:size-change="handleSizeChange"
                                       v-on:current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-sizes="[20, 50, 100, 300, 500]"
                                       :page-size="50"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="allPageNum">
                        </el-pagination>
                    </span>
                    <span v-else>
                        <el-pagination style="margin:5px"
                                       background
                                       small
                                       pager-count="5"
                                       v-on:size-change="handleSizeChange"
                                       v-on:current-change="handleCurrentChange"
                                       :current-page="currentPage"
                                       :page-size="50"
                                       layout="pager, jumper"
                                       :total="allPageNum">
                        </el-pagination>
                    </span>

                </div>
            </div>
        </div>
        <!-- 圆饼图  v-if="logs != unll" -->
        <div v-show="echartVis">
            <div style="display:inline-block; width: 51%; height:auto; float:left;margin: 10px 0 0 10px;">
                <div id="circular-echart" style="width: 440px; height:188px ; float:left;"></div>
                <div id="circular-echart2" style="width: 440px; height:188px ; float:left;"></div>
            </div>
            <!-- 柱状折线图 -->
            <div style="display:inline-block; width: 52%; height:auto; float:left;">
                <div id="bar-echart" style="width: 880px; height:233px ; float:left;"></div>
            </div>
            <!-- 柱状横置图 -->
            <div v-show="false" style="display:inline-block; width: 52%; height:auto; float:left;">
                <div id="profile-echart" style="width: 880px; height:444px ; float:left;"></div>
            </div>
        </div>


    </div>

    @* <script>
        let startY = 0; // 记录触摸开始的Y坐标
        let isTop = true; // 标记页面是否在顶部

        document.addEventListener('touchstart', function (event) {
            // 获取第一个触摸点的Y坐标
            startY = event.touches.clientY;
            // 检查页面是否在顶部
            isTop = document.documentElement.scrollTop === 0 || document.body.scrollTop === 0;
        });

        document.addEventListener('touchmove', function (event) {
            // 如果页面在顶部，并且用户正在向下拉动
            if (isTop && startY < event.touches.clientY) {
                event.preventDefault(); // 阻止默认的下拉刷新行为
            }
        }, { passive: false });
    </script> *@
    <!-- JavaScript引入 -->
    <script src="~/js/LogJs/LogIndex.js"></script>
    @* <script src="~/js/logjs/echarts.js"></script> *@
</body>
</html>
