|
@@ -1,161 +1,261 @@
|
|
|
<template name="warndata">
|
|
|
- <view>
|
|
|
- <scroll-view>
|
|
|
- <!-- 轮播 -->
|
|
|
- <swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true"
|
|
|
- :autoplay="true" interval="5000" duration="500" :style="[{animation: 'show 0.2s 1'}]">
|
|
|
- <swiper-item v-for="(item,index) in swiperList" :key="index">
|
|
|
- <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
|
|
- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
-
|
|
|
- <!-- 常用服务 -->
|
|
|
- <view class="cu-bar bg-white solid-bottom" :style="[{animation: 'show 0.5s 1'}]">
|
|
|
- <view class="action">
|
|
|
- <text class='cuIcon-title text-blue'></text>常用服务
|
|
|
+ <view class="container">
|
|
|
+ <u-navbar
|
|
|
+ title="预警分析"
|
|
|
+ :safeAreaInsetTop="false"
|
|
|
+ style="margin-top: 30px"
|
|
|
+ leftIcon=""
|
|
|
+ >
|
|
|
+ </u-navbar>
|
|
|
+ <view class="main">
|
|
|
+ <u-collapse @change="change" @close="close" @open="open">
|
|
|
+ <u-collapse-item
|
|
|
+ title="通风监测预警"
|
|
|
+ name="wind"
|
|
|
+ class="text-style flcard"
|
|
|
+ >
|
|
|
+ <view class="">
|
|
|
+ <view class="datacard demo-layout bg-purple-light">
|
|
|
+ <view style="margin-top: 10rpx">
|
|
|
+ <text class="text-style">{{ windData.zongjinfeng }}</text>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 10rpx">总进风量(m³/min):</view>
|
|
|
+ </view>
|
|
|
+ <view class="datacard demo-layout bg-purple-light">
|
|
|
+ <view style="margin-top: 10rpx">
|
|
|
+ <text class="text-style">{{ windData.zonghuifeng }}</text>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 10rpx">总回风量(m³/min):</view>
|
|
|
+ </view>
|
|
|
+ <view class="datacard demo-layout bg-purple-light">
|
|
|
+ <view style="margin-top: 10rpx">
|
|
|
+ <text class="text-style">{{
|
|
|
+ windData.sysdata.xufengliang
|
|
|
+ }}</text>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 10rpx">总需风量(m³/min):</view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="datacard1 demo-layout bg-purple-light">
|
|
|
+ <view style="margin-top: 10rpx">
|
|
|
+ <text class="text-style">aaaaaaaaaaaaa</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="cu-list grid col-4 text-sm">
|
|
|
- <view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]" v-for="(item,index) in usList" :key="index" @tap="goPage(item.page)">
|
|
|
- <view class="padding text-center">
|
|
|
- <image :src="item.icon" style="width:28px;height:28px;">
|
|
|
- <view class="cu-tag badge margin-top-sm" style="margin-left:1.2em" v-if="getTtemDotInfo(item)">
|
|
|
- <block v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</block>
|
|
|
- </view>
|
|
|
- </image>
|
|
|
- <view class="margin-top-xs">{{item.title}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 其他服务 -->
|
|
|
- <view class="cu-bar bg-white solid-bottom margin-top" :style="[{animation: 'show 0.6s 1'}]">
|
|
|
- <view class="action">
|
|
|
- <text class='cuIcon-title text-yellow'></text>其他服务
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="cu-list grid col-4 text-sm">
|
|
|
- <view class="cu-item animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
|
|
|
- <view class="padding text-center">
|
|
|
- <image :src="item.icon" style="width:28px;height:28px;"/>
|
|
|
- <view class="margin-top-xs">{{item.title}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="cu-tabbar-height margin-top"></view>
|
|
|
- </view>
|
|
|
+ <view style="margin-top: 10rpx">测试:</view>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ <u-collapse-item
|
|
|
+ title="设备监测预警"
|
|
|
+ name="device"
|
|
|
+ class="text-style flcard"
|
|
|
+ >
|
|
|
+ <view class="demo-layout bg-purple-light">
|
|
|
+ <view style="margin-top: 10rpx">
|
|
|
+ <view class="deviceCard">
|
|
|
+ <view
|
|
|
+ class="item-container"
|
|
|
+ v-for="(item, index) in devicekindData"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <view class="item">
|
|
|
+ <text style="margin-right: 10px">{{ item.name }}</text>
|
|
|
+ <text>{{ item.status }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ <u-collapse-item
|
|
|
+ title="火灾监测预警"
|
|
|
+ name="fire"
|
|
|
+ class="text-style flcard"
|
|
|
+ >
|
|
|
+ <view class="firecontainer">
|
|
|
+ <view class="title">
|
|
|
+ <span class="firetext">外因火灾</span>
|
|
|
+ </view>
|
|
|
+ <view class="firecard"> </view>
|
|
|
+ </view>
|
|
|
+ <view class="firecontainer">
|
|
|
+ <view class="title">
|
|
|
+ <span class="firetext">内因火灾</span>
|
|
|
+ </view>
|
|
|
+ <view class="firecard"> </view>
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ <u-collapse-item
|
|
|
+ title="粉尘监测预警"
|
|
|
+ name="dust"
|
|
|
+ class="text-style flcard"
|
|
|
+ >
|
|
|
+ <text class="u-collapse-content"
|
|
|
+ >众多的贴心小工具,是您开发过程中召之即来的利器,让您飞镖在手,百步穿杨</text
|
|
|
+ >
|
|
|
+ </u-collapse-item>
|
|
|
+ <u-collapse-item
|
|
|
+ title="瓦斯监测预警"
|
|
|
+ name="gas"
|
|
|
+ class="text-style flcard"
|
|
|
+ >
|
|
|
+ <view class="firecontainer">
|
|
|
+ <view class="title">
|
|
|
+ <span class="firetext">{{ gasData.devices[0].systemname }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="firecard"> </view>
|
|
|
+ </view>
|
|
|
+ <view class="firecontainer">
|
|
|
+ <view class="title">
|
|
|
+ <span class="firetext">{{ gasData.devices[1].systemname }}</span>
|
|
|
+ </view>
|
|
|
+ <view class="firecard"> </view>
|
|
|
+ </view>
|
|
|
+ </u-collapse-item>
|
|
|
+ </u-collapse>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { us,os } from '@/common/util/work.js'
|
|
|
- import socket from '@/common/js-sdk/socket/socket.js'
|
|
|
- export default {
|
|
|
- name: 'home',
|
|
|
- props:{
|
|
|
- cur:String,
|
|
|
- },
|
|
|
- watch: {
|
|
|
- cur: {
|
|
|
- immediate: true,
|
|
|
- handler:function(val,oldVal){
|
|
|
- console.log('cur',val,oldVal)
|
|
|
- this.initMenu()
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- swiperList: [
|
|
|
- {id:1,type: 'image',url: '/static/banner/banner1.png', link: ''},
|
|
|
- {id:2,type: 'image',url: '/static/banner/banner2.jpg', link: ''},
|
|
|
- {id:3,type: 'image',url: '/static/banner/banner3.jpg', link: ''},
|
|
|
- {id:4,type: 'image',url: '/static/banner/banner4.jpg', link: ''},
|
|
|
- ],
|
|
|
- middleApps: [
|
|
|
- {icon: 'line2_icon1.png', title: '审批', 'text': '个人审批'},
|
|
|
- {icon: 'line2_icon2.png', title: '审批稿', 'text': '审批草稿箱'},
|
|
|
- ],
|
|
|
- usList:us.data,
|
|
|
- osList:os.data,
|
|
|
- msgCount:0,
|
|
|
- dot:{
|
|
|
- mailHome:false
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initMenu(){
|
|
|
- console.log("-----------home------------")
|
|
|
- this.onSocketOpen()
|
|
|
- this.onSocketReceive()
|
|
|
- this.loadCount(0);
|
|
|
- },
|
|
|
- goPage(page){
|
|
|
- if(!page){
|
|
|
- return false;
|
|
|
- }
|
|
|
- if(page==='annotationList'){
|
|
|
- this.msgCount = 0
|
|
|
- }
|
|
|
- this.dot[page]=false
|
|
|
- this.$Router.push({name: page})
|
|
|
- },
|
|
|
- // 启动webSocket
|
|
|
- onSocketOpen() {
|
|
|
- socket.init('websocket');
|
|
|
- },
|
|
|
- onSocketReceive() {
|
|
|
- var _this=this
|
|
|
- socket.acceptMessage = function(res){
|
|
|
- // console.log("页面收到的消息", res);
|
|
|
- if(res.cmd == "topic"){
|
|
|
- //系统通知
|
|
|
- _this.loadCount('1')
|
|
|
- }else if(res.cmd == "user"){
|
|
|
- //用户消息
|
|
|
- _this.loadCount('2')
|
|
|
- } else if(res.cmd == 'email'){
|
|
|
- //邮件消息
|
|
|
- _this.loadEmailCount()
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- loadCount(flag){
|
|
|
- console.log("loadCount::flag",flag)
|
|
|
- let url = '/sys/annountCement/listByUser';
|
|
|
- this.$http.get(url).then(res=>{
|
|
|
- console.log("res::",res)
|
|
|
- if(res.data.success){
|
|
|
- let msg1Count = res.data.result.anntMsgTotal;
|
|
|
- let msg2Count = res.data.result.sysMsgTotal;
|
|
|
- this.msgCount = msg1Count + msg2Count
|
|
|
- console.log("this.msgCount",this.msgCount)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- loadEmailCount(){
|
|
|
- this.dot.mailHome = true
|
|
|
- },
|
|
|
- getTtemDotInfo(item){
|
|
|
- if(item.page==='annotationList' && this.msgCount>0){
|
|
|
- return this.msgCount
|
|
|
- }
|
|
|
- return '';
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import { log } from "../../plugin/uni-simple-router/helpers/warn";
|
|
|
+import api from "@/api/api";
|
|
|
+export default {
|
|
|
+ name: "warndata",
|
|
|
+ props: {
|
|
|
+ cur: String,
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ windData: [],
|
|
|
+ devicekindData: [],
|
|
|
+ fireData: [],
|
|
|
+ gasData: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getWranInfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //获取预警信息
|
|
|
+ getWranInfo() {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ api
|
|
|
+ .getWarnInfo()
|
|
|
+ .then((response) => {
|
|
|
+ if (response.data.code == 200) {
|
|
|
+ this.windData = response.data.result.ventInfo;
|
|
|
+ this.devicekindData = response.data.result.info.devicekindInfo;
|
|
|
+ this.fireData = response.data.result.info.sysInfo.fireS;
|
|
|
+ this.gasData = response.data.result.info.sysInfo.gasS;
|
|
|
+ } else {
|
|
|
+ reject(response);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log("catch===>response", response);
|
|
|
+ reject(error);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .cu-list.grid>.cu-item {
|
|
|
- padding: 0px 0px;
|
|
|
- }
|
|
|
- .line2-icon {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- }
|
|
|
-
|
|
|
+>>> .u-navbar--fixed {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ margin-top: 100rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+.text-style {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.flcard {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-bottom: 5rpx;
|
|
|
+}
|
|
|
+.datacard {
|
|
|
+ width: 32.5%;
|
|
|
+ margin: 1px;
|
|
|
+ float: left;
|
|
|
+ height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: url(/static/model/windM3.png),
|
|
|
+ linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+}
|
|
|
+.datacard1 {
|
|
|
+ width: 100%;
|
|
|
+ margin: 2px;
|
|
|
+ float: left;
|
|
|
+ height: 200rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+}
|
|
|
+.title {
|
|
|
+ width: 100%;
|
|
|
+ height: 50rpx;
|
|
|
+ background: url(/static/warndata/title.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex; /* 将父级元素设置为 Flex 容器 */
|
|
|
+ align-items: center; /* 垂直居中子元素 */
|
|
|
+}
|
|
|
+.firecard {
|
|
|
+ width: 100%;
|
|
|
+ margin: 1px;
|
|
|
+ float: left;
|
|
|
+ height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+ background-repeat: repeat;
|
|
|
+}
|
|
|
+.deviceCard {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+}
|
|
|
+
|
|
|
+.item-container {
|
|
|
+ height: 100px;
|
|
|
+ background-image: url(/static/warndata/window.png);
|
|
|
+ background-size: 100% 60%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+.item {
|
|
|
+ margin-left: 70px;
|
|
|
+ margin-top: 36px;
|
|
|
+}
|
|
|
+.firetext {
|
|
|
+ margin: 20px;
|
|
|
+}
|
|
|
+.text-style {
|
|
|
+ color: #3787fe;
|
|
|
+ font-size: large;
|
|
|
+}
|
|
|
+.firecontainer {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
</style>
|