| | |
| | | <!-- |
| | | * @Date: 2024-04-09 22:11:21 |
| | | * @LastEditors: Sneed |
| | | * @LastEditTime: 2024-04-09 22:12:14 |
| | | * @LastEditors: lzhe lzhe@example.com |
| | | * @LastEditTime: 2024-06-17 17:26:45 |
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/mdc/realtime-status/index.vue |
| | | 实时看板 |
| | | --> |
| | |
| | | <div class="status-next" @click="next"> |
| | | <el-icon><ArrowRight /></el-icon> |
| | | </div> |
| | | <div class="status-content-cardp" v-for="item in timestatus" style="width: 33.3333%; height: 50%;"> |
| | | <div class="status-content-cardp" v-for="item in timestatus" :style="{'width': (100/column) + '%'}"> |
| | | <div class="status-card-box" style="border-color: #ccc;"> |
| | | <div class="status-card-top"> |
| | | <div class="status-card-detail"> |
| | |
| | | stationlabel: "", |
| | | stationlabelList: [], |
| | | current: "1", |
| | | size: "9", |
| | | total: 0, |
| | | deviceStatus: [], |
| | | workStationGroupIdList: [] |
| | | workStationGroupIdList: [], |
| | | line: "", |
| | | column: "" |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.getdevicestatus(); //获取顶部title |
| | | this.getstationlabelList(); //获取标签视图下的list |
| | | this.setIntervalTime(); //十秒增加时间 |
| | | this.getSetting(); //设置几行几列 |
| | | }, |
| | | methods: { |
| | | getSetting() { |
| | | this.$HTTP.get(`/api/blade-system/param/detail?paramKey=mdc.realtime.setting`).then(res=> { |
| | | if(res.code == 200) { |
| | | var paramValue = JSON.parse(res.data.paramValue); |
| | | this.line = paramValue.line==0?1:paramValue.line; |
| | | this.column = paramValue.column; |
| | | this.current = "1"; |
| | | this.size = this.line * this.column; |
| | | this.getdevicestatus(); //获取顶部title/具体数据 |
| | | } |
| | | }) |
| | | }, |
| | | setIntervalTime() { |
| | | function addTime(timeStr) { |
| | | var increaseByMilliseconds = 10 * 1000; // 10秒转换为毫秒 |
| | | // 解析时间字符串为天数、小时、分钟和秒 |
| | | if(timeStr != undefined) { |
| | | if(timeStr != undefined && timeStr != "--") { |
| | | var parts = timeStr.match(/(\d+)天(\d+)时(\d+)分(\d+)秒/); |
| | | var days = parseInt(parts[1], 10) * 24 * 60 * 60 * 1000; // 天数转换为毫秒 |
| | | var hours = parseInt(parts[2], 10) * 60 * 60 * 1000; // 小时转换为毫秒 |
| | |
| | | this.gettimestatus(); |
| | | }, |
| | | next() { |
| | | if((this.total/9 - this.current) < 0) return; |
| | | this.current = Number(this.current) + 1; |
| | | this.gettimestatus(); |
| | | if((this.current * this.line) < this.total/this.column) { |
| | | this.current = Number(this.current) + 1; |
| | | this.gettimestatus(); |
| | | } |
| | | }, |
| | | goSet() { |
| | | this.$router.push('/mdc/configuration'); |
| | |
| | | workStationGroupIdList: this.workStationGroupIdList |
| | | } |
| | | this.timestatus = []; |
| | | this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=9`,obj).then(res=> { |
| | | this.$HTTP.post(`/api/blade-cps/workstation/real-time-status?current=${this.current}&size=${this.size}`,obj).then(res=> { |
| | | if(res.code == 200) { |
| | | var ids = []; |
| | | res.data.records.forEach(item=> { |
| | |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | }) |
| | | this.total = res.data.total; |
| | | //发送websocket |
| | |
| | | var diffTime = "--"; |
| | | } |
| | | if(res.data.records.length == 0) return; //没值不用循环 |
| | | res.data.records.forEach(item=> { //第一步把v放到code里 |
| | | res.data.records.forEach((item,index)=> { //第一步把v放到code里 |
| | | if(eventData.id == item.id) { |
| | | if(item.properties == null) { |
| | | item.properties = []; |
| | | return; |
| | | } |
| | | item.time = diffTime; |
| | | item.properties.forEach(item1=> { |
| | | item.properties.forEach((item1,index1)=> { |
| | | if(item1.key == "DeviceStatus") { //机器状态 |
| | | //item1.code = eventData.data[item1.key].v; |
| | | if(item1.value == "2") { |
| | |
| | | } |
| | | }else { |
| | | if(item1.key == 'Alarm') { //报警 |
| | | var v = JSON.parse(eventData.data[item1.key].v); |
| | | item1.name = v.code; |
| | | item1.code = v.msg; |
| | | item1.color = "#370C0D"; |
| | | if(eventData.data[item1.key]) { |
| | | var v = JSON.parse(eventData.data[item1.key].v); |
| | | if(Array.isArray(v)) { //如果是数组,不赋值 |
| | | if(v.length == 0) { |
| | | res.data.records[index].properties.splice(index1,1); |
| | | }else { |
| | | item1.name = v[0].code; |
| | | item1.code = v[0].msg; |
| | | item1.color = "#370C0D"; |
| | | } |
| | | }else { |
| | | item1.name = v.code; |
| | | item1.code = v.msg; |
| | | item1.color = "#370C0D"; |
| | | } |
| | | } |
| | | }else { |
| | | item1.code = eventData.data[item1.key].v; |
| | | item1.color = "#75C0C0"; |
| | | if(eventData.data[item1.key]) { |
| | | item1.code = eventData.data[item1.key].v; |
| | | item1.color = "#75C0C0"; |
| | | } |
| | | } |
| | | } |
| | | }) |
| | |
| | | display: block; |
| | | } |
| | | .status-content-cardp { |
| | | min-width: 266px; |
| | | height: 50%; |
| | | min-height: 170px; |
| | | margin: 0; |
| | | padding: 4px; |