| | |
| | | <!-- </el-button>--> |
| | | <!-- </template>--> |
| | | |
| | | <template slot-scope="{ row }" slot="dxzt"> |
| | | <el-tag>{{ |
| | | row.dxzt == "0" ? "掉线" : row.dxzt == "1" ? "正常" :row.dxzt == "2" ? "报警":row.dxzt == "3" ? "故障":"无" |
| | | <template class="tdtype" slot-scope="{ row }" slot="dxzt"> |
| | | <el-tag class="dtype"> |
| | | {{ |
| | | row.dxzt == "0" ? "掉线" : row.dxzt == "1" ? "正常" :row.dxzt == "2" ? "预警":row.dxzt == "3" ? "故障":"无" |
| | | }} |
| | | <i class="dx" v-if="row.dxzt == '0' "></i> |
| | | <i class="zc" v-if="row.dxzt == '1' "></i> |
| | | <i class="yj" v-if="row.dxzt == '2' "></i> |
| | | <i class="gz" v-if="row.dxzt == '3' "></i> |
| | | </el-tag> |
| | | |
| | | </template> |
| | | |
| | | <template slot-scope="{ row }" slot="type"> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | dataLIU:{ |
| | | color:"#DFDFDF" |
| | | }, |
| | | //legend-liu数据 |
| | | datalistLIU:[ |
| | | { |
| | | color: 'rgb(236, 83, 37)', |
| | | color: "#DFDFDF", |
| | | text: '掉线' |
| | | }, |
| | | { |
| | | color: 'rgb(49, 49, 49)', |
| | | text: '在线' |
| | | color: "#29C093", |
| | | text: '正常' |
| | | }, |
| | | { |
| | | color: "#F34A4A", |
| | | text: '预警' |
| | | }, |
| | | { |
| | | color: "#F48F57", |
| | | text: '故障' |
| | | } |
| | | ], |
| | | ], |
| | | form: {}, |
| | | query: {}, |
| | | showMap: false, |
| | |
| | | if(data.records[i].dtype=="" || data.records[i].dtype==0){ |
| | | data.records[i].dxzt = 1; |
| | | } |
| | | |
| | | |
| | | } |
| | | } |
| | | |
| | | data.records.sort((a, b) => { |
| | | return a.dxzt - b.dxzt; |
| | | }); |
| | | // data.records.sort((a, b) => { |
| | | // return a.dxzt - b.dxzt; |
| | | // }); |
| | | |
| | | this.data = data.records; |
| | | this.loading = false; |
| | | this.selectionClear(); |
| | | }); |
| | | }, rowStyle({row, column, rowIndex}) { |
| | | if (row.heartbeat != null && row.heartbeat != "") { |
| | | var date = new Date(row.heartbeat).getTime(); |
| | | var Dqdate = new Date().getTime(); |
| | | if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) { |
| | | // if (row.heartbeat != null && row.heartbeat != "") { |
| | | // var date = new Date(row.heartbeat).getTime(); |
| | | // var Dqdate = new Date().getTime(); |
| | | // if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) { |
| | | // return { |
| | | // color: "#fe1515" |
| | | // }; |
| | | // } |
| | | |
| | | // } else if (row.heartbeat == "") { |
| | | // return { |
| | | // color: "#fe1515" |
| | | // }; |
| | | // } |
| | | |
| | | if(row.dtype!=null && row.dtype!=""){ |
| | | // if(row.dtype=='0'){ |
| | | // return { |
| | | // color: "#DFDFDF" |
| | | // }; |
| | | // } |
| | | // if(row.dtype=='1'){ |
| | | // return { |
| | | // color: "#29C093" |
| | | // }; |
| | | // } |
| | | if(row.dtype=='2'){ |
| | | return { |
| | | color: "#fe1515" |
| | | color: "#F34A4A" |
| | | }; |
| | | } |
| | | |
| | | } else if (row.heartbeat == "") { |
| | | return { |
| | | color: "#fe1515" |
| | | }; |
| | | // if(row.dtype=='3'){ |
| | | // return { |
| | | // color: "#F48F57" |
| | | // }; |
| | | // } |
| | | } |
| | | }, |
| | | handleManage(row) { |
| | |
| | | this.showMap = true; |
| | | this.$nextTick(() => { |
| | | this.$refs.mapDiv.onload = () => { |
| | | window.frames[0].init("equipment", {x: row.jd, y: row.wd}); |
| | | window.frames[1].init("equipment", {x: row.jd, y: row.wd}); |
| | | }; |
| | | }) |
| | | },rightClick(row, event) { |
| | |
| | | color: red; |
| | | } |
| | | |
| | | .dtype{ |
| | | width: 80px; |
| | | } |
| | | |
| | | .dx{ |
| | | position: absolute; |
| | | top: 50%; |
| | | margin-top: -5px; |
| | | margin-left: 6px; |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 30%; |
| | | background: #DFDFDF; |
| | | } |
| | | .zc{ |
| | | position: absolute; |
| | | top: 50%; |
| | | margin-top: -5px; |
| | | margin-left: 6px; |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 30%; |
| | | background: #29C093; |
| | | } |
| | | .yj{ |
| | | position: absolute; |
| | | top: 50%; |
| | | margin-top: -5px; |
| | | margin-left: 6px; |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 30%; |
| | | background: #F34A4A; |
| | | } |
| | | .gz{ |
| | | position: absolute; |
| | | top: 50%; |
| | | margin-top: -5px; |
| | | margin-left: 6px; |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 30%; |
| | | background: #F48F57; |
| | | } |
| | | |
| | | .tabFontSize{ |
| | | font-size: 15px; |
| | | } |