分支自 mobile/lbdry-uniapp
pages/tabBar/warning.vue
@@ -1,591 +1,363 @@ <template> <view class="app"> <cu-custom bgColor="bg-gradual-blue" :isBack="false" :isRight="true" @rightclick="rclick"> <block slot="content">报警</block> <z-paging ref="paging" v-model="dataList" show-refresher-update-time @query="queryList"> <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" --> <template #top> <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> </cu-custom> <!--弹出层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> <!--弹出层start--> <view style="width: 100%; position: absolute;z-index: 1000;top:300rpx;padding: 20rpx;" @touchmove.prevent> <dropdown-menu v-show="filterMenuShow" @closeMenu="filterMenuShow = false " @reset='resetMenu' @change='changeMenu' :list='equList' ref='dropdownMenuRef' /> </view> <view class="lock-page dropdown-mask" @touchmove.prevent v-if="filterMenuShow"></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> <!--弹出层end--> </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 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 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> <text class="text-gray text-sm">{{curDate}}</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">{{count}} <text class="text-gray text-sm margin-left-xs">次</text></text> </view> <view class="margin-top"> <u-scroll-list> </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> </u-scroll-list> <text class="text-black">故障次数:</text> <text class="margin-lr-xs text-red text-bold text-xl">{{faultCount}}</text> <text class="text-gray text-xs"></text> </view> <view class="flex flex-direction flex-sub"> <text class="text-gray text-xs">机台信息</text> <text class="text-black">故障机台:</text> <text class="margin-lr-xs text-red">{{faultEqus}}</text> <text class="text-gray text-xs"></text> </view> </view> <view class="flex-sub flex"> <view class="flex flex-direction flex-sub" > <text class="text-white text-xs">报警信息</text> <text class="text-black">告警次数:</text> <text class="margin-lr-xs text-orange text-bold text-xl">{{alarmCount}}</text> <text class="text-gray text-xs"></text> </view> <view class="flex flex-direction flex-sub"> <text class="text-white text-xs">机台信息</text> <text class="text-black">告警机台:</text> <text class="margin-lr-xs text-orange">{{alarmEqus}}</text> <text class="text-gray text-xs"></text> </view> </view> </view> </view> <view> <u-scroll-list> </u-scroll-list> </view> </view> </view> </view> </template> </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> --> <u-tabs :list="tabList" @click="tabsChange"></u-tabs> <!-- <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跟着页面滚动，可以放在z-paging标签内 --> <!-- <real-warning ref="realWarining" v-if="tabCurrent === 0" @handleData="realHandleData"></real-warning> --> <!-- <his-warning ref="hisWarining" v-if="tabCurrent === 0" @handleData="hisHandleData"></his-warning> --> </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 style="z-index: 1;"> <his-warning ref="hisWarining" v-if="tabCurrent === 0" @handleData="hisHandleData"></his-warning> </view> </z-paging> </view> </template> <script> import dropdownMenu from '@/components/drop-down-menu/index.vue' import hisWarning from './components/hisWarning.vue' import dayjs from 'dayjs' export default { components: { dropdownMenu dropdownMenu, hisWarning }, data() { return { equList: [{ loading: true, // v-model绑定的这个变量不要在分页请求结束中自己赋值！！！ dataList: [], curDate: dayjs().format('YYYY-MM-DD'), tabList: [ // { // name: '实时报警', // // badge: { // // count: 6 // // } // }, { name: '报警统计', }], equList: [/* { code: 1, name: '1#干燥机' }, }, */ { code: 2, name: '2#干燥机' } } ], model: {}, //筛选框 filterMenuShow: false, //当前选中tab 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 } } }, //实时报警数据更新时间（一般10s） refreshTime: '', //报警总数 count: 0, //告警总数 alarmCount: 0, //故障总数 faultCount: 0, //故障机台 faultEqus: "", //告警机台 alarmEqus: "", } }, computed: { onTabItemTap: function(e) { getApp().globalData.selectTab = e.index }, created() { }, beforeDestroy() { onShow() { // //实时故障 // if(this.tabCurrent === 0){ // this.$nextTick(()=>{ // this.$refs.realWarining.queryRealFaultData() // }) // } //实时故障 if (this.tabCurrent === 0) { this.queryRealFaultData() } }, onReady() { }, 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 queryList(pageNo, pageSize) { this.loading = true; // 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用 // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可 // 模拟请求服务器获取分页数据，请替换成自己的网络请求 const params = { pageNo: pageNo, pageSize: pageSize, } // this.$api.querySampleList(params).then((res) => { // // 将请求的结果数组传递给z-paging //实时故障 if (this.tabCurrent === 0) { this.queryRealFaultData() }else if(this.tabCurrent === 1){ this.$refs.hisWarining.init(); } this.$refs.paging.complete(res.result.records); this.loading = false }).catch(res => { // 如果请求失败写this.$refs.paging.complete(false); // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理 // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可 this.$refs.paging.complete(false); this.loading = false }) }, //tabs通知swiper切换 tabsChange(index) { this.tabCurrent = index; tabsChange(item) { this.tabCurrent = item.index; //重置故障统计数据 this.count = 0; this.alarmCount = 0; this.faultCount = 0; this.faultEqus = ""; this.alarmEqus = ""; //实时故障 if (this.tabCurrent === 0) { // this.$nextTick(()=>{ // this.$refs.realWarining.queryRealFaultData() // }) this.queryRealFaultData() this.curDate = dayjs().format('YYYY-MM-DD'); }else if(this.tabCurrent === 1){ this.curDate = dayjs().subtract(3, 'day').format('YYYY-MM-DD') +" - "+ dayjs().format('YYYY-MM-DD'); } }, //swiper滑动中 swiperTransition(e) { this.$refs.tabs.setDx(e.detail.dx); realHandleData(data) { if (!data) return false this.count = data.length this.faultCount = data.filter(item => item.faultType === 1).length; this.alarmCount = data.filter(item => item.faultType === 2).length; const faultEquList = [...new Set( data .filter(item => item.faultType === 1) // 根据故障类型过滤 .map(item => { const match = item.equName.match(/(\d+#)/); return match ? match[0] : null; // 如果匹配成功，则返回匹配的编号；否则返回null }) .filter(Boolean) // 再次过滤掉可能存在的null值 )]; if (faultEquList) { this.faultEqus = faultEquList.join(','); } const alarmEquList = [...new Set( data .filter(item => item.faultType === 2) // 根据故障类型过滤 .map(item => { const match = item.equName.match(/(\d+#)/); return match ? match[0] : null; // 如果匹配成功，则返回匹配的编号；否则返回null }) .filter(Boolean) // 再次过滤掉可能存在的null值 )]; if (alarmEquList) { this.alarmEqus = alarmEquList.join(',') } }, hisHandleData(data){ if (!data) return false this.count = data.reduce((sum, item) => sum + item.ecount, 0); this.faultCount = data.filter(item => item.faultType === 1).reduce((sum, item) => sum + item.ecount, 0); this.alarmCount = data.filter(item => item.faultType === 2).reduce((sum, item) => sum + item.ecount, 0); }, //swiper滑动结束 swiperAnimationfinish(e) { this.tabCurrent = e.detail.current; this.$refs.tabs.unlockDx(); changeMenu(selectData) { console.info(selectData) this.filterMenuShow = false }, resetMenu(selectData) { console.info(selectData) }, rclick() { this.filterMenuShow = !this.filterMenuShow if (this.filterMenuShow) { uni.pageScrollTo({ scrollTop: 0, duration: 300 // 滚动动画持续时间，单位为毫秒 }); } }, } queryRealFaultData() { //发送数据 const message = { req: this.deviceId, tenantId: this.tenantId, timeStamp: new Date(), } let opts = { topic: this.$constant.MOBILE_REQ_EQU_REAL_FAULT, message: JSON.stringify(message), } this.$mqttTool.publish(opts).then(res => { //console.error(res) }) }, }, onReady() { }, computed: { tenantId() { const userinfo = uni.getStorageSync('userinfo'); const tenantid = userinfo.loginTenantId return tenantid + ""; }, deviceId() { return uni.getStorageSync(this.$constant.DEVICE_ID); }, }, } </script> @@ -593,8 +365,13 @@ @import "components/table/helang-table"; .app { position: relative; width: 100%; max-height: 100vh; overflow: hidden; } .card-box { margin: 20rpx; @@ -741,6 +518,7 @@ .dropdown-mask { background: rgba(0, 0, 0, 0.5); } .lock-page { height: 100vh; width: 100vw; @@ -751,5 +529,6 @@ bottom: 0; z-index: 998; } // 弹出层背景遮罩end </style>
