| | |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad" |
| | | @row-click="rowClick"> |
| | | |
| | | |
| | | <template slot="menuLeft"> |
| | | <el-button type="danger" |
| | | size="mini" |
| | |
| | | <!-- </el-button>--> |
| | | <!-- </template>--> |
| | | |
| | | <template slot-scope="{ row }" slot="dxzt"> |
| | | <el-tag>{{ |
| | | row.dxzt == "0" ? "掉线" : row.dxzt == "1" ? "在线" : "无" |
| | | <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="jfzt"> |
| | | <i class="el-icon-check client-jf" v-if="row.type == 0"></i> |
| | | <i class="el-icon-close client-qf" v-else-if="row.type == 1"></i> |
| | | <template slot-scope="{ row }" slot="type"> |
| | | <i class="el-icon-check client-jf" v-if="row.type == '0' "></i> |
| | | <i class="el-icon-close client-qf" v-else-if="row.type == '1' "></i> |
| | | </template> |
| | | |
| | | <template slot-scope="{ type, size, row }" slot="menu"> |
| | | <el-button |
| | | v-if="row.dtype == 2" |
| | | icon="el-icon-s-order" |
| | | :size="size" |
| | | :type="type" |
| | | @click.stop="updateDtype(row)" |
| | | >办结 |
| | | </el-button> |
| | | </template> |
| | | |
| | | </avue-crud> |
| | |
| | | <li class="menu_item" @click.stop="handleMap">定位</li> |
| | | </ul> |
| | | </div> |
| | | |
| | | |
| | | <el-drawer |
| | | title="电子地图" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-form> |
| | | |
| | | |
| | | </el-dialog> |
| | | |
| | | |
| | |
| | | }, |
| | | 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, |
| | |
| | | initFlag: true, |
| | | loading: true, |
| | | menuVisible:false, |
| | | isEdit:false, |
| | | page: { |
| | | pageSize: 10, |
| | | currentPage: 1, |
| | |
| | | option: { |
| | | height: 'auto', |
| | | indexLabel: '序号', |
| | | calcHeight: 80, |
| | | labelWidth: '105', |
| | | dialogWidth: 1040, |
| | | menuWidth: 150, |
| | | calcHeight: 54, |
| | | labelWidth: '125', |
| | | dialogWidth: 1150, |
| | | menuWidth: 200, |
| | | align:"center", |
| | | size: "mini", |
| | | tip: false, |
| | |
| | | ] |
| | | }, |
| | | { |
| | | label: "设备类型", |
| | | prop: "deviceType", |
| | | width: 150, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入设备类型", |
| | | trigger: "blur" |
| | | }] |
| | | }, |
| | | { |
| | | label: "使用方", |
| | | prop: "deptName", |
| | | display: false |
| | |
| | | label: "使用方", |
| | | prop: "deptId", |
| | | width: 200, |
| | | type: "tree", |
| | | type: "cascader", |
| | | dicUrl: "/api/blade-system/dept/trees", |
| | | multiple: true, |
| | | dicData: [], |
| | | checkStrictly:true, |
| | | hide:true, |
| | |
| | | }], |
| | | }, { |
| | | label: "缴费状态", |
| | | prop: "jfzt", |
| | | prop: "type", |
| | | slot: true, |
| | | sortable:true, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | }, { |
| | | label: "设备厂商", |
| | | prop: "manufacturers", |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | searchSpan: 3, |
| | | dicUrl: "/api/blade-system/dict-biz/dictionary?code=manufacturers", |
| | | props: { |
| | | label: "dictValue", |
| | | value: "dictKey" |
| | | }, |
| | | search:true, |
| | | type:"select", |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择设备厂商", |
| | | trigger: "blur" |
| | | }], |
| | | }, { |
| | | label: "布撤防状态", |
| | | prop: "devicestate", |
| | |
| | | label: "设备状态", |
| | | prop: "dxzt", |
| | | slot: true, |
| | | sortable:true, |
| | | addDisplay: false, |
| | | editDisplay: false, |
| | | }, |
| | |
| | | label: "故障状态", |
| | | prop: "state", |
| | | addDisplay: false, |
| | | editDisplay: false |
| | | editDisplay: false, |
| | | hide:true |
| | | }, |
| | | { |
| | | label: "故障原因", |
| | |
| | | addDisplay: false, |
| | | editDisplay: false |
| | | }, |
| | | |
| | | { |
| | | label: "省份", |
| | | prop: "province", |
| | | search: true, |
| | | searchSpan: 2, |
| | | labelWidth: '100', |
| | | labelWidth: '110', |
| | | searchLabelWidth: 45, |
| | | placeholder: "省份", |
| | | type: "select", |
| | |
| | | }, |
| | | cascaderItem: ["city", "district"], |
| | | dicUrl: "/api/blade-system/region/select", |
| | | span: 7, |
| | | span: 8, |
| | | className: "city1", |
| | | hide: true, |
| | | addDisplay: true, |
| | |
| | | value: "code" |
| | | }, |
| | | dicUrl: "/api/blade-system/region/select?code={{key}}", |
| | | span: 3, |
| | | span: 2, |
| | | labelWidth: "0", |
| | | className: "city3", |
| | | hide: true, |
| | |
| | | }, { |
| | | label: "地址", |
| | | prop: "street", |
| | | // type:"map", |
| | | span:11, |
| | | labelWidth: '160', |
| | | span:10, |
| | | hide: true, |
| | | }, |
| | | { |
| | |
| | | searchSpan:0, |
| | | maxlength:0, |
| | | hide: true, |
| | | span: 1, |
| | | span: 2, |
| | | // display:false, |
| | | component: "AvueMap" |
| | | }, |
| | |
| | | prop: "jd", |
| | | searchSpan:2, |
| | | width:"100", |
| | | labelWidth: "110", |
| | | labelWidth: "120", |
| | | formatter: (row,value,label,column)=>{ |
| | | return value = value.substring(0,11); |
| | | }, |
| | |
| | | }, |
| | | span:5, |
| | | }, |
| | | { |
| | | label: "心跳时间", |
| | | prop: "heartbeat", |
| | | type: "datetime", |
| | | format: "yyyy-MM-dd", |
| | | valueFormat: "yyyy-MM-dd HH:mm:ss", |
| | | width: 130, |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, |
| | | |
| | | { |
| | | label: "负责人1", |
| | | label: "主要负责人", |
| | | prop: "oneId", |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/dept/Batrees", |
| | |
| | | viewDisplay: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择负责人", |
| | | message: "请选择主要负责人", |
| | | trigger: "blur" |
| | | }], |
| | | }, |
| | | { |
| | | label: "负责人1电话", |
| | | label: "主要负责人电话", |
| | | prop: "onePhone", |
| | | width: 110, |
| | | hide: true, |
| | |
| | | trigger: "blur" |
| | | }], |
| | | }, { |
| | | label: "负责人2", |
| | | label: "负责人1", |
| | | prop: "twoId", |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/dept/Batrees", |
| | |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "负责人2电话", |
| | | label: "负责人1电话", |
| | | prop: "twoPhone", |
| | | width: 110, |
| | | hide: true, |
| | |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, { |
| | | label: "负责人3", |
| | | label: "负责人2", |
| | | prop: "threeId", |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/dept/Batrees", |
| | |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "负责人3电话", |
| | | label: "负责人2电话", |
| | | prop: "threePhone", |
| | | width: 110, |
| | | hide: true, |
| | |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "心跳时间", |
| | | prop: "heartbeat", |
| | | type: "datetime", |
| | | format: "yyyy-MM-dd", |
| | | valueFormat: "yyyy-MM-dd HH:mm:ss", |
| | | width: 130, |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | } |
| | | |
| | | ] |
| | | }, |
| | |
| | | handler(val) { |
| | | if (val) { |
| | | var that = this; |
| | | //经纬度替换 |
| | | this.form.wd = val.latitude; |
| | | // this.form.wd = val.latitude.toString().substring(0,10); |
| | | this.form.jd = val.longitude; |
| | | // this.form.jd = val.longitude.toString().substring(0,11); |
| | | //地址截取,从县/区开始截取,并且取从县区第一个出现的位置开始 |
| | | var address = val.formattedAddress.toString(); |
| | | if(address.search("县") != -1){ |
| | | this.form.street = address.substring(address.indexOf("县")+1,address.length); |
| | | } |
| | | if(address.search("区") != -1){ |
| | | this.form.street = address.substring(address.indexOf("区")+1,address.length); |
| | | } |
| | | |
| | | // that.form.province = val.addressComponent.province; |
| | | // that.form.city = val.addressComponent.city; |
| | | // that.form.district = val.addressComponent.district; |
| | | this.form.street = address; |
| | | // if(address.search("县") != -1){ |
| | | // this.form.street = address.substring(address.indexOf("县")+1,address.length); |
| | | // } |
| | | // if(address.search("区") != -1){ |
| | | // this.form.street = address.substring(address.indexOf("区")+1,address.length); |
| | | // } |
| | | } |
| | | }, |
| | | immediate: true, |
| | |
| | | // this.initData(); |
| | | // } |
| | | // } |
| | | |
| | | |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["permission"]), |
| | |
| | | }); |
| | | }, |
| | | |
| | | //初始化数据 |
| | | //初始化数据 |
| | | // initData() { |
| | | // //部门tree数据 |
| | | // getDeptTree().then(res => { |
| | |
| | | // column.dicData = res.data.data; |
| | | // }); |
| | | // }, |
| | | |
| | | |
| | | handleClick(row) { |
| | | this.form = row; |
| | | this.dialogTableVisible = true; |
| | |
| | | this.onLoad(this.page); |
| | | }, |
| | | rowSave(row, done, loading) { |
| | | row.deptId = row.deptId.join(","); |
| | | add(row).then(() => { |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | |
| | | }); |
| | | }, |
| | | rowUpdate(row, index, done, loading) { |
| | | // row.jd=row.map.latitude; |
| | | // row.wd=row.map.longitude; |
| | | if(Array.isArray(row.deptId)){ |
| | | row.deptId = row.deptId.join(","); |
| | | } |
| | | update(row).then(() => { |
| | | // this.initFlag = false; |
| | | this.onLoad(this.page); |
| | |
| | | }, error => { |
| | | window.console.log(error); |
| | | loading(); |
| | | }); |
| | | }, |
| | | updateDtype(row){ |
| | | row.dtype = "0"; |
| | | update(row).then(() => { |
| | | // this.initFlag = false; |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: "success", |
| | | message: "操作成功!" |
| | | }); |
| | | this.onLoad(this.page); |
| | | }, error => { |
| | | window.console.log(error); |
| | | }); |
| | | }, |
| | | rowDel(row) { |
| | |
| | | this.onLoad(this.page); |
| | | }, |
| | | searchChange(params, done) { |
| | | console.log(params,done) |
| | | this.query = params; |
| | | this.page.currentPage = 1; |
| | | this.onLoad(this.page, params); |
| | |
| | | if (["edit", "view"].includes(type)) { |
| | | getclient(this.form.id).then(res => { |
| | | this.form = res.data.data; |
| | | this.isEdit=true; |
| | | }); |
| | | } |
| | | if (["add"].includes(type)) { |
| | | this.isEdit=false; |
| | | } |
| | | // this.initFlag = true; |
| | | done(); |
| | |
| | | |
| | | for (var i = 0; i < data.records.length; i++) { |
| | | var date = new Date(data.records[i].heartbeat).getTime(); |
| | | if ((Dqdate - date) >= (60 * 60 * 24 * 1000)) { |
| | | data.records[i].dxzt = 0; |
| | | } else if (data.records[i].heartbeat == "") { |
| | | data.records[i].dxzt = 0; |
| | | } else { |
| | | data.records[i].dxzt = 1; |
| | | } |
| | | if(data.records[i].dtype==1){ |
| | | data.records[i].dxzt = 1; |
| | | } |
| | | if(data.records[i].dtype==2){ |
| | | data.records[i].dxzt = 2; |
| | | } |
| | | if(data.records[i].dtype==3){ |
| | | data.records[i].dxzt = 3; |
| | | } |
| | | if(data.records[i].dtype=="" || data.records[i].dtype==0){ |
| | | data.records[i].dxzt = 0; |
| | | } |
| | | } |
| | | |
| | | 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) { |
| | |
| | | }); |
| | | |
| | | }, handleStart(row) { |
| | | |
| | | console.log(row,11111111111); |
| | | row = this.selectRow; |
| | | console.log(row,22222222222); |
| | | var arr = []; |
| | | console.log(this.$store.state.tags.tagList,3333333); |
| | | this.$store.state.tags.tagList.forEach(item => { |
| | | if (item.label != "视频") { |
| | | arr.push(item); |
| | | } |
| | | }); |
| | | this.$store.state.tags.tagList = arr; |
| | | console.log(arr,444444444444); |
| | | this.$router.push({ |
| | | path: `/real/video/`, query: 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; |
| | | } |