|
|
@@ -1,152 +1,293 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
- <div id="main">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col :span="6">
|
|
|
- <div class="card_left">
|
|
|
- <el-card class="box-card card_left1 " v-loading="loading1 && loading2">
|
|
|
- <span class="h2">设备工况</span>
|
|
|
- <div class="contain">
|
|
|
- <index1 :resData="index1Data" style="width:100%;height:20vh" alt="饼图" />
|
|
|
- <div class="title-btn">异常设备数</div>
|
|
|
- <index2 :resData="index2Data" style="width:100%;height:24.5vh;" alt="柱状图" />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card card_left2 mg10" v-loading="loading3">
|
|
|
- <span class="h2">报警处理</span>
|
|
|
- <div class="contain">
|
|
|
- <index3 :resData="index3Data" style="width:105%;height:calc(100vh - 55.5vh - 120px);margin-left:-2.5%;"
|
|
|
- alt="折线图" />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="card_center">
|
|
|
- <el-card class="box-card card_center1" style="padding:0 !important">
|
|
|
- <div class="map" style="height:calc(48vh - 35px)">
|
|
|
- <!-- <iframe id="myIframe" style="width:100%;height:100%;border:none;" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
|
|
|
- <iframe id="myIframe" style="width:100%;height:100%;border:none;"
|
|
|
- src='https://www.thingjs.com/s/b11227d4fd5505106989737c?params=105b0f77fd24654d4eebc434e9'></iframe>
|
|
|
-
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card card_center2 mg10">
|
|
|
- <div class="title">
|
|
|
- <span class="h2">实时告警信息</span>
|
|
|
- </div>
|
|
|
- <div class="contain">
|
|
|
- <el-table :data="index4Data" style="margin-top:10px" height="calc(100vh - 54vh - 120px)">
|
|
|
- <el-table-column label="告警时间" align="left" prop="alarmTime" show-overflow-tooltip />
|
|
|
- <el-table-column label="告警内容" align="left" prop="property" show-overflow-tooltip />
|
|
|
- <el-table-column label="设备名称" align="left" prop="deviceName" show-overflow-tooltip />
|
|
|
- <el-table-column label="设备编号" align="left" prop="deviceId" show-overflow-tooltip />
|
|
|
- <el-table-column label="设备类型" align="left" prop="deviceTypeName" show-overflow-tooltip />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <div class="card_right">
|
|
|
- <el-card class="box-card card_right1" v-loading="loading4">
|
|
|
- <div class="title">
|
|
|
- <span class="h2">园区实时报警统计</span>
|
|
|
- </div>
|
|
|
- <div class="contain">
|
|
|
- <div id="total-squares">
|
|
|
- <div class="total-square" v-for="(item, index) in timeList" :key="index">{{ item }}</div>
|
|
|
- <div class="title-btn">当前时间</div>
|
|
|
- </div>
|
|
|
- <index5 :resData="index5Data" style="width:100%;" alt="横状图" />
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- <el-card class="box-card card_right2 mg10" v-loading="loading4">
|
|
|
- <div class="title">
|
|
|
- <span class="h2">隐患处理</span>
|
|
|
- </div>
|
|
|
- <div class="contain">
|
|
|
- <div>
|
|
|
- <ul id="pop">
|
|
|
- <li>
|
|
|
- <div>
|
|
|
- <p class="num-huan" style="color:#6F99FA">{{ collectList.checkCount }}</p>
|
|
|
- <p class="des-huan">已处理</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div>
|
|
|
- <p class="num-huan" style="color:#6F99FA">{{ collectList.noCheckCount }}</p>
|
|
|
- <p class="des-huan">未处理</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div>
|
|
|
- <p class="num-huan" style="color:#6F99FA">{{ Number((collectList.checkRadio) * 100).toFixed(2) }}%
|
|
|
- </p>
|
|
|
- <p class="des-huan">处理率</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div>
|
|
|
- <p class="num-huan" style="color:#6F99FA">{{ collectList.total }}</p>
|
|
|
- <p class="des-huan">隐患总数</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <!-- <div class="title-btn" style="margin:10px auto">异常设备数</div> -->
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <el-table :data="index6Data" height="calc(100vh - 61.8vh - 120px)">
|
|
|
- <el-table-column label="序号" align="left" prop="id" />
|
|
|
- <el-table-column label="告警值" align="left" prop="property" show-overflow-tooltip />
|
|
|
- <el-table-column label="当前状态" align="left" prop="alarmStatus">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span :class="scope.row.alarmStatus == 1 ? 'processed' : 'unprocess'">{{ scope.row.alarmStatus
|
|
|
- == 1 ? '已处理' : '未处理' }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="处理时间" align="left" prop="updateTime" show-overflow-tooltip />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
- <!-- 详情对话框 -->
|
|
|
- <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :before-close="cancel"
|
|
|
- :close-on-click-modal="false">
|
|
|
- <div style="height:700px" class="index-dialog">
|
|
|
- <div class="detail-container">
|
|
|
- <div class="project-status " v-if="!showNowClick">
|
|
|
- <h3>项目信息</h3>
|
|
|
- <br>
|
|
|
- <el-row>
|
|
|
- <el-col :span="12">
|
|
|
- <div class="tit">项目名称：</div>
|
|
|
- <p>{{this.innerData.building_name}}</p>
|
|
|
- <div class="tit">项目地址：</div>
|
|
|
- <p>{{this.innerData.address}}</p>
|
|
|
- <div class="tit">项目坐标：</div>
|
|
|
- <p>{{this.innerData.lng}} {{this.innerData.lat}}</p>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
-
|
|
|
- <div class="tit">联系人：</div>
|
|
|
- <p>{{this.innerData.username}}</p>
|
|
|
- <div class="tit">联系电话：</div>
|
|
|
- <p>{{this.innerData.phone}}</p>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
-
|
|
|
-
|
|
|
- <!-- <el-form ref="form" :model="form" label-width="auto">
|
|
|
+ <div class="app-container">
|
|
|
+ <div id="main">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="card_left">
|
|
|
+ <el-card
|
|
|
+ class="box-card card_left1"
|
|
|
+ v-loading="loading1 && loading2"
|
|
|
+ >
|
|
|
+ <span class="h2">设备工况</span>
|
|
|
+ <div class="contain">
|
|
|
+ <index1
|
|
|
+ :resData="index1Data"
|
|
|
+ style="width: 100%; height: 20vh"
|
|
|
+ alt="饼图"
|
|
|
+ />
|
|
|
+ <div class="title-btn">异常设备数</div>
|
|
|
+ <index2
|
|
|
+ :resData="index2Data"
|
|
|
+ style="width: 100%; height: 24.5vh"
|
|
|
+ alt="柱状图"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card
|
|
|
+ class="box-card card_left2 mg10"
|
|
|
+ v-loading="loading3"
|
|
|
+ >
|
|
|
+ <span class="h2">报警处理</span>
|
|
|
+ <div class="contain">
|
|
|
+ <index3
|
|
|
+ :resData="index3Data"
|
|
|
+ style="
|
|
|
+ width: 105%;
|
|
|
+ height: calc(100vh - 55.5vh - 120px);
|
|
|
+ margin-left: -2.5%;
|
|
|
+ "
|
|
|
+ alt="折线图"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="card_center">
|
|
|
+ <el-card
|
|
|
+ class="box-card card_center1"
|
|
|
+ style="padding: 0 !important"
|
|
|
+ >
|
|
|
+ <div class="map" style="height: calc(48vh - 35px)">
|
|
|
+ <!-- <iframe id="myIframe" style="width:100%;height:100%;border:none;" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
|
|
|
+ <iframe
|
|
|
+ id="myIframe"
|
|
|
+ style="
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ "
|
|
|
+ src="https://www.thingjs.com/s/b11227d4fd5505106989737c?params=105b0f77fd24654d4eebc434e9"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="box-card card_center2 mg10">
|
|
|
+ <div class="title">
|
|
|
+ <span class="h2">实时告警信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="contain">
|
|
|
+ <el-table
|
|
|
+ :data="index4Data"
|
|
|
+ style="margin-top: 10px"
|
|
|
+ height="calc(100vh - 54vh - 120px)"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="告警时间"
|
|
|
+ align="left"
|
|
|
+ prop="alarmTime"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="告警内容"
|
|
|
+ align="left"
|
|
|
+ prop="property"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="设备名称"
|
|
|
+ align="left"
|
|
|
+ prop="deviceName"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="设备编号"
|
|
|
+ align="left"
|
|
|
+ prop="deviceId"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="设备类型"
|
|
|
+ align="left"
|
|
|
+ prop="deviceTypeName"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="card_right">
|
|
|
+ <el-card
|
|
|
+ class="box-card card_right1"
|
|
|
+ v-loading="loading4"
|
|
|
+ >
|
|
|
+ <div class="title">
|
|
|
+ <span class="h2">园区实时报警统计</span>
|
|
|
+ </div>
|
|
|
+ <div class="contain">
|
|
|
+ <div id="total-squares">
|
|
|
+ <div
|
|
|
+ class="total-square"
|
|
|
+ v-for="(item, index) in timeList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </div>
|
|
|
+ <div class="title-btn">当前时间</div>
|
|
|
+ </div>
|
|
|
+ <index5
|
|
|
+ :resData="index5Data"
|
|
|
+ style="width: 100%"
|
|
|
+ alt="横状图"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card
|
|
|
+ class="box-card card_right2 mg10"
|
|
|
+ v-loading="loading4"
|
|
|
+ >
|
|
|
+ <div class="title">
|
|
|
+ <span class="h2">隐患处理</span>
|
|
|
+ </div>
|
|
|
+ <div class="contain">
|
|
|
+ <div>
|
|
|
+ <ul id="pop">
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <p
|
|
|
+ class="num-huan"
|
|
|
+ style="color: #6f99fa"
|
|
|
+ >
|
|
|
+ {{ collectList.checkCount }}
|
|
|
+ </p>
|
|
|
+ <p class="des-huan">已处理</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <p
|
|
|
+ class="num-huan"
|
|
|
+ style="color: #6f99fa"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ collectList.noCheckCount
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ <p class="des-huan">未处理</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <p
|
|
|
+ class="num-huan"
|
|
|
+ style="color: #6f99fa"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ Number(
|
|
|
+ collectList.checkRadio *
|
|
|
+ 100
|
|
|
+ ).toFixed(2)
|
|
|
+ }}%
|
|
|
+ </p>
|
|
|
+ <p class="des-huan">处理率</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <div>
|
|
|
+ <p
|
|
|
+ class="num-huan"
|
|
|
+ style="color: #6f99fa"
|
|
|
+ >
|
|
|
+ {{ collectList.total }}
|
|
|
+ </p>
|
|
|
+ <p class="des-huan">隐患总数</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="title-btn" style="margin:10px auto">异常设备数</div> -->
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <el-table
|
|
|
+ :data="index6Data"
|
|
|
+ height="calc(100vh - 61.8vh - 120px)"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="序号"
|
|
|
+ align="left"
|
|
|
+ prop="id"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="告警值"
|
|
|
+ align="left"
|
|
|
+ prop="property"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="当前状态"
|
|
|
+ align="left"
|
|
|
+ prop="alarmStatus"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span
|
|
|
+ :class="
|
|
|
+ scope.row
|
|
|
+ .alarmStatus ==
|
|
|
+ 1
|
|
|
+ ? 'processed'
|
|
|
+ : 'unprocess'
|
|
|
+ "
|
|
|
+ >{{
|
|
|
+ scope.row
|
|
|
+ .alarmStatus ==
|
|
|
+ 1
|
|
|
+ ? "已处理"
|
|
|
+ : "未处理"
|
|
|
+ }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="处理时间"
|
|
|
+ align="left"
|
|
|
+ prop="updateTime"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 详情对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="open"
|
|
|
+ width="1000px"
|
|
|
+ append-to-body
|
|
|
+ :before-close="cancel"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div style="height: 700px" class="index-dialog">
|
|
|
+ <div class="detail-container" style="margin-top:-20px">
|
|
|
+ <div class="project-status" v-if="!showNowClick">
|
|
|
+ <h3>项目信息</h3>
|
|
|
+ <br />
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="tit">项目名称：</div>
|
|
|
+ <p>{{ this.innerData.building_name }}</p>
|
|
|
+ <div class="tit">项目地址：</div>
|
|
|
+ <p>{{ this.innerData.address }}</p>
|
|
|
+ <div class="tit">项目坐标：</div>
|
|
|
+ <p>
|
|
|
+ {{ this.innerData.lng }}
|
|
|
+ {{ this.innerData.lat }}
|
|
|
+ </p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div class="tit">联系人：</div>
|
|
|
+ <p>{{ this.innerData.username }}</p>
|
|
|
+ <div class="tit">联系电话：</div>
|
|
|
+ <p>{{ this.innerData.phone }}</p>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- <el-form ref="form" :model="form" label-width="auto">
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="项目名称：" prop="id">
|
|
|
@@ -175,746 +316,943 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-form> -->
|
|
|
+ </div>
|
|
|
+ <div class="now-status" v-else>
|
|
|
+ <h3>当前实时状态</h3>
|
|
|
+ <br />
|
|
|
+ <el-row :gutter="40">
|
|
|
+ <el-col :span="5">
|
|
|
+ <img
|
|
|
+ :src="innerData.imgUrl"
|
|
|
+ alt=""
|
|
|
+ style="width: 105px"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="7">
|
|
|
+ <div class="tit">设备名称</div>
|
|
|
+ <p>{{ currentOneData.device_name }}</p>
|
|
|
+ <div class="tit">设备编号</div>
|
|
|
+ <p>{{ currentOneData.owner_code }}</p>
|
|
|
+ <div class="tit">监测对象</div>
|
|
|
+ <p>{{ currentOneData.object_name }}</p>
|
|
|
+ <div class="tit">数据更新时间</div>
|
|
|
+ <p>{{ currentOneData.status_time }}</p>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <div
|
|
|
+ style="width: 70%;margin-left:10% "
|
|
|
+ v-if="currentOneData.dwtype == 'YTVA'"
|
|
|
+ >
|
|
|
+ <video
|
|
|
+ class="hlsVideo monitor-height"
|
|
|
+ ref="hlsVideo"
|
|
|
+ style="width: 100%"
|
|
|
+ controls
|
|
|
+ preload="true"
|
|
|
+ muted
|
|
|
+ ></video>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="height: 240px; width: 80%"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <div style="font-size: 20px">
|
|
|
+ {{ currentOneData.device_name }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="tit"
|
|
|
+ style="display: inline-block"
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ currentOneData.status_list[0]
|
|
|
+ .point_name
|
|
|
+ }}:
|
|
|
+ </div>
|
|
|
+ <p style="display: inline-block">
|
|
|
+ {{
|
|
|
+ currentOneData.status_list[0]
|
|
|
+ .content
|
|
|
+ }}
|
|
|
+ </p>
|
|
|
+ <br />
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-for="(
|
|
|
+ item, index
|
|
|
+ ) in statusListData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="tit"
|
|
|
+ style="display: inline-block"
|
|
|
+ >
|
|
|
+ {{ item.point_name }}:
|
|
|
+ </div>
|
|
|
+ <p style="display: inline-block">
|
|
|
+ {{ item.point_data }}
|
|
|
+ </p>
|
|
|
+ <br />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <h3>设备状态</h3>
|
|
|
+ <br />
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="type"
|
|
|
+ label="设备类型"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="total"
|
|
|
+ label="设备总数"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="detailed"
|
|
|
+ label="已处理"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="undetail"
|
|
|
+ label="未处理"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="rate"
|
|
|
+ label="处理率"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="now-status" v-else>
|
|
|
- <h3>当前实时状态</h3>
|
|
|
- <br>
|
|
|
- <el-row :gutter="40">
|
|
|
- <el-col :span="5">
|
|
|
- <img :src="innerData.imgUrl" alt="" style="width:105px"/>
|
|
|
- </el-col>
|
|
|
- <el-col :span="7">
|
|
|
- <div class="tit">设备名称</div>
|
|
|
- <p>{{currentOneData.device_name}}</p>
|
|
|
- <div class="tit">设备编号</div>
|
|
|
- <p>{{currentOneData.owner_code}}</p>
|
|
|
- <div class="tit">监测对象</div>
|
|
|
- <p>{{currentOneData.object_name}}</p>
|
|
|
- <div class="tit">数据更新时间</div>
|
|
|
- <p>{{currentOneData.status_time}}</p>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <div style="height:240px;width:80%;background:#e1dede" v-if="currentOneData.dwtype=='YTVA'">
|
|
|
- 视频播放区域
|
|
|
- </div>
|
|
|
- <div style="height:240px;width:80%;" v-else>
|
|
|
- <div style="font-size:20px">{{currentOneData.device_name}}</div>
|
|
|
-
|
|
|
- <div class="tit" style="display:inline-block">{{currentOneData.status_list[0].point_name }}: </div>
|
|
|
- <p style="display:inline-block"> {{currentOneData.status_list[0].content }}</p>
|
|
|
- <br>
|
|
|
-
|
|
|
- <div v-for="(item, index) in statusListData " :key="index">
|
|
|
- <div class="tit" style="display:inline-block">{{item.point_name }}: </div>
|
|
|
- <p style="display:inline-block"> {{ item.point_data}}</p>
|
|
|
- <br>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <h3>设备状态</h3>
|
|
|
- <br>
|
|
|
- <el-table :data="tableData" border style="width: 100%">
|
|
|
-
|
|
|
- <el-table-column align="center" prop="type" label="设备类型">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="total" label="设备总数">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="detailed" label="已处理">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="undetail" label="未处理">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column align="center" prop="rate" label="处理率">
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- <el-form ref="form" :model="form" label-width="auto">
|
|
|
+ <!-- <el-form ref="form" :model="form" label-width="auto">
|
|
|
<el-row :gutter="20">
|
|
|
|
|
|
弹框信息
|
|
|
-
|
|
|
+
|
|
|
</el-row>
|
|
|
</el-form> -->
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import Hls from "hls.js";
|
|
|
import { index1Api, index2Api, index3Api } from "@/api/business/index";
|
|
|
import { getTbAlarm } from "@/api/business/OM/eventCenter";
|
|
|
import { collectTbAlarm } from "@/api/business/OM/eventCenter";
|
|
|
-import { getThisDateBeforMonth, YearMonthDate } from "@/assets/js/dataFormate.js";
|
|
|
+import {
|
|
|
+ getThisDateBeforMonth,
|
|
|
+ YearMonthDate,
|
|
|
+} from "@/assets/js/dataFormate.js";
|
|
|
import index1 from "./components/index/index1";
|
|
|
import index2 from "./components/index/index2";
|
|
|
import index3 from "./components/index/index3";
|
|
|
import index5 from "./components/index/index5";
|
|
|
-import axios from 'axios'
|
|
|
+import axios from "axios";
|
|
|
axios.defaults.baseURL = "/api";
|
|
|
// import $ from 'jquery'
|
|
|
// import index6 from "./components/index/index6";
|
|
|
-import ui_large from "@/assets/images/status_ui_large.gif" //用户传输装置gif
|
|
|
-import fc_large from "@/assets/images/status_fc_large.gif" //消防控制柜gif
|
|
|
-import ef_large from "@/assets/images/status_ef_large.gif" //电气火灾gif
|
|
|
-import wp_large from "@/assets/images/status_wp_large.gif" //水压gif
|
|
|
-import ll_large from "@/assets/images/status_ll_large.gif" //液位gif
|
|
|
-import ci_large from "@/assets/images/status_ci_large.gif" //环境监测gif
|
|
|
-import va_large from "@/assets/images/status_va_large.gif" //视频监控gif
|
|
|
-import wc_large from "@/assets/images/status_wc_large.gif" //风机控制柜gif
|
|
|
-import sm_large from "@/assets/images/status_sm_large.gif" //烟感gif
|
|
|
+import ui_large from "@/assets/images/status_ui_large.png"; //用户传输装置gif
|
|
|
+import fc_large from "@/assets/images/status_fc_large.png"; //消防控制柜gif
|
|
|
+import ef_large from "@/assets/images/status_ef_large.png"; //电气火灾gif
|
|
|
+import wp_large from "@/assets/images/status_wp_large.png"; //水压gif
|
|
|
+import ll_large from "@/assets/images/status_ll_large.png"; //液位gif
|
|
|
+import ci_large from "@/assets/images/status_ci_large.png"; //环境监测gif
|
|
|
+import va_large from "@/assets/images/status_va_large.png"; //视频监控gif
|
|
|
+import wc_large from "@/assets/images/status_wc_large.png"; //风机控制柜gif
|
|
|
+import sm_large from "@/assets/images/status_sm_large.png"; //烟感gif
|
|
|
|
|
|
export default {
|
|
|
- name: "index",
|
|
|
- components: {
|
|
|
- index1, index2, index3, index5
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
-
|
|
|
- title: "楼层展示",
|
|
|
- open: false,
|
|
|
- showNowClick:false,
|
|
|
- form: {},
|
|
|
- tableData: [{
|
|
|
- type: '火灾监控',
|
|
|
- total: '76',
|
|
|
- detailed: '38',
|
|
|
- undetail: '0',
|
|
|
- rate: '50%'
|
|
|
- }, {
|
|
|
- type: '电气火灾监控',
|
|
|
- total: '76',
|
|
|
- detailed: '38',
|
|
|
- undetail: '38',
|
|
|
- rate: '50%'
|
|
|
- }, {
|
|
|
- type: '水系统监控',
|
|
|
- total: '76',
|
|
|
- detailed: '38',
|
|
|
- undetail: '38',
|
|
|
- rate: '50%'
|
|
|
- }, {
|
|
|
- type: 'RTU监控',
|
|
|
- total: '76',
|
|
|
- detailed: '38',
|
|
|
- undetail: '38',
|
|
|
- rate: '50%'
|
|
|
- }, {
|
|
|
- type: '视频告警监控',
|
|
|
- total: '76',
|
|
|
- detailed: '38',
|
|
|
- undetail: '38',
|
|
|
- rate: '50%'
|
|
|
- }, {
|
|
|
- type: '电梯告警监控',
|
|
|
- total: '76',
|
|
|
- detailed: '38',
|
|
|
- undetail: '38',
|
|
|
- rate: '50%'
|
|
|
- }],
|
|
|
- buildingStore: [],
|
|
|
- top_level: '',
|
|
|
-
|
|
|
- innerData:{},
|
|
|
- currentOneData:{},
|
|
|
- statusListData:[],
|
|
|
- // building_name:'',
|
|
|
- // username:'',
|
|
|
- // address:'',
|
|
|
- // phone:'',
|
|
|
- // lat:'',
|
|
|
- // lng:'',
|
|
|
-
|
|
|
-
|
|
|
- index1Data: [],//设备工况=>饼图
|
|
|
- index2Data: [],//设备工况=>柱状图
|
|
|
- index3Data: [],//报警处理=>折线图
|
|
|
- index4Data: [],//webstock
|
|
|
- index5Data: [],//园区实时告警横状图
|
|
|
- index6Data: [],
|
|
|
- index4HeaderData: [
|
|
|
- { prop: "id", name: "序号" },
|
|
|
- { prop: "time", name: "告警时间" },
|
|
|
- { prop: "type", name: "告警类型" },
|
|
|
- { prop: "details", name: "预计完成" },
|
|
|
- { prop: "nonFatal", name: "告警详情" },
|
|
|
- { prop: "statusMessage", name: "告警状态" },
|
|
|
- ],
|
|
|
- // 遮罩层
|
|
|
- loading1: true,
|
|
|
- loading2: true,
|
|
|
- loading3: true,
|
|
|
- loading4: true,
|
|
|
- loading5: true,
|
|
|
- loading6: true,
|
|
|
- // 导出遮罩层
|
|
|
- // open: false,
|
|
|
- t: null,
|
|
|
- timeList: [],
|
|
|
- collectList: [],
|
|
|
-
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.getList()
|
|
|
- this.getCollect()
|
|
|
- this.yhTable()
|
|
|
- this.initWebSocket()
|
|
|
- this.getBuild()
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
-
|
|
|
- // 取消按钮
|
|
|
- cancel() {
|
|
|
- this.open = false;
|
|
|
+ name: "index",
|
|
|
+ components: {
|
|
|
+ index1,
|
|
|
+ index2,
|
|
|
+ index3,
|
|
|
+ index5,
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
- getBuild() {
|
|
|
- const params = { "V_LOGINNAME": "gxdmxxg", "V_PASSWORD": "gxdmxxg123", "COMPANY_CODE": "10316", "COMMSTATUS": "NO" }
|
|
|
- axios({
|
|
|
- method: "post",
|
|
|
- url: `/frontpage/getCurrentObjectListByCompanyId`,
|
|
|
- params: {
|
|
|
- queryJson: JSON.stringify(params)
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ hls: null,
|
|
|
+ timeNum: null,
|
|
|
+ title: "楼层展示",
|
|
|
+ open: false,
|
|
|
+ showNowClick: false,
|
|
|
+ form: {},
|
|
|
+ tableData: [
|
|
|
+ // {
|
|
|
+ // type: '火灾监控',
|
|
|
+ // total: '76',
|
|
|
+ // detailed: '38',
|
|
|
+ // undetail: '0',
|
|
|
+ // rate: '50%'
|
|
|
+ // }, {
|
|
|
+ // type: '电气火灾监控',
|
|
|
+ // total: '76',
|
|
|
+ // detailed: '38',
|
|
|
+ // undetail: '38',
|
|
|
+ // rate: '50%'
|
|
|
+ // }, {
|
|
|
+ // type: '水系统监控',
|
|
|
+ // total: '76',
|
|
|
+ // detailed: '38',
|
|
|
+ // undetail: '38',
|
|
|
+ // rate: '50%'
|
|
|
+ // }, {
|
|
|
+ // type: 'RTU监控',
|
|
|
+ // total: '76',
|
|
|
+ // detailed: '38',
|
|
|
+ // undetail: '38',
|
|
|
+ // rate: '50%'
|
|
|
+ // }, {
|
|
|
+ // type: '视频告警监控',
|
|
|
+ // total: '76',
|
|
|
+ // detailed: '38',
|
|
|
+ // undetail: '38',
|
|
|
+ // rate: '50%'
|
|
|
+ // }, {
|
|
|
+ // type: '电梯告警监控',
|
|
|
+ // total: '76',
|
|
|
+ // detailed: '38',
|
|
|
+ // undetail: '38',
|
|
|
+ // rate: '50%'
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ buildingStore: [],
|
|
|
+ top_level: "",
|
|
|
+
|
|
|
+ innerData: {},
|
|
|
+ currentOneData: {},
|
|
|
+ statusListData: [],
|
|
|
+ // building_name:'',
|
|
|
+ // username:'',
|
|
|
+ // address:'',
|
|
|
+ // phone:'',
|
|
|
+ // lat:'',
|
|
|
+ // lng:'',
|
|
|
+
|
|
|
+ index1Data: [], //设备工况=>饼图
|
|
|
+ index2Data: [], //设备工况=>柱状图
|
|
|
+ index3Data: [], //报警处理=>折线图
|
|
|
+ index4Data: [], //webstock
|
|
|
+ index5Data: [], //园区实时告警横状图
|
|
|
+ index6Data: [],
|
|
|
+ index4HeaderData: [
|
|
|
+ { prop: "id", name: "序号" },
|
|
|
+ { prop: "time", name: "告警时间" },
|
|
|
+ { prop: "type", name: "告警类型" },
|
|
|
+ { prop: "details", name: "预计完成" },
|
|
|
+ { prop: "nonFatal", name: "告警详情" },
|
|
|
+ { prop: "statusMessage", name: "告警状态" },
|
|
|
+ ],
|
|
|
+ // 遮罩层
|
|
|
+ loading1: true,
|
|
|
+ loading2: true,
|
|
|
+ loading3: true,
|
|
|
+ loading4: true,
|
|
|
+ loading5: true,
|
|
|
+ loading6: true,
|
|
|
+ // 导出遮罩层
|
|
|
+ // open: false,
|
|
|
+ t: null,
|
|
|
+ timeList: [],
|
|
|
+ collectList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ this.getCollect();
|
|
|
+ this.yhTable();
|
|
|
+ this.initWebSocket();
|
|
|
+ this.getBuild();
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.destroyHls();
|
|
|
},
|
|
|
- headers: {
|
|
|
|
|
|
+ getBuild() {
|
|
|
+ const params = {
|
|
|
+ V_LOGINNAME: "gxdmxxg",
|
|
|
+ V_PASSWORD: "gxdmxxg123",
|
|
|
+ COMPANY_CODE: "10316",
|
|
|
+ COMMSTATUS: "NO",
|
|
|
+ };
|
|
|
+ axios({
|
|
|
+ method: "post",
|
|
|
+ url: `/iot/frontpage/getCurrentObjectListByCompanyId`,
|
|
|
+ params: {
|
|
|
+ queryJson: JSON.stringify(params),
|
|
|
+ },
|
|
|
+ headers: {},
|
|
|
+ }).then((res) => {
|
|
|
+ this.top_level = res.data.top_level;
|
|
|
+ this.buildingStore = res.data.LIST;
|
|
|
+
|
|
|
+ var company = res.data.COMPANY;
|
|
|
+ this.innerData = {
|
|
|
+ building_name: company.building_name,
|
|
|
+ username: company.username,
|
|
|
+ address: company.address,
|
|
|
+ phone: company.phone,
|
|
|
+ lat: company.lat,
|
|
|
+ lng: company.lng,
|
|
|
+ };
|
|
|
+
|
|
|
+ this.tableData = [
|
|
|
+ {
|
|
|
+ type: "火灾监控",
|
|
|
+ total: company.d1,
|
|
|
+ detailed: company.d1ac,
|
|
|
+ undetail: company.d1a - company.d1ac,
|
|
|
+ rate: company.d1a
|
|
|
+ ? ((company.d1ac / company.d1a) * 100).toFixed(2) +
|
|
|
+ "%"
|
|
|
+ : 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "电气火灾监控",
|
|
|
+ total: company.d7,
|
|
|
+ detailed: company.d7ac,
|
|
|
+ undetail: company.d7a - company.d7ac,
|
|
|
+ rate: company.d7a
|
|
|
+ ? ((company.d7ac / company.d7a) * 100).toFixed(2) +
|
|
|
+ "%"
|
|
|
+ : 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "水系统监控",
|
|
|
+ total: company.d2,
|
|
|
+ detailed: company.d2ac,
|
|
|
+ undetail: company.d2a - company.d2ac,
|
|
|
+ rate: company.d2a
|
|
|
+ ? ((company.d2ac / company.d2a) * 100).toFixed(2) +
|
|
|
+ "%"
|
|
|
+ : 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "RTU监控",
|
|
|
+ total: company.d6,
|
|
|
+ detailed: company.d6ac,
|
|
|
+ undetail: company.d6a - company.d6ac,
|
|
|
+ rate: company.d6a
|
|
|
+ ? ((company.d6ac / company.d6a) * 100).toFixed(2) +
|
|
|
+ "%"
|
|
|
+ : 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "视频告警监控",
|
|
|
+ total: company.d16,
|
|
|
+ detailed: company.d16ac,
|
|
|
+ undetail: company.d16a - company.d16ac,
|
|
|
+ rate: company.d16a
|
|
|
+ ? ((company.d16ac / company.d16a) * 100).toFixed(
|
|
|
+ 2
|
|
|
+ ) + "%"
|
|
|
+ : 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "电梯告警监控",
|
|
|
+ total: "0",
|
|
|
+ detailed: "0",
|
|
|
+ undetail: "0",
|
|
|
+ rate: "0",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ var _this = this;
|
|
|
+ setTimeout(function () {
|
|
|
+ _this.callFuncInThingJS(
|
|
|
+ "userListener",
|
|
|
+ res.data.LIST,
|
|
|
+ res.data.top_level,
|
|
|
+ "10316"
|
|
|
+ );
|
|
|
+ }, 4000);
|
|
|
+
|
|
|
+ window.addEventListener("message", function (e) {
|
|
|
+ var data = e.data;
|
|
|
+ var funcName = data.funcName;
|
|
|
+ var param = data.param;
|
|
|
+ // if (funcName) {
|
|
|
+ // _this.open = true
|
|
|
+ // }
|
|
|
+ if (param) {
|
|
|
+ _this.iconClicj(param.dwtype, param.level);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- }).then((res) => {
|
|
|
- this.top_level = res.data.top_level;
|
|
|
- this.buildingStore = res.data.LIST;
|
|
|
-
|
|
|
- var company=res.data.COMPANY
|
|
|
- this.innerData={
|
|
|
- building_name:company.building_name,
|
|
|
- username:company.username,
|
|
|
- address:company.address,
|
|
|
- phone:company.phone,
|
|
|
- lat:company.lat,
|
|
|
- lng:company.lng,
|
|
|
- }
|
|
|
-
|
|
|
- this.tableData= [{
|
|
|
- type: '火灾监控',
|
|
|
- total: company.d1,
|
|
|
- detailed: company.d1ac,
|
|
|
- undetail: company.d1a-company.d1ac,
|
|
|
- rate:company.d1a?((company.d1ac/company.d1a)*100).toFixed(2)+'%':0
|
|
|
- }, {
|
|
|
- type: '电气火灾监控',
|
|
|
- total: company.d7,
|
|
|
- detailed: company.d7ac,
|
|
|
- undetail: company.d7a-company.d7ac,
|
|
|
- rate:company.d7a?((company.d7ac/company.d7a)*100).toFixed(2)+'%':0
|
|
|
- }, {
|
|
|
- type: '水系统监控',
|
|
|
- total: company.d2,
|
|
|
- detailed: company.d2ac,
|
|
|
- undetail: company.d2a-company.d2ac,
|
|
|
- rate:company.d2a?((company.d2ac/company.d2a)*100).toFixed(2)+'%':0
|
|
|
- }, {
|
|
|
- type: 'RTU监控',
|
|
|
- total: company.d6,
|
|
|
- detailed: company.d6ac,
|
|
|
- undetail: company.d6a-company.d6ac,
|
|
|
- rate:company.d6a?((company.d6ac/company.d6a)*100).toFixed(2)+'%':0
|
|
|
- }, {
|
|
|
- type: '视频告警监控',
|
|
|
- total: company.d16,
|
|
|
- detailed: company.d16ac,
|
|
|
- undetail: company.d16a-company.d16ac,
|
|
|
- rate:company.d16a?((company.d16ac/company.d16a)*100).toFixed(2)+'%':0
|
|
|
- }, {
|
|
|
- type: '电梯告警监控',
|
|
|
- total: '0',
|
|
|
- detailed: '0',
|
|
|
- undetail: '0',
|
|
|
- rate: '0'
|
|
|
- }];
|
|
|
-
|
|
|
-
|
|
|
- var _this = this;
|
|
|
- setTimeout(function () {
|
|
|
- _this.callFuncInThingJS('userListener', res.data.LIST, res.data.top_level, '10316');
|
|
|
- }, 4000)
|
|
|
-
|
|
|
-
|
|
|
- window.addEventListener("message", function (e) {
|
|
|
- console.log('eee')
|
|
|
- console.log(e)
|
|
|
- var data = e.data;
|
|
|
- var funcName = data.funcName;
|
|
|
- var param = data.param;
|
|
|
- // if (funcName) {
|
|
|
- // _this.open = true
|
|
|
- // }
|
|
|
- _this.iconClicj(param.dwtype,param.level)
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- iconClicj(dwtype,level){
|
|
|
- this.showNowClick=true;
|
|
|
- const params = { "V_LOGINNAME": "gxdmxxg", "V_PASSWORD": "gxdmxxg123","dwtype":dwtype,"level":level,"COMPANY_CODE":"10316"}
|
|
|
- console.log(params)
|
|
|
- axios({
|
|
|
- method: "post",
|
|
|
- url: `/frontpage/getCurrentStatus`,
|
|
|
- params: {
|
|
|
- queryJson: JSON.stringify(params)
|
|
|
+ iconClicj(dwtype, level) {
|
|
|
+ this.showNowClick = true;
|
|
|
+ const params = {
|
|
|
+ V_LOGINNAME: "gxdmxxg",
|
|
|
+ V_PASSWORD: "gxdmxxg123",
|
|
|
+ dwtype: dwtype,
|
|
|
+ level: level,
|
|
|
+ COMPANY_CODE: "10316",
|
|
|
+ };
|
|
|
+ axios({
|
|
|
+ method: "post",
|
|
|
+ url: `/iot/frontpage/getCurrentStatus`,
|
|
|
+ params: {
|
|
|
+ queryJson: JSON.stringify(params),
|
|
|
+ },
|
|
|
+ headers: {},
|
|
|
+ }).then((res) => {
|
|
|
+ let code = res.data?.devices[0]?.owner_code;
|
|
|
+ this.open = true;
|
|
|
+ this.currentOneData = res.data.devices[0];
|
|
|
+ this.statusListData = res.data.devices[0].status_list.splice(1);
|
|
|
+
|
|
|
+ var dwtype = res.data.devices[0].dwtype;
|
|
|
+ if (dwtype == "YTUI") {
|
|
|
+ this.innerData.imgUrl = ui_large; //用户传输装置
|
|
|
+ } else if (dwtype == "YTFC") {
|
|
|
+ this.innerData.imgUrl = fc_large; //消防控制柜
|
|
|
+ } else if (dwtype == "YTEF") {
|
|
|
+ this.innerData.imgUrl = ef_large; //电气火灾
|
|
|
+ } else if (dwtype == "YTWP") {
|
|
|
+ this.innerData.imgUrl = wp_large; //水压
|
|
|
+ } else if (dwtype == "YTLL") {
|
|
|
+ this.innerData.imgUrl = ll_large; //液位
|
|
|
+ } else if (dwtype == "YTCI") {
|
|
|
+ this.innerData.imgUrl = ci_large; //环境监测
|
|
|
+ } else if (dwtype == "YTVA") {
|
|
|
+ this.innerData.imgUrl = va_large; //视频监控
|
|
|
+ this.videoOpen(code, 0, 0);
|
|
|
+ } else if (dwtype == "YTWC") {
|
|
|
+ this.innerData.imgUrl = wc_large; //风机控制柜
|
|
|
+ } else if (dwtype == "YTSM") {
|
|
|
+ this.innerData.imgUrl = sm_large; //烟感
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- headers: {
|
|
|
-
|
|
|
+ /**
|
|
|
+ *
|
|
|
+ * @param {*} code
|
|
|
+ */
|
|
|
+ videoOpen(code, ACTION, IDX) {
|
|
|
+ this.destroyHls();
|
|
|
+ let queryQ = {
|
|
|
+ CMD: 3,
|
|
|
+ BODY: {
|
|
|
+ DEVICE: code,
|
|
|
+ ACTION: ACTION,
|
|
|
+ IDX: IDX,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ let query = {
|
|
|
+ CMD: 1,
|
|
|
+ };
|
|
|
+ axios({
|
|
|
+ method: "post",
|
|
|
+ url: `/cgi-bin/demo2.cgi`,
|
|
|
+ data: "queryJson:" + JSON.stringify(queryQ),
|
|
|
+ headers: {},
|
|
|
+ }).then((res) => {
|
|
|
+ if (IDX == 7) {
|
|
|
+ this.loadVideoFn(
|
|
|
+ `http://47.103.74.123:80/hls/${code}.m3u8`,
|
|
|
+ code
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ this.videoOpenAgin(code);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- }).then((res) => {
|
|
|
- this.open = true
|
|
|
- this.currentOneData=res.data.devices[0];
|
|
|
- this.statusListData=res.data.devices[0].status_list.splice(1);
|
|
|
-
|
|
|
- var dwtype=res.data.devices[0].dwtype
|
|
|
- if (dwtype == "YTUI") {
|
|
|
- this.innerData.imgUrl=ui_large //用户传输装置
|
|
|
- } else if (dwtype == "YTFC") {
|
|
|
- this.innerData.imgUrl=fc_large //消防控制柜
|
|
|
- } else if (dwtype == "YTEF") {
|
|
|
- this.innerData.imgUrl=ef_large //电气火灾
|
|
|
- } else if (dwtype == "YTWP") {
|
|
|
- this.innerData.imgUrl=wp_large //水压
|
|
|
- } else if (dwtype == "YTLL") {
|
|
|
- this.innerData.imgUrl=ll_large //液位
|
|
|
- } else if (dwtype == "YTCI") {
|
|
|
- this.innerData.imgUrl=ci_large //环境监测
|
|
|
- } else if (dwtype == "YTVA") {
|
|
|
- this.innerData.imgUrl=va_large //视频监控
|
|
|
- } else if (dwtype == "YTWC") {
|
|
|
- this.innerData.imgUrl=wc_large //风机控制柜
|
|
|
- } else if (dwtype == "YTSM") {
|
|
|
- this.innerData.imgUrl=sm_large //烟感
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- callFuncInThingJS(funcName, data, top_level, company_code) {
|
|
|
- var iframe = document.getElementById("myIframe");
|
|
|
- var msg = { data, top_level, company_code }
|
|
|
- var message = {
|
|
|
- 'funcName': funcName,
|
|
|
- 'param': msg
|
|
|
- }
|
|
|
- console.log('message')
|
|
|
- console.log(message)
|
|
|
- iframe.contentWindow.postMessage(message, '*');
|
|
|
- },
|
|
|
-
|
|
|
- getList() {
|
|
|
- /* 设备工况 */
|
|
|
- /* 饼图 */
|
|
|
- index1Api().then(response => {
|
|
|
- this.index1Data = response.data
|
|
|
- this.loading1 = false
|
|
|
- })
|
|
|
- /* 柱状图 */
|
|
|
- index1Api({ isLine: 1 }).then(response => {
|
|
|
- this.index2Data = response.data
|
|
|
- this.loading2 = false
|
|
|
- })
|
|
|
-
|
|
|
- /* 报警处理 */
|
|
|
- /* 折线图图 */
|
|
|
- index2Api({ startTime: getThisDateBeforMonth(), endTime: YearMonthDate() }).then(response => {
|
|
|
- this.index3Data = response.data
|
|
|
- this.loading3 = false
|
|
|
- })
|
|
|
-
|
|
|
- /* 园区实时时间 */
|
|
|
- this.time();
|
|
|
- this.t = setTimeout(this.time, 1000);
|
|
|
- index3Api({}).then(response => {
|
|
|
- this.index5Data = response.data
|
|
|
- this.loading4 = false
|
|
|
- })
|
|
|
- },
|
|
|
- time() {
|
|
|
- this.timeList = []
|
|
|
- clearTimeout(this.t); //清除定时器
|
|
|
-
|
|
|
- let dt = new Date();
|
|
|
- let h = this.Appendzero(dt.getHours()).toString().split(""); //获取时
|
|
|
- let m = this.Appendzero(dt.getMinutes()).toString().split(""); //获取分
|
|
|
- let times = h.concat(m)
|
|
|
- let list = "";
|
|
|
- for (let i = 0; i < times.length; i++) {
|
|
|
- this.timeList.push(times[i])
|
|
|
- }
|
|
|
- this.t = setTimeout(this.time, 1000); //设定定时器，循环运行
|
|
|
- },
|
|
|
- /* 个位数补零 */
|
|
|
- Appendzero(obj) {
|
|
|
- if (obj < 10) return "0" + obj;
|
|
|
- else return obj;
|
|
|
- },
|
|
|
- getCollect() {//隐患数据手机
|
|
|
- collectTbAlarm({ type: 1 }).then(response => {
|
|
|
- this.collectList = response.data
|
|
|
- });
|
|
|
- },
|
|
|
- yhTable() {//隐患table
|
|
|
- getTbAlarm({ type: 1, current: 1, size: 100 }).then(response => {
|
|
|
- if (response.data.records) {
|
|
|
- this.index6Data = response.data.records
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- initWebSocket() {
|
|
|
- getTbAlarm({ current: 1, size: 500, type: 1, startTime: YearMonthDate().split(" ")[0] + " 00:00:00", endTime: YearMonthDate() }).then(res => {
|
|
|
- this.index4Data = res.data.records
|
|
|
- })
|
|
|
- let that = this
|
|
|
- let num = 0
|
|
|
- if ("WebSocket" in window) {
|
|
|
- this.ws = new WebSocket("ws://10.21.39.1:8084/dm/alarmPush");
|
|
|
- // console.log(this.ws)
|
|
|
- this.ws.onopen = () => {
|
|
|
- // console.log("websocket连接成功");
|
|
|
- this.sendWs({ agentid: 'admin' });
|
|
|
- };
|
|
|
- this.ws.onmessage = (res) => { //接收websocket消息
|
|
|
-
|
|
|
- let warningInfo = JSON.parse(res.data)
|
|
|
- if (warningInfo.property != "火警" && warningInfo.property != "故障") {
|
|
|
- that.index4Data.push(warningInfo)
|
|
|
- }
|
|
|
- if (num == '0') {
|
|
|
- if (that.initList.length > 2) {
|
|
|
- that.dataScrolling();
|
|
|
- num = 1
|
|
|
+ videoOpenAgin(code) {
|
|
|
+ let query = {
|
|
|
+ CMD: 1,
|
|
|
+ };
|
|
|
+ axios({
|
|
|
+ method: "post",
|
|
|
+ url: "/cgi-bin/demo2.cgi",
|
|
|
+ data: "queryJson:" + JSON.stringify(query),
|
|
|
+ headers: {},
|
|
|
+ }).then((result) => {
|
|
|
+ let data = result.data.RESULT.LIST;
|
|
|
+
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (data[i].DEVICE == code) {
|
|
|
+ if (data[i].ONAIR && !data[i].LIVEONLINE) {
|
|
|
+ this.loadVideoFn(
|
|
|
+ `https://iot.usky.cn/hls/${code}.m3u8`,
|
|
|
+ code
|
|
|
+ );
|
|
|
+ } else if (!data[i].ONAIR) {
|
|
|
+ if (data[i].ALIVEVALUE == 3) {
|
|
|
+ // this.$message.error(`设备在线,视频拉取中...`);
|
|
|
+ this.videoOpen(code, 1, 7);
|
|
|
+ } else if (data[i].ALIVEVALUE == 2) {
|
|
|
+ // this.$message.error(`设备重连中，请稍候...`);
|
|
|
+ // setTimeout(()=>{
|
|
|
+ // this.videoOpen(code)
|
|
|
+ // },10000)
|
|
|
+ } else {
|
|
|
+ // this.$message.error(`设备未连线，尝试连接。请稍候...`);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loadVideoFn(url, code) {
|
|
|
+ if (this.timeNum) {
|
|
|
+ clearInterval(this.timeNum);
|
|
|
+ this.timeNum = null;
|
|
|
+ } else {
|
|
|
+ this.timeNum = setInterval(() => {
|
|
|
+ this.videoOpenAgin(code);
|
|
|
+ }, 15000);
|
|
|
}
|
|
|
- }
|
|
|
- };
|
|
|
- this.ws.onclose = () => { //关闭websocket
|
|
|
- // 关闭 websocket
|
|
|
- //console.log("连接已关闭...");
|
|
|
- //断线重新连接
|
|
|
- setTimeout(() => {
|
|
|
- this.initWebSocket();
|
|
|
- }, 2000);
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 浏览器不支持 WebSocket
|
|
|
- alert("您的浏览器不支持 WebSocket!");
|
|
|
- }
|
|
|
+ if (Hls.isSupported()) {
|
|
|
+ this.hls = new Hls();
|
|
|
+ this.hls.loadSource(url);
|
|
|
+ this.hls.attachMedia(this.$refs.hlsVideo);
|
|
|
+ this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
|
+ this.$refs.hlsVideo.play();
|
|
|
+ });
|
|
|
+ this.hls.on(Hls.Events.ERROR, (event, data) => {
|
|
|
+ // console.log(event, data);
|
|
|
+ // 监听出错事件
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyHls: function () {
|
|
|
+ if (this.hls) {
|
|
|
+ this.hls.destroy();
|
|
|
+ this.hls = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ callFuncInThingJS(funcName, data, top_level, company_code) {
|
|
|
+ var iframe = document.getElementById("myIframe");
|
|
|
+ var msg = { data, top_level, company_code };
|
|
|
+ var message = {
|
|
|
+ funcName: funcName,
|
|
|
+ param: msg,
|
|
|
+ };
|
|
|
+ iframe.contentWindow.postMessage(message, "*");
|
|
|
+ },
|
|
|
|
|
|
+ getList() {
|
|
|
+ /* 设备工况 */
|
|
|
+ /* 饼图 */
|
|
|
+ index1Api().then((response) => {
|
|
|
+ this.index1Data = response.data;
|
|
|
+ this.loading1 = false;
|
|
|
+ });
|
|
|
+ /* 柱状图 */
|
|
|
+ index1Api({ isLine: 1 }).then((response) => {
|
|
|
+ this.index2Data = response.data;
|
|
|
+ this.loading2 = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 报警处理 */
|
|
|
+ /* 折线图图 */
|
|
|
+ index2Api({
|
|
|
+ startTime: getThisDateBeforMonth(),
|
|
|
+ endTime: YearMonthDate(),
|
|
|
+ }).then((response) => {
|
|
|
+ this.index3Data = response.data;
|
|
|
+ this.loading3 = false;
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 园区实时时间 */
|
|
|
+ this.time();
|
|
|
+ this.t = setTimeout(this.time, 1000);
|
|
|
+ index3Api({}).then((response) => {
|
|
|
+ this.index5Data = response.data;
|
|
|
+ this.loading4 = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ time() {
|
|
|
+ this.timeList = [];
|
|
|
+ clearTimeout(this.t); //清除定时器
|
|
|
+
|
|
|
+ let dt = new Date();
|
|
|
+ let h = this.Appendzero(dt.getHours()).toString().split(""); //获取时
|
|
|
+ let m = this.Appendzero(dt.getMinutes()).toString().split(""); //获取分
|
|
|
+ let times = h.concat(m);
|
|
|
+ let list = "";
|
|
|
+ for (let i = 0; i < times.length; i++) {
|
|
|
+ this.timeList.push(times[i]);
|
|
|
+ }
|
|
|
+ this.t = setTimeout(this.time, 1000); //设定定时器，循环运行
|
|
|
+ },
|
|
|
+ /* 个位数补零 */
|
|
|
+ Appendzero(obj) {
|
|
|
+ if (obj < 10) return "0" + obj;
|
|
|
+ else return obj;
|
|
|
+ },
|
|
|
+ getCollect() {
|
|
|
+ //隐患数据手机
|
|
|
+ collectTbAlarm({ type: 1 }).then((response) => {
|
|
|
+ this.collectList = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ yhTable() {
|
|
|
+ //隐患table
|
|
|
+ getTbAlarm({ type: 1, current: 1, size: 100 }).then((response) => {
|
|
|
+ if (response.data.records) {
|
|
|
+ this.index6Data = response.data.records;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initWebSocket() {
|
|
|
+ getTbAlarm({
|
|
|
+ current: 1,
|
|
|
+ size: 500,
|
|
|
+ type: 1,
|
|
|
+ startTime: YearMonthDate().split(" ")[0] + " 00:00:00",
|
|
|
+ endTime: YearMonthDate(),
|
|
|
+ }).then((res) => {
|
|
|
+ this.index4Data = res.data.records;
|
|
|
+ });
|
|
|
+ let that = this;
|
|
|
+ let num = 0;
|
|
|
+ if ("WebSocket" in window) {
|
|
|
+ this.ws = new WebSocket("ws://10.21.39.1:8084/dm/alarmPush");
|
|
|
+ // console.log(this.ws)
|
|
|
+ this.ws.onopen = () => {
|
|
|
+ // console.log("websocket连接成功");
|
|
|
+ this.sendWs({ agentid: "admin" });
|
|
|
+ };
|
|
|
+ this.ws.onmessage = (res) => {
|
|
|
+ //接收websocket消息
|
|
|
+
|
|
|
+ let warningInfo = JSON.parse(res.data);
|
|
|
+ if (
|
|
|
+ warningInfo.property != "火警" &&
|
|
|
+ warningInfo.property != "故障"
|
|
|
+ ) {
|
|
|
+ that.index4Data.push(warningInfo);
|
|
|
+ }
|
|
|
+ if (num == "0") {
|
|
|
+ if (that.initList.length > 2) {
|
|
|
+ that.dataScrolling();
|
|
|
+ num = 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.ws.onclose = () => {
|
|
|
+ //关闭websocket
|
|
|
+ // 关闭 websocket
|
|
|
+ //console.log("连接已关闭...");
|
|
|
+ //断线重新连接
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initWebSocket();
|
|
|
+ }, 2000);
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 浏览器不支持 WebSocket
|
|
|
+ alert("您的浏览器不支持 WebSocket!");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sendWs(val) {
|
|
|
+ if (this.ws && this.ws.readyState == 1) {
|
|
|
+ this.ws.send(JSON.stringify(val));
|
|
|
+ // console.log('发送成功')
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.sendWs(val);
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
- sendWs(val) {
|
|
|
- if (this.ws && this.ws.readyState == 1) {
|
|
|
- this.ws.send(JSON.stringify(val));
|
|
|
- // console.log('发送成功')
|
|
|
- } else {
|
|
|
- setTimeout(() => {
|
|
|
- this.sendWs(val);
|
|
|
- }, 100);
|
|
|
- }
|
|
|
+ destroyed() {
|
|
|
+ this.destroyHls();
|
|
|
},
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.app-container {
|
|
|
- width: calc(100% - 30px) !important;
|
|
|
- height: 91% !important;
|
|
|
+ width: calc(100% - 30px) !important;
|
|
|
+ height: 91% !important;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
- margin-bottom: 18px;
|
|
|
+ margin-bottom: 18px;
|
|
|
}
|
|
|
|
|
|
.clearfix:before,
|
|
|
.clearfix:after {
|
|
|
- display: table;
|
|
|
- content: "";
|
|
|
+ display: table;
|
|
|
+ content: "";
|
|
|
}
|
|
|
|
|
|
.clearfix:after {
|
|
|
- clear: both
|
|
|
+ clear: both;
|
|
|
}
|
|
|
|
|
|
.app-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 50px;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
#main {
|
|
|
-
|
|
|
- // height:100%;
|
|
|
- .box-card {
|
|
|
- .h2 {
|
|
|
- text-align: center;
|
|
|
- margin: 0 auto;
|
|
|
- display: block;
|
|
|
- font-size: 1.2vw;
|
|
|
- background-image: -webkit-linear-gradient(bottom, #00adce, #000);
|
|
|
- -webkit-background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .card_left {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .card_left1 {
|
|
|
- height: 48vh;
|
|
|
-
|
|
|
- .contain {
|
|
|
- &>div {
|
|
|
- display: inline-block;
|
|
|
+ // height:100%;
|
|
|
+ .box-card {
|
|
|
+ .h2 {
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ font-size: 1.2vw;
|
|
|
+ background-image: -webkit-linear-gradient(bottom, #00adce, #000);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .num {
|
|
|
- font-size: 30px;
|
|
|
- margin: 0 16px;
|
|
|
- position: absolute;
|
|
|
- top: 31%;
|
|
|
- width: 100%;
|
|
|
- margin-left: -10%;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
+ .card_left {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .card_left1 {
|
|
|
+ height: 48vh;
|
|
|
+
|
|
|
+ .contain {
|
|
|
+ & > div {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 30px;
|
|
|
+ margin: 0 16px;
|
|
|
+ position: absolute;
|
|
|
+ top: 31%;
|
|
|
+ width: 100%;
|
|
|
+ margin-left: -10%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num_txt {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000;
|
|
|
+ opacity: 0.65;
|
|
|
+ position: absolute;
|
|
|
+ top: 43%;
|
|
|
+ width: 100%;
|
|
|
+ margin-left: -10%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .num_txt {
|
|
|
- font-size: 12px;
|
|
|
- color: #000;
|
|
|
- opacity: 0.65;
|
|
|
- position: absolute;
|
|
|
- top: 43%;
|
|
|
- width: 100%;
|
|
|
- margin-left: -10%;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
+ .card_left2 {
|
|
|
+ height: calc(100vh - 48vh - 120px);
|
|
|
+
|
|
|
+ .contain {
|
|
|
+ margin: 20px auto 0;
|
|
|
+ text-align: left;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .box-card {
|
|
|
+ margin: 30px 0;
|
|
|
+ padding: 40px 0;
|
|
|
+ flex: 2;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 30%;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+
|
|
|
+ .tjimg {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 60%;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 10%;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 26px;
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num_txt {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 14px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-card:nth-child(2) {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .card_left2 {
|
|
|
- height: calc(100vh - 48vh - 120px);
|
|
|
-
|
|
|
- .contain {
|
|
|
- margin: 20px auto 0;
|
|
|
- text-align: left;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .box-card {
|
|
|
- margin: 30px 0;
|
|
|
- padding: 40px 0;
|
|
|
- flex: 2;
|
|
|
-
|
|
|
- .left {
|
|
|
- width: 30%;
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
-
|
|
|
- .tjimg {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- width: 60%;
|
|
|
- text-align: left;
|
|
|
- margin-left: 10%;
|
|
|
-
|
|
|
- .num {
|
|
|
- font-size: 26px;
|
|
|
- margin-top: 5px;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- }
|
|
|
+ .card_center {
|
|
|
+ .card_center1 {
|
|
|
+ height: 48vh;
|
|
|
|
|
|
- .num_txt {
|
|
|
- font-size: 14px;
|
|
|
- margin-top: 10px;
|
|
|
- color: #333;
|
|
|
- margin-right: 14px;
|
|
|
- width: 100%;
|
|
|
+ .el-card__body {
|
|
|
+ height: 100% !important;
|
|
|
}
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .box-card:nth-child(2) {
|
|
|
- margin-left: 20px;
|
|
|
+ .card_center2 {
|
|
|
+ height: calc(100vh - 48vh - 120px);
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .card_center {
|
|
|
- .card_center1 {
|
|
|
- height: 48vh;
|
|
|
-
|
|
|
- .el-card__body {
|
|
|
- height: 100% !important
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .card_center2 {
|
|
|
- height: calc(100vh - 48vh - 120px);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .card_right {
|
|
|
- .card_right1 {
|
|
|
- height: calc(35.5vh - 0px);
|
|
|
-
|
|
|
- #total-squares {
|
|
|
- margin: 2vh auto 0;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .total-square {
|
|
|
- display: inline-block;
|
|
|
- width: 2.5vw;
|
|
|
- height: 2.5vw;
|
|
|
- line-height: 2.5vw;
|
|
|
- border: 1px solid rgba(0, 212, 233, .4);
|
|
|
- font-size: 1.6vw;
|
|
|
- color: #000;
|
|
|
- margin-left: 1vw;
|
|
|
+ .card_right {
|
|
|
+ .card_right1 {
|
|
|
+ height: calc(35.5vh - 0px);
|
|
|
+
|
|
|
+ #total-squares {
|
|
|
+ margin: 2vh auto 0;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .total-square {
|
|
|
+ display: inline-block;
|
|
|
+ width: 2.5vw;
|
|
|
+ height: 2.5vw;
|
|
|
+ line-height: 2.5vw;
|
|
|
+ border: 1px solid rgba(0, 212, 233, 0.4);
|
|
|
+ font-size: 1.6vw;
|
|
|
+ color: #000;
|
|
|
+ margin-left: 1vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .card_right2 {
|
|
|
- height: calc(100vh - 35.5vh - 120px);
|
|
|
+ .card_right2 {
|
|
|
+ height: calc(100vh - 35.5vh - 120px);
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.title-btn {
|
|
|
- width: 40%;
|
|
|
- margin: 2vh 30% 0vh;
|
|
|
- line-height: 2.8vh;
|
|
|
- color: #fff;
|
|
|
- background: rgba(0, 130, 255, .4);
|
|
|
- border: 2px solid rgba(0, 130, 255, .4);
|
|
|
- border-radius: 10px;
|
|
|
- text-align: center;
|
|
|
- font-size: 1vw;
|
|
|
+ width: 40%;
|
|
|
+ margin: 2vh 30% 0vh;
|
|
|
+ line-height: 2.8vh;
|
|
|
+ color: #fff;
|
|
|
+ background: rgba(0, 130, 255, 0.4);
|
|
|
+ border: 2px solid rgba(0, 130, 255, 0.4);
|
|
|
+ border-radius: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 1vw;
|
|
|
}
|
|
|
|
|
|
#pop {
|
|
|
- width: 90%;
|
|
|
- margin-left: 0%;
|
|
|
- display: block;
|
|
|
- margin-top: 0px;
|
|
|
+ width: 90%;
|
|
|
+ margin-left: 0%;
|
|
|
+ display: block;
|
|
|
+ margin-top: 0px;
|
|
|
}
|
|
|
|
|
|
#pop li {
|
|
|
- width: 45%;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid #ccc;
|
|
|
- display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
|
|
|
#pop li {
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-top: 2vh;
|
|
|
- padding: 0.5vh 0;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 2vh;
|
|
|
+ padding: 0.5vh 0;
|
|
|
}
|
|
|
|
|
|
#pop li:nth-child(2n) {
|
|
|
- margin-left: 10%;
|
|
|
+ margin-left: 10%;
|
|
|
}
|
|
|
|
|
|
.num-huan {
|
|
|
- font-size: 2vh;
|
|
|
- margin-top: 4px;
|
|
|
+ font-size: 2vh;
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
|
|
|
.des-huan {
|
|
|
- max-width: 100%;
|
|
|
- font-size: 1.5vh;
|
|
|
- color: #000;
|
|
|
- margin-top: -15px;
|
|
|
-
|
|
|
+ max-width: 100%;
|
|
|
+ font-size: 1.5vh;
|
|
|
+ color: #000;
|
|
|
+ margin-top: -15px;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.unprocess {
|
|
|
- color: #FF5801
|
|
|
+ color: #ff5801;
|
|
|
}
|
|
|
|
|
|
.processed {
|
|
|
- color: #37FF01;
|
|
|
+ color: #37ff01;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.index-dialog {
|
|
|
- .el-row {
|
|
|
- // height:100%
|
|
|
- }
|
|
|
-
|
|
|
- h3 {
|
|
|
- font-weight: 700
|
|
|
- }
|
|
|
+ .el-row {
|
|
|
+ // height:100%
|
|
|
+ }
|
|
|
|
|
|
+ h3 {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.store-container {
|
|
|
- border: 1px solid red;
|
|
|
- height: 700px;
|
|
|
+ border: 1px solid red;
|
|
|
+ height: 700px;
|
|
|
}
|
|
|
|
|
|
-.now-status {}
|
|
|
+.now-status {
|
|
|
+}
|
|
|
|
|
|
.now-status .tit {
|
|
|
- color: #337ab7
|
|
|
+ color: #337ab7;
|
|
|
}
|
|
|
|
|
|
.now-status p {
|
|
|
- font-size: 16px;
|
|
|
- margin: 10px 0
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
.project-status {
|
|
|
- p {
|
|
|
- font-size: 16px;
|
|
|
- margin: 20px 0
|
|
|
- }
|
|
|
-
|
|
|
- .tit {
|
|
|
- color: #337ab7
|
|
|
- }
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
|
|
|
+ .tit {
|
|
|
+ color: #337ab7;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
-
|
wangtao
