jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

优化页面，离线展示灰色，在线展示蓝色。 

1分钟一次实时更新设备状态
master
yangzongjia 2 years ago
parent
4d76f71c62
commit
10cf508616
2 changed files with 28 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      src/views/monitor/videos/index.vue
  2. 4
      src/views/shebeitaizhang/shebeitaizhangList.vue

55
src/views/monitor/videos/index.vue
View File

@ -3,7 +3,6 @@
<div v-if="viewState == 1">
<!-- <button-bar view-title="视频中心" ref="btnbar" :btndisabled="btndisabled" @btnhandle="btnHandle"/> -->
<div class="main-content">
<div class="shipinlisttop">
<el-form ref="" :inline="true" label-width="110px" class="tab-header">
<el-form-item label="选择仓库">
@ -22,14 +21,13 @@
</el-select>
</el-form-item> -->
</el-form>
<!-- 11 -->
</div>
<div class="shipinscons">
<div class="shipinscon">
<div class="shipinstu">
<img src="/image/cangkutu.png" />
<!-- 111入侵报警 -->
<!-- 入侵报警 -->
<!-- <div class="ruqinbaojingcss" style="z-index: 10;" v-if="showRuqinbaojing">
<div class="myiconfont bluezibg jingicon ruqin_zhengchang1" v-if="showRuqinbaojing_zhengchang" @click="openshipinRuqinbaojing()">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang2" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
@ -42,10 +40,8 @@
<div class="myiconfont bluezibg jingicon ruqin_zhengchang9" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang10" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont bluezibg jingicon ruqin_zhengchang11" v-if="showRuqinbaojing_zhengchang">&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian1" v-if="showRuqinbaojing_lixian">&#xe608;</div>
<div class="myiconfont huizibg jingicon ruqin_lixian2" v-if="showRuqinbaojing_lixian">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing1" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing2" v-if="showRuqinbaojing_baojing">&#xe608;</div>
<div class="myiconfont redzibg jingicon ruqin_baojing3" v-if="showRuqinbaojing_baojing">&#xe608;</div>
@ -60,35 +56,31 @@
<!-- 视频监控 -->
<div class="ruqinbaojingcss" v-if="showShipinjiankong" v-for="(item, index) in zc_list">
<!-- 灰色的 离线 -->
<!-- <div class="myiconfont huizibg jingicon shipin_lixian1 blockDiv"
v-if="showShipinjiankong_lixian && item.status == '0'">&#xe644;
<!-- <div class="myiconfont huizibg jingicon shipin_lixian1" v-if="showShipinjiankong_lixian && item.status == '0'">&#xe644;</div> -->
<!-- 红色的 报警 -->
<!-- <div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div> -->
<!-- 蓝色的 在线 && item.status == '1' -->
<div class="shipincss Shipin_yingzi blockDiv" v-if="showShipinjiankong_zhengchang && item.status == '1'">
<div class="jingicon shipin_zhengchang" :style="{ top: item.topPosition, left: item.leftPosition }"
v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter"
@mouseleave="leave" @click.stop="openshipinShipinjiankong(index)"></div>
@mouseleave="leave" @click.stop="openshipinShipinjiankong(index)">&#xe644;</div>
<div class="seencons shipin_out noneDiv2" v-if="active == index">
<p @click="getVedioPcLive(item.id)">实时视频</p>
<p @click="getVedioPcRec(item.id)">回放视频</p>
</div>
<div class="seenconsc shipin_out noneDiv">
<p>设备名称：123123</p>
<p>设备名称：{{ item.name }}</p>
<p>设备编号：{{ item.channelNo }}</p>
<p>设备通道：{{ item.channelNo }}</p>
</div>
</div>
</div> -->
<!-- 红色的 报警 -->
<!-- <div class="myiconfont redzibg jingicon shipin_baojing1" v-if="showShipinjiankong_baojing">&#xe644;</div> -->
<!-- 蓝色的 在线 && item.status == '1' -->
<div class="shipincss Shipin_yingzi blockDiv" v-if="showShipinjiankong_zhengchang">
</div>
<!-- 灰色的 离线 && item.status == '0' -->
<div class="shipincss Shipin_yingzi blockDiv" v-if="showShipinjiankong_lixian && item.status == '0'">
<div class="jingicon shipin_zhengchang" :style="{ top: item.topPosition, left: item.leftPosition }"
v-if="showShipinjiankong_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showShipinjiankong_zhengchang" @mouseover="enter"
@mouseleave="leave" @click.stop="openshipinShipinjiankong(index)">&#xe644;</div>
<div class="seencons shipin_out noneDiv2" v-if="active == index">
<p @click="getVedioPcLive(item.id)">实时视频</p>
<p @click="getVedioPcRec(item.id)">回放视频</p>
</div>
v-if="showShipinjiankong_lixian">
<div class="myiconfont jingicon bluezibg huizibg" v-if="showShipinjiankong_lixian" @mouseover="enter"
@mouseleave="leave">&#xe644;</div>
<div class="seenconsc shipin_out noneDiv">
<p>设备名称：{{ item.name }}</p>
<p>设备通道：{{ item.channelNo }}</p>
@ -120,12 +112,19 @@
<p @click="toMore()">开门</p>
</div>
</div> -->
<!-- 333end -->
<!--444门电子围栏-->
<!--电子围栏-->
<div class="ruqinbaojingcss" v-if="showDianziweilan" v-for="(item, index) in dzwl_list">
<!-- <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" v-if="showDianziweilan_lixian">&#xe6b8;</div>
<div class="myiconfont redzibg jingicon Dianziweilan_baojing1" v-if="showDianziweilan_baojing">&#xe6b8;</div> -->
<div class="Dianziweilancss Dianziweilan_yingzi" v-if="showDianziweilan_zhengchang">
<!-- <div class="myiconfont huizibg jingicon Dianziweilan_lixian1" v-if="showDianziweilan_lixian">&#xe6b8;</div> -->
<!-- <div class="myiconfont redzibg jingicon Dianziweilan_baojing1" v-if="showDianziweilan_baojing">&#xe6b8;</div> -->
<!-- 灰色的 离线 && item.status == '0' -->
<div class="Dianziweilancss Dianziweilan_yingzi" v-if="showDianziweilan_lixian && item.status == '0'">
<div class="jingicon Dianziweilan_zhengchang1"
:style="{ top: item.topPosition, left: item.leftPosition }" v-if="showDianziweilan_lixian">
<div class="myiconfont jingicon bluezibg huizibg" v-if="showDianziweilan_lixian">&#xe6b8;</div>
</div>
</div>
<!-- 蓝色的 在线 && item.status == '1' -->
<div class="Dianziweilancss Dianziweilan_yingzi" v-if="showDianziweilan_zhengchang && item.status == '1'">
<div class="jingicon Dianziweilan_zhengchang1"
:style="{ top: item.topPosition, left: item.leftPosition }" v-if="showDianziweilan_zhengchang">
<div class="myiconfont jingicon bluezibg" v-if="showDianziweilan_zhengchang"
@ -138,7 +137,6 @@
</div>
</div>
</div>
<!-- 444end -->
</div>
</div>
<div class="sbottombars">
@ -186,7 +184,6 @@
</div>
</div>
</div>
<!-- 列表结束 -->
</div>

4
src/views/shebeitaizhang/shebeitaizhangList.vue
View File

@ -150,7 +150,7 @@ import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuanb'
// 1.1完好率饼图
const wanhao_Chart = {
color: ['#30e9ff', '#d9d9d9'],
color: ['#d9d9d9', '#30e9ff'],
Data: {
seriesData: [
{ value: 75, name: '完好' },
@ -375,8 +375,8 @@ export default {
var bad = 100 - item.maintenanceCount;
var obj = { name: '完好', value: item.maintenanceCount }
var obj1 = { name: '不完好', value: bad }
this.wanhao_Chart.Data.seriesData.push(obj)
this.wanhao_Chart.Data.seriesData.push(obj1)
this.wanhao_Chart.Data.seriesData.push(obj)
}
// 1完好 2维修 3损坏

Write Preview
Loading…
Cancel
Save