123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="renderer" content="webkit">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="Cache" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache, must-revalidate">
- <meta http-equiv="expires" content="0">
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <title>钢丝绳检测</title>
- <link rel="stylesheet" href="../css/index.css">
- <link rel="stylesheet" href="../css/style.css">
- <link rel="stylesheet" href="../css/iconfont.css">
- <script src="../js/vue.min.js"></script>
- <script src="../js/index.js"></script>
- <script src="../js/jquery.min.js"></script>
- <script src="../js/echarts.min.js"></script>
- <script type="text/javascript">
- document.write('<script src="../assets/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- document.write('<script src="../assets/wireWram.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- </script>
- <script>
- checkLogin();
- </script>
- <style type="text/css">
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- }
- .yz_main{
- width: calc(100% - 160px);
- height: 100%;
- float: right;
- padding: 0 8px;
- }
- .yz_aside{
- width: 160px;
- height: 100%;
- float: left;
- color: #fff;
- }
- .yz_aside li{
- cursor: pointer;
- padding: 7px 8px;
- }
- li{
- list-style: none;
- }
- .warmli li{
- display: flex;
- align-items: center;
- font-size: 14px;
- color: #e1e1e1;
- padding: 7px 15px;
- }
- .warmli li .act{
- color: #0081FF;
- }
- #app .el-table .el-table__cell{
- padding:7px 0 !important;
- }
- #app .el-table,#app .el-table__expanded-cell,#app .el-table tr{
- color: #d4d4d4;
- background-color: transparent !important;
- }
- #app .el-table::before{
- height: 0;
- }
- #app .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
- border-bottom: none;
- }
- #app .el-table--striped .el-table__body tr.el-table__row--striped td {
- background: #001D45;
- }
- .el-input__inner{
- height: 34px;
- }
- </style>
- </head>
- <body>
- <div id="app" class="padding-xs" v-cloak>
- <div class="bg-theme-son flex algin-center">
- <div v-for="(item,index) in ['实时监控','历史查询']" :key='index' @click="activeName = index"
- class="padding-tb-sm padding-lr pointer" :class="activeName == index?'text-blue':''">{{ item }}</div>
- </div>
- <div style="height:calc(100vh - 47px);overflow: auto;" class="padding-tb-xs" v-loading="loading">
- <div class="yz_aside warmli Sense">
- <div class="padding-sm text-bold text-sm">设备列表</div>
- <ul style="height: calc(100% - 52px);overflow: auto;" v-if="wireImeiLi.length">
- <li v-for="(it,ind) in wireImeiLi" :key="ind" @click="handleChange(it)">
- <div class="text-sm" :class="it.imei == wireItem.imei?'act':''">{{ it.name }}</div>
- </li>
- </ul>
- <ul v-else>
- <li>暂无设备</li>
- </ul>
- </div>
- <div class="yz_main text-sm">
- <div v-show="activeName == 0" style="height:100%;">
- <div style="height:50%;background-color: #001D45;">
- <div id="myChart" style="height:100%;width: 100%;"></div>
- </div>
- <img src="../img/wireRope.png" alt="" class="margin-tb-xs" style="width: 100%;">
- <div style="height:calc(50% - 90px);">
- <el-row :gutter="10" style="height:100%;">
- <el-col :span="8" class="padding-tb-sm radius" style="background-color: #001D45;">
- <div class="padding-xs">设备编号:<span class="text-yellow">{{wireItem.imei}}</span></div>
- <div class="padding-xs">上报时间:<span class="text-yellow">{{wireInfo.ts != undefined?getDTime(new Date(parseInt(wireInfo.ts)*1000))[2]:'---- --:--:--'}}</span> </div>
- <div class="flex">
- <div class="flex-sub">
- <div class="padding-xs">风险等级:<span class="text-yellow">无</span></div>
- <div class="padding-xs">最大损伤值:<span class="text-yellow">{{wireInfo.maxSS.toFixed(2)}}%</span></div>
- <div class="padding-xs">平均损伤值:<span class="text-yellow">{{wireInfo.avgSS.toFixed(2)}}%</span></div>
- <div class="padding-xs">损伤等级:
- <span>
- <span v-if="wireInfo.level == 0" class="text-green">正常</span>
- <span v-else-if="wireInfo.level == 1" class="text-green">轻度</span>
- <span v-else-if="wireInfo.level == 2" class="text-orange">中度</span>
- <span v-else-if="wireInfo.level == 3" class="text-red">重度</span>
- </span>
- </div>
- </div>
- <div class="flex-sub">
- <div class="padding-xs">检测距离:<span class="text-yellow">{{wireInfo.distance}}m</span></div>
- <div class="padding-xs">损伤个数:<span class="text-yellow">{{wireInfo.cnt}}个</span></div>
- <div class="padding-xs">平均速度:<span class="text-yellow">{{wireInfo.speed}}m/s</span></div>
- </div>
- </div>
- </el-col>
- <el-col :span="16" style="height:100%;">
- <div style="width: 100%;height: 100%;">
- <el-table :data="wireInfo.data" stripe height="100%" style="width: 100%;"
- :header-cell-style="{background:'#173862',color:'#fff'}">
- <el-table-column align="center" prop="x" label="时间" width="160">
- <template slot-scope="scope">
- {{getDTime(new Date(parseInt(scope.row.x)*1000))[2]}}
- </template>
- </el-table-column>
- <el-table-column align="center" prop="ss" label="损伤值">
- <template slot-scope="scope">{{ scope.row.ss }}%</template>
- </el-table-column>
- <el-table-column align="center" prop="y" label="模数值"></el-table-column>
- </el-table>
- </div>
- </el-col>
- </el-row>
- </div>
- </div>
- <div v-show="activeName == 1" style="height:100%;">
- <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
- <el-form-item label="日期:" prop="maintenanceId">
- <div class="flex">
- <el-date-picker style="width: 196px;" type="datetime" placeholder="选择开始日期" value-model="yyyy-MM-dd HH:mm:ss" v-model="queryParams.startime"></el-date-picker>
- <span class="margin-lr-sm">-</span>
- <el-date-picker style="width: 196px;" type="datetime" placeholder="选择结束日期" value-model="yyyy-MM-dd HH:mm:ss" v-model="queryParams.endtime"></el-date-picker>
- </div>
- </el-form-item>
- <el-form-item label="日期排序:">
- <el-select v-model="queryParams.orderSql" style="width: 110px;" placeholder="请选择">
- <el-option
- v-for="item in orderSqlLi"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh-right" size="small" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <el-table :data="wireHis" style="width: 100%;" stripe
- :header-cell-style="{background:'#173862',color:'#fff'}">
- <el-table-column align="center" prop="imei" label="设备号"></el-table-column>
- <el-table-column align="center" prop="time" label="上报时间"></el-table-column>
- <!-- <el-table-column align="center" prop="sTime" label="开始时间" width="160" v-if="wireHis[0].sTime != undefined">
- <template slot-scope="scope">
- {{getDTime(new Date(parseInt(scope.row.sTime)*1000))[2]}}
- </template>
- </el-table-column>
- <el-table-column align="center" prop="etime" label="结束时间" width="160" v-if="wireHis[0].etime != undefined">
- <template slot-scope="scope">
- {{getDTime(new Date(parseInt(scope.row.etime)*1000))[2]}}
- </template>
- </el-table-column> -->
- <el-table-column align="center" prop="level" label="损伤等级">
- <template slot-scope="scope">
- <span v-if="scope.row.level == 0" class="text-green">正常</span>
- <span v-else-if="scope.row.level == 1" class="text-green">轻度</span>
- <span v-else-if="scope.row.level == 2" class="text-orange">中度</span>
- <span v-else-if="scope.row.level == 3" class="text-red">重度</span>
- </template>
- </el-table-column>
- <el-table-column align="center" prop="cnt" label="损伤个数">
- <template slot-scope="scope">
- <el-tooltip class="item" effect="dark" placement="top-start">
- <template slot="content">
- <el-table v-if="scope.row.data != undefined" :data="JSON.parse(scope.row.data)">
- <el-table-column align="center" prop="x" label="时间" width="160">
- <template slot-scope="scope">
- {{getDTime(new Date(parseInt(scope.row.x)*1000))[2]}}
- </template>
- </el-table-column>
- <el-table-column align="center" prop="ss" label="损伤值">
- <template slot-scope="scope">{{ scope.row.ss }}%</template>
- </el-table-column>
- <el-table-column align="center" prop="y" label="模数值"></el-table-column>
- </el-table>
- </template>
- <span>{{ scope.row.cnt }}</span>
- </el-tooltip>
- </template>
- </el-table-column>
- <el-table-column align="center" prop="avgSS" label="平均损伤值">
- <template slot-scope="scope">{{ scope.row.avgSS }}%</template>
- </el-table-column>
- <el-table-column align="center" prop="maxSS" label="最大损伤值">
- <template slot-scope="scope">{{ scope.row.maxSS }}%</template>
- </el-table-column>
- <el-table-column align="center" prop="speed" label="平均速度">
- <template slot-scope="scope">{{ scope.row.speed }}m/s</template>
- </el-table-column>
- <el-table-column align="center" prop="distance" label="检测距离">
- <template slot-scope="scope">{{ scope.row.distance }}m</template>
- </el-table-column>
- </el-table>
- <div class="margin-tb-sm">
- <el-pagination
- @current-change="handleCurrentChange"
- :current-page="queryParams.page"
- background
- :page-size="12"
- layout="total, prev, pager, next, jumper"
- :total="allTotal">
- </el-pagination>
-
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- document.write('<script src="../assets/wireRope.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
- </script>
- </body>
- </html>
|