<template>
|
<view class="app">
|
<cu-custom bgColor="bg-gradual-blue" :isBack="false" :isRight="true" @rightclick="rclick">
|
<block slot="content">报警</block>
|
|
</cu-custom>
|
<u-notice-bar text="12:20:10 1车间GM001机台电机过流(电气)报警" mode="closable"></u-notice-bar>
|
|
<!--弹出层start-->
|
<view style="width: 100%; position: absolute;z-index: 1000;top:300rpx;padding: 20rpx;" @touchmove.prevent >
|
<dropdown-menu v-show="filterMenuShow"@reset='resetMenu' @change='changeMenu' :list='equList' ref='dropdownMenuRef'/>
|
|
</view>
|
<view class="lock-page dropdown-mask" @touchmove.prevent @click.stop="1==1" v-if="filterMenuShow"></view>
|
|
<!--弹出层end-->
|
|
<view class="card-box dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">总览</view>
|
</view>
|
<view>
|
<text class="text-gray text-sm">2024-10-01 至 2024-12-01</text>
|
</view>
|
|
</view>
|
|
</view>
|
<view class="flex flex-direction padding-xs">
|
<view class="flex">
|
<view class="flex-sub flex flex-direction">
|
<text class="text-df">报警总数</text>
|
<text class="text-bold text-sl margin-top-xs text-red margin-top-sm">10
|
<text class="text-gray text-sm margin-left-xs">次</text></text>
|
|
</view>
|
<view class="flex-twice flex flex-direction justify-between">
|
<view class="flex-sub flex">
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">报警信息</text>
|
<text class="text-black">
|
<text class="text-black">机械故障:</text>
|
<text class="margin-lr-xs text-orange">0</text>
|
<text class="text-gray text-xs">次</text>
|
</text>
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-white text-xs">电气故障</text>
|
<text class="text-black">
|
<text class="text-black">电气故障:</text>
|
<text class="margin-lr-xs text-orange">1</text>
|
<text class="text-gray text-xs">次</text>
|
</text>
|
|
</view>
|
|
</view>
|
<view class="flex-sub flex margin-top-sm">
|
<view class="flex flex-direction flex-sub">
|
<text class="text-gray text-xs">报警信息</text>
|
<text>
|
<text class="text-black">通信故障:</text>
|
<text class="margin-lr-xs text-orange">4</text>
|
<text class="text-gray text-xs">次</text>
|
</text>
|
|
</view>
|
<view class="flex flex-direction flex-sub">
|
<text class="text-white text-xs">其他故障</text>
|
<text class="text-cyan">
|
<text class="text-black">其他故障:</text>
|
<text class="margin-lr-xs text-orange">5</text>
|
<text class="text-gray text-xs">次</text>
|
</text>
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
<view class="margin-top">
|
<u-scroll-list>
|
|
</u-scroll-list>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<u-sticky>
|
<view class="tab-box card-box top dynamic shadow">
|
<z-tabs ref="tabs" :active-style="{'font-size':'30rpx','font-weight':'bold'}" :current="tabCurrent"
|
:list="tabList" @change="tabsChange">
|
<!-- 自定义右侧插槽 -->
|
<!-- <template v-slot:right>
|
<u-icon name="setting" ></u-icon>
|
</template> -->
|
</z-tabs>
|
</view>
|
</u-sticky>
|
<!-- 可通过设置bar-animate-mode="worm"开启毛毛虫模式-->
|
<swiper :style="'height:' + swiperItemHeight[tabCurrent] + 'rpx;'" :current="tabCurrent"
|
@transition="swiperTransition" @animationfinish="swiperAnimationfinish">
|
<swiper-item :key="0">
|
<view :style="'height:' + swiperItemHeight[0] + 'rpx;'">
|
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">设备 </view>
|
</view>
|
<view>
|
<!-- <text class="text-blue text-sm">更多></text> -->
|
</view>
|
|
</view>
|
|
</view>
|
<view class="borderTop">
|
<image style="width: 100%;border-radius: 20rpx; " src="../../static/image/pic_gz.jpg"
|
mode="aspectFit"></image>
|
</view>
|
|
</view>
|
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">实时报警 </view>
|
</view>
|
<view>
|
<!-- <text class="text-blue text-sm">更多></text> -->
|
</view>
|
|
</view>
|
|
</view>
|
<view class="borderTop" v-for="i in 10">
|
<view style="height: 180rpx;display: flex;align-items: center;">
|
<view>
|
<image style="width: 80rpx;height: 80rpx;margin:20rpx;border-radius: 20rpx; "
|
src="../../static/image/pic_gz.jpg"></image>
|
</view>
|
<view
|
style="display: flex;flex: 1;flex-direction: column; justify-content: space-between; ;height: 100%;padding: 20rpx;">
|
<view class="text-bold">
|
滚筒电机过流报警
|
</view>
|
<view class="text-gray text-sm">
|
设备:1号干燥机
|
</view>
|
|
<view class="text-gray text-sm">
|
描述:同济堂1号滚筒电机过流报警，需要xxxx处理，东方航空的恢复很快的回复
|
</view>
|
|
</view>
|
<view style="width: 100rpx;">{{i}}</view>
|
|
</view>
|
</view>
|
|
</view>
|
|
<view class="card-box bot dynamic shadow">
|
<view style="height: 20rpx;"></view>
|
</view>
|
</view>
|
</swiper-item>
|
<swiper-item :key="1">
|
<view :style="'height:' + swiperItemHeight[1] + 'rpx;'">
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">最近报警</view>
|
</view>
|
<view>
|
<text class="text-blue text-sm">更多></text>
|
</view>
|
|
</view>
|
|
</view>
|
|
|
<view class="borderTop">
|
<view class="h-table">
|
<view class="h-tr h-tr-2 ">
|
<view class="h-td">车间</view>
|
<view class="h-td">机台</view>
|
<view class="h-td">时间</view>
|
<view class="h-td">类型</view>
|
<view class="h-td">等级</view>
|
|
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">001</view>
|
<view class="h-td">GM001</view>
|
<view class="h-td">12:00:00</view>
|
<view class="h-td">机械</view>
|
<view class="h-td">高</view>
|
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">001</view>
|
<view class="h-td">GM001</view>
|
<view class="h-td">12:00:00</view>
|
<view class="h-td">通信</view>
|
<view class="h-td">中</view>
|
|
</view>
|
<view class="h-tr h-tr-2">
|
<view class="h-td">001</view>
|
<view class="h-td">GM001</view>
|
<view class="h-td">12:00:00</view>
|
<view class="h-td">电气</view>
|
<view class="h-td">高</view>
|
|
</view>
|
</view>
|
|
</view>
|
|
|
</view>
|
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">报警统计</view>
|
</view>
|
<view>
|
<text class="text-gray text-sm"></text>
|
</view>
|
|
</view>
|
|
</view>
|
|
|
<view class="chartsMain">
|
<qiun-data-charts type="mount" :opts="opts" :animation="true" :chartData="Mount" />
|
</view>
|
</view>
|
|
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">报警对比</view>
|
</view>
|
<view>
|
<text class="text-gray text-sm"></text>
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="chartsMain">
|
|
<qiun-data-charts type="pie" :opts="optsPie" :chartData="PieA" />
|
|
</view>
|
</view>
|
|
|
|
<view class="card-box center dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">报警频率</view>
|
</view>
|
<view>
|
<text class="text-gray text-sm"></text>
|
</view>
|
|
</view>
|
|
</view>
|
|
|
<view class="chartsMain">
|
<!-- <qiun-data-charts type="mount" :opts="{extra:{mount:{type:'mount',widthRatio:1.5}}}"
|
:chartData="Mount" /> -->
|
<qiun-data-charts type="word" :chartData="Word" />
|
</view>
|
</view>
|
|
<view class="card-box bot dynamic shadow">
|
<view class="title-box margin-bottom-sm">
|
<view style="width: 100vw;" class="left justify-between">
|
<view class="flex align-center">
|
<uni-text class="cuIcon-titles text-blue"></uni-text>
|
<view class="title">报警分析</view>
|
</view>
|
<view>
|
<text class="text-gray text-sm"></text>
|
</view>
|
|
</view>
|
|
</view>
|
|
|
<view class="chartsMain">
|
|
<qiun-data-charts type="radar" :opts="optsRadar" :chartData="dataRadar" />
|
</view>
|
</view>
|
|
|
</view>
|
</swiper-item>
|
</swiper>
|
|
|
</view>
|
</template>
|
|
<script>
|
import dropdownMenu from '@/components/drop-down-menu/index.vue'
|
export default {
|
components: {
|
dropdownMenu
|
},
|
data() {
|
return {
|
equList: [{
|
code: 1,
|
name: '1#干燥机'
|
},
|
{
|
code: 2,
|
name: '2#干燥机'
|
}
|
],
|
model: {},
|
filterMenuShow: false,
|
tabCurrent: 0,
|
swiperItemHeight: [2800, 2140],
|
tabList: [{
|
name: '实时报警',
|
badge: {
|
count: 6
|
}
|
}, {
|
name: '报警统计',
|
}],
|
PieA: {
|
"series": [{
|
"data": [{
|
"name": "机械",
|
"value": 50,
|
"labelText": "机械:50次"
|
}, {
|
"name": "电气",
|
"value": 30,
|
"labelText": "电气:30次"
|
}, {
|
"name": "通信",
|
"value": 20,
|
"labelText": "通信:20次"
|
}, {
|
"name": "其他",
|
"value": 18,
|
"labelText": "其他:18次"
|
}]
|
}]
|
},
|
dataRadar: {
|
|
categories: ["机械", "电气", "通信", "其他"],
|
series: [{
|
name: "报警占比",
|
data: [99, 30, 18, 73]
|
}]
|
|
},
|
|
Mount: {
|
"series": [{
|
|
"data": [{
|
"name": "机械",
|
"value": 82
|
}, {
|
"name": "电气",
|
"value": 63
|
}, {
|
"name": "通信",
|
"value": 86
|
}, {
|
"name": "其他",
|
"value": 65
|
}]
|
}]
|
},
|
Word: {
|
"series": [{
|
"name": "风机过流",
|
"textSize": 25
|
}, {
|
"name": "后门未关闭",
|
"textSize": 20
|
}, {
|
"name": "风箱升异常",
|
"textSize": 20
|
}, {
|
"name": "电机过流",
|
"textSize": 20
|
}, {
|
"name": "加热位传感器",
|
"textSize": 20
|
}, {
|
"name": "加热时间异常",
|
"textSize": 20
|
}, {
|
"name": "滚筒升异常",
|
"textSize": 20
|
}, {
|
"name": "风箱不在加热位",
|
"textSize": 20
|
}, {
|
"name": "滚筒不在加热位",
|
"textSize": 10
|
}]
|
},
|
opts: {
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [15, 15, 0, 5],
|
enableScroll: false,
|
legend: {
|
show: true
|
},
|
|
xAxis: {
|
disableGrid: true
|
},
|
yAxis: {
|
gridColor: "rgba(230,230,230,0.6)",
|
|
data: [
|
|
{
|
min: 0
|
}
|
]
|
},
|
extra: {
|
mount: {
|
type: "bar",
|
widthRatio: 0.3,
|
borderWidth: 0,
|
barBorderRadius: [
|
50,
|
50,
|
50,
|
50
|
],
|
linearType: "custom"
|
}
|
}
|
},
|
optsPie: {
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [5, 5, 5, 5],
|
enableScroll: false,
|
extra: {
|
pie: {
|
activeOpacity: 0.5,
|
activeRadius: 10,
|
offsetAngle: 0,
|
labelWidth: 1,
|
border: true,
|
borderWidth: 3,
|
borderColor: "#FFFFFF",
|
linearType: "custom"
|
}
|
}
|
},
|
optsRadar: {
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [5, 5, 5, 5],
|
dataLabel: true,
|
dataPointShape: false,
|
enableScroll: false,
|
legend: {
|
show: false,
|
position: "right",
|
lineHeight: 25
|
},
|
extra: {
|
radar: {
|
gridType: "circle",
|
gridColor: "#CCCCCC",
|
gridCount: 3,
|
opacity: 1,
|
max: 100,
|
labelShow: true,
|
linearType: "custom",
|
border: false
|
}
|
}
|
},
|
|
|
|
|
}
|
},
|
computed: {
|
|
|
},
|
created() {
|
|
},
|
beforeDestroy() {
|
|
},
|
methods: {
|
mqttTopicMessage(){
|
//处理消息逻辑
|
switch(topic){
|
case _this.$constant.SERVICE_BROADCAST_TENANT_REAL_FAULT.replace('%s', that.tenantId):
|
console.error(that.$constant.SERVICE_BROADCAST_TENANT_REAL_FAULT.replace('%s', that.tenantId))
|
console.error("收到广播")
|
|
break
|
}
|
},
|
changeMenu(selectData){
|
console.info(selectData)
|
this.filterMenuShow = false
|
|
|
},
|
resetMenu(selectData){
|
console.info(selectData)
|
|
},
|
rclick() {
|
this.filterMenuShow=!this.filterMenuShow
|
},
|
//tabs通知swiper切换
|
tabsChange(index) {
|
this.tabCurrent = index;
|
},
|
//swiper滑动中
|
swiperTransition(e) {
|
this.$refs.tabs.setDx(e.detail.dx);
|
},
|
//swiper滑动结束
|
swiperAnimationfinish(e) {
|
this.tabCurrent = e.detail.current;
|
this.$refs.tabs.unlockDx();
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "components/table/helang-table";
|
|
.app {
|
position: relative;
|
}
|
|
.card-box {
|
margin: 20rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
background-color: white;
|
border-radius: 20rpx;
|
font-family: Helvetica Neue, Helvetica, sans-serif;
|
|
}
|
|
|
.top {
|
margin: 0 20rpx;
|
border-radius: 0;
|
border-top-left-radius: 20rpx;
|
border-top-right-radius: 20rpx;
|
border-bot-left-radius: 0;
|
border-bot-right-radius: 0;
|
|
}
|
|
.center {
|
margin: 0 20rpx;
|
border-radius: 0;
|
|
}
|
|
.bot {
|
margin: 0 20rpx 20rpx 20rpx;
|
border-top-left-radius: 0;
|
border-top-right-radius: 0;
|
border-bot-left-radius: 20rpx;
|
border-bot-right-radius: 20rpx;
|
}
|
|
|
.title-box {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-weight: bold;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.info-box {
|
margin-top: 20rpx;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
}
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
|
.title {
|
margin: 0 10rpx;
|
}
|
}
|
}
|
|
|
.chartsMain {
|
width: 100%;
|
height: 320rpx;
|
padding-top: 15rpx;
|
background: #fff;
|
margin-bottom: 24rpx;
|
border-top: 2rpx solid #f2f2f2;
|
|
.charts {
|
width: 50%;
|
height: 450rpx;
|
box-sizing: border-box;
|
}
|
}
|
|
.tab-box {
|
display: flex;
|
justify-content: center;
|
/* 强制水平居中 */
|
}
|
|
.swiper {
|
height: 2116rpx;
|
}
|
|
.swiper-item-view {
|
height: 2116rpx;
|
|
|
}
|
|
|
|
|
|
|
|
.picBox {
|
margin: 0 20rpx;
|
background-color: white;
|
|
image {
|
border-radius: 8rpx;
|
width: 100%;
|
|
}
|
}
|
|
.borderTop {
|
border-top: 2rpx solid #f2f2f2;
|
padding-top: 20rpx;
|
}
|
|
// 弹出层背景遮罩start
|
.dropdown-mask {
|
background: rgba(0, 0, 0, 0.5);
|
}
|
.lock-page {
|
height: 100vh;
|
width: 100vw;
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: 998;
|
}
|
// 弹出层背景遮罩end
|
</style>
|
