| | |
| | | @current-change="currentChange" |
| | | @size-change="sizeChange" |
| | | @refresh-change="refreshChange" |
| | | @on-load="onLoad"> |
| | | @on-load="onLoad" |
| | | @row-click="rowClick"> |
| | | |
| | | <template slot="menuLeft"> |
| | | <el-button type="danger" |
| | | size="mini" |
| | |
| | | <Legend :datas="datalistLIU"></Legend> |
| | | </span> |
| | | </template> |
| | | |
| | | |
| | | <template slot-scope="{ row }" slot="devicestate"> |
| | | <el-tag>{{ |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-form> |
| | | |
| | | </el-dialog> |
| | | |
| | | |
| | | <el-table |
| | | :data="gridData" |
| | | border |
| | | style="width: 100%"> |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column |
| | | fixed |
| | | prop="xb" |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates} from "@/api/client/client"; |
| | | import {getList, remove, update, add, getclient, getDeptLazyTree, getAll, updates,getBaTree} from "@/api/client/client"; |
| | | // import {getDeptTree} from "@/api/system/dept"; |
| | | import {mapGetters} from "vuex"; |
| | | import axios from "axios"; |
| | | import Legend from '../../components/liu-legend/Legend' |
| | | import AvueMap from "avue-plugin-map"; |
| | | import website from '@/config/website'; |
| | | |
| | | export default { |
| | | components:{ |
| | |
| | | //legend-liu数据 |
| | | datalistLIU:[ |
| | | { |
| | | color: 'rgb(233, 39, 25)', |
| | | color: 'rgb(236, 83, 37)', |
| | | text: '掉线' |
| | | }, |
| | | { |
| | | color: 'black', |
| | | color: 'rgb(49, 49, 49)', |
| | | text: '在线' |
| | | } |
| | | ], |
| | |
| | | height: 'auto', |
| | | indexLabel: '序号', |
| | | calcHeight: 80, |
| | | labelWidth: '100', |
| | | dialogWidth: 950, |
| | | labelWidth: '105', |
| | | dialogWidth: 1040, |
| | | menuWidth: 150, |
| | | align:"center", |
| | | size: "mini", |
| | |
| | | searchPlaceholder: "设备名称/编号", |
| | | search: true, |
| | | sortable:true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入设备名称", |
| | | trigger: "blur" |
| | | }], |
| | | }, |
| | | { |
| | | label: "到期时间", |
| | |
| | | label: "设备编号", |
| | | prop: "deviceNumber", |
| | | width: 130, |
| | | editDisabled: true, |
| | | rules: [ |
| | | { |
| | | required: false, |
| | | required: true, |
| | | message: "请输入设备编号", |
| | | trigger: "click" |
| | | } |
| | |
| | | }, |
| | | { |
| | | label: "使用方", |
| | | prop: "deptName", |
| | | display: false |
| | | }, |
| | | { |
| | | label: "使用方", |
| | | prop: "deptId", |
| | | width: 200, |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/dept/trees", |
| | | multiple: true, |
| | | dicData: [], |
| | | checkStrictly:true, |
| | | hide:true, |
| | | props: { |
| | | label: "title" |
| | | }, |
| | | rules: [ |
| | | { |
| | | required: false, |
| | | message: "请选择上级菜单", |
| | | required: true, |
| | | message: "请选择使用方", |
| | | trigger: "click" |
| | | } |
| | | ] |
| | | }, |
| | | // { |
| | | // label: "使用方", |
| | | // prop: "deptId", |
| | | // width: 200, |
| | | // type: "cascader", |
| | | // dicUrl: "/api/blade-system/dept/trees", |
| | | // multiple: true, |
| | | // checkStrictly:true, |
| | | // dicData: [], |
| | | // props: { |
| | | // label: "title" |
| | | // }, |
| | | // rules: [ |
| | | // { |
| | | // required: true, |
| | | // message: "请选择使用方", |
| | | // trigger: "click" |
| | | // } |
| | | // ] |
| | | // }, |
| | | { |
| | | label: "序列号", |
| | | prop: "serialNumber", |
| | |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入序列号", |
| | | trigger: "blur" |
| | | }], |
| | | }, |
| | | { |
| | | label: "通道号", |
| | |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入通道号", |
| | | trigger: "blur" |
| | | }], |
| | | }, { |
| | | label: "缴费状态", |
| | | prop: "jfzt", |
| | |
| | | addDisplay: false, |
| | | editDisplay: false |
| | | }, |
| | | { |
| | | label: "设备类型", |
| | | prop: "deviceType", |
| | | width: 100, |
| | | search: true, |
| | | searchSpan: 3, |
| | | searchLabelWidth: 80, |
| | | searchPlaceholder: "请选择", |
| | | type: "select", |
| | | props: { |
| | | label: "dictValue", |
| | | value: "dictValue" |
| | | }, |
| | | dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569", |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, |
| | | |
| | | { |
| | | label: "省份", |
| | | prop: "province", |
| | | search: true, |
| | | searchSpan: 3, |
| | | searchSpan: 2, |
| | | labelWidth: '100', |
| | | searchLabelWidth: 45, |
| | | placeholder: "省份", |
| | | type: "select", |
| | |
| | | }, |
| | | cascaderItem: ["city", "district"], |
| | | dicUrl: "/api/blade-system/region/select", |
| | | span: 6, |
| | | className: "cityClass1", |
| | | span: 7, |
| | | className: "city1", |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | |
| | | value: "code" |
| | | }, |
| | | dicUrl: "/api/blade-system/region/select?code={{key}}", |
| | | span: 3, |
| | | span: 2, |
| | | labelWidth: "0", |
| | | className: "cityClass2", |
| | | className: "city2", |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | |
| | | dicUrl: "/api/blade-system/region/select?code={{key}}", |
| | | span: 3, |
| | | labelWidth: "0", |
| | | className: "cityClass3", |
| | | className: "city3", |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, { |
| | | label: "街道", |
| | | label: "地址", |
| | | prop: "street", |
| | | width: 200, |
| | | // type:"map", |
| | | span:11, |
| | | labelWidth: '160', |
| | | hide: true, |
| | | }, |
| | | { |
| | | label: null, |
| | | prop: "map", |
| | | labelWidth: "0", |
| | | searchSpan:0, |
| | | maxlength:0, |
| | | hide: true, |
| | | span: 1, |
| | | // display:false, |
| | | component: "AvueMap" |
| | | }, |
| | | { |
| | | label: "经度", |
| | | hide: true, |
| | | prop: "jd", |
| | | searchSpan:2, |
| | | width:"100", |
| | | labelWidth: "110", |
| | | formatter: (row,value,label,column)=>{ |
| | | return value = value.substring(0,11); |
| | | }, |
| | | span:7, |
| | | }, |
| | | { |
| | | label: "纬度", |
| | | labelWidth: "45", |
| | | hide: true, |
| | | prop: "wd", |
| | | formatter: (row,value,label,column) => { |
| | | return value = value.substring(0,10); |
| | | }, |
| | | 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: "负责人", |
| | | prop: "oneContacts", |
| | | label: "负责人1", |
| | | prop: "oneId", |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/dept/Batrees", |
| | | props: { |
| | | label: "title" |
| | | }, |
| | | width: 72, |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请选择负责人", |
| | | trigger: "blur" |
| | | }], |
| | | }, |
| | | { |
| | | label: "负责人1电话", |
| | | prop: "onePhone", |
| | | width: 110, |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | rules: [{ |
| | | required: true, |
| | | message: "请输入负责人电话", |
| | | trigger: "blur" |
| | | }], |
| | | }, { |
| | | label: "负责人2", |
| | | prop: "twoId", |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/dept/Batrees", |
| | | props: { |
| | | label: "title" |
| | | }, |
| | | width: 72, |
| | | hide: true, |
| | | addDisplay: true, |
| | |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "负责人电话", |
| | | prop: "onePhone", |
| | | label: "负责人2电话", |
| | | prop: "twoPhone", |
| | | width: 110, |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, { |
| | | label: "负责人3", |
| | | prop: "threeId", |
| | | type: "tree", |
| | | dicUrl: "/api/blade-system/dept/Batrees", |
| | | props: { |
| | | label: "title" |
| | | }, |
| | | width: 72, |
| | | hide: true, |
| | | addDisplay: true, |
| | | editDisplay: true, |
| | | viewDisplay: true, |
| | | }, |
| | | { |
| | | label: "负责人3电话", |
| | | prop: "threePhone", |
| | | width: 110, |
| | | hide: true, |
| | | addDisplay: true, |
| | |
| | | addDisplay: 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, |
| | | }, |
| | | |
| | | ] |
| | | }, |
| | | data: [] |
| | | }; |
| | | }, |
| | | watch: { |
| | | "form.map": { |
| | | // form是表单或者表格绑定的数据集,v-model='form' |
| | | 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; |
| | | } |
| | | }, |
| | | immediate: true, |
| | | }, |
| | | "form.oneId":{ |
| | | handler(val) { |
| | | var that = this; |
| | | if (val != null && val !=""){ |
| | | getBaTree(val).then(res => { |
| | | if (res) { |
| | | that.form.onePhone = res.data.data.records[0].phone; |
| | | that.form.oneContacts = res.data.data.records[0].name; |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | "form.twoId":{ |
| | | handler(val) { |
| | | var that = this; |
| | | if (val != null && val !=""){ |
| | | getBaTree(val).then(res => { |
| | | if (res) { |
| | | that.form.twoPhone = res.data.data.records[0].phone; |
| | | that.form.twoContacts = res.data.data.records[0].name; |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | "form.threeId":{ |
| | | handler(val) { |
| | | var that = this; |
| | | if (val != null && val !=""){ |
| | | getBaTree(val).then(res => { |
| | | if (res) { |
| | | that.form.threePhone = res.data.data.records[0].phone; |
| | | that.form.threeContacts = res.data.data.records[0].name; |
| | | } |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | | |
| | | //随意一个 |
| | | // 'form.deviceName'() { |
| | | // if (this.initFlag) { |
| | | // this.initData(); |
| | | // } |
| | | // } |
| | | |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["permission"]), |
| | |
| | | return ids.join(","); |
| | | } |
| | | }, |
| | | mounted(){ |
| | | // 租户模式默认加载管理组数据 |
| | | // var that = this; |
| | | //that.tenantId = website.tenantId; |
| | | }, |
| | | methods: { |
| | | generate(row) { |
| | | updates(row.expireTime, row.deviceNumber).then(() => { |
| | |
| | | window.console.log(error); |
| | | }); |
| | | }, |
| | | |
| | | //初始化数据 |
| | | // initData() { |
| | | // //部门tree数据 |
| | | // getDeptTree().then(res => { |
| | | // const column = this.findObject(this.option.column, "deptId"); |
| | | // column.dicData = res.data.data; |
| | | // }); |
| | | // }, |
| | | |
| | | handleClick(row) { |
| | | this.form = row; |
| | | this.dialogTableVisible = true; |
| | | this.realjf = true; |
| | | |
| | | }, |
| | | nodeClick(data) { |
| | | this.treeDeptId = data.id; |
| | |
| | | }); |
| | | }, |
| | | rowUpdate(row, index, done, loading) { |
| | | // row.jd=row.map.latitude; |
| | | // row.wd=row.map.longitude; |
| | | update(row).then(() => { |
| | | // this.initFlag = false; |
| | | this.onLoad(this.page); |
| | | this.$message({ |
| | | type: "success", |
| | |
| | | this.form = res.data.data; |
| | | }); |
| | | } |
| | | // this.initFlag = true; |
| | | done(); |
| | | }, |
| | | currentChange(currentPage) { |
| | |
| | | //console.log(document.body.clientHeight,event.clientY,cha) |
| | | // 防止菜单太靠底,根据可视高度调整菜单出现位置 |
| | | if (cha < 150) { |
| | | menu.style.top = event.clientY -120 - (70) + 'px' |
| | | menu.style.top = event.clientY -120 - (100) + 'px' |
| | | } else { |
| | | menu.style.top = event.clientY -10 - (70) + 'px' |
| | | menu.style.top = event.clientY -10 - (100) + 'px' |
| | | } |
| | | menu.style.left = event.clientX + 10 - (60) + 'px' |
| | | document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件,点击任何位置执行foo方法 |
| | | }, |
| | | rowClick(val){//行点击事件 |
| | | // console.log(val); |
| | | this.$router.push({ path: "/dataL/dataL", query: val }); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="scss" scoped> |
| | | $city-m-l: 10px; |
| | | |
| | | .payWin { |
| | | overflow-y: auto; |
| | | height: 350px; |
| | |
| | | } |
| | | |
| | | |
| | | /*页面样式*/ |
| | | .el-card__body .cityClass1 { |
| | | width: 155px; |
| | | padding-right: 0px !important; |
| | | } |
| | | // /*页面样式*/ //丢弃 因为不起作用,样式在cs.vue中 city1,2,3 liuyg改 |
| | | // .el-card__body .cityClass1 { |
| | | // width: 50px; |
| | | // padding-right: 0px !important; |
| | | // margin-left: $city-m-l; |
| | | // } |
| | | |
| | | .el-card__body .cityClass2 { |
| | | width: 100px; |
| | | padding-left: 0px !important; |
| | | padding-right: 0px !important; |
| | | } |
| | | // .el-card__body .cityClass2 { |
| | | // width: 50px; |
| | | // padding-left: 0px !important; |
| | | // padding-right: 0px !important; |
| | | // margin-left: $city-m-l; |
| | | // } |
| | | |
| | | .el-card__body .cityClass3 { |
| | | width: 100px; |
| | | padding-left: 0px !important; |
| | | padding-right: 0px !important; |
| | | } |
| | | // .el-card__body .cityClass3 { |
| | | // width: 50px; |
| | | // padding-left: 0px !important; |
| | | // padding-right: 0px !important; |
| | | // margin-left: $city-m-l; |
| | | // } |
| | | |
| | | /*新增窗体样式*/ |
| | | .el-dialog .cityClass1 { |
| | | width: 220px; |
| | | padding-right: 0px !important; |
| | | } |
| | | // /*新增窗体样式*/ |
| | | // .el-dialog .city1 { |
| | | // width: 155px; |
| | | // padding-right: 0px !important; |
| | | // margin-left: $city-m-l; |
| | | // } |
| | | |
| | | .el-dialog .cityClass2 { |
| | | width: 110px; |
| | | padding-left: 5px !important; |
| | | padding-right: 5px !important; |
| | | } |
| | | // .el-dialog .city2 { |
| | | // width: 100px; |
| | | // padding-left: 5px !important; |
| | | // padding-right: 5px !important; |
| | | // margin-left: $city-m-l; |
| | | // } |
| | | |
| | | .el-dialog .cityClass3 { |
| | | width: 110px; |
| | | padding-left: 0px !important; |
| | | padding-right: 0px !important; |
| | | } |
| | | // .el-dialog .city3 { |
| | | // width: 100px; |
| | | // padding-left: 0px !important; |
| | | // padding-right: 0px !important; |
| | | // margin-left: $city-m-l; |
| | | // } |
| | | |
| | | .cityClass2 div label { |
| | | display: none; |
| | | } |
| | | // .city2 div label { |
| | | // display: none; |
| | | // } |
| | | |
| | | .cityClass3 div label { |
| | | display: none; |
| | | } |
| | | // .city3 div label { |
| | | // display: none; |
| | | // } |
| | | |
| | | .real-jf-dialog { |
| | | position: absolute !important; |
| | |
| | | padding-right: 5px; |
| | | } |
| | | |
| | | |
| | | |
| | | </style> |
| | | |
| | | |
| | | <style> |
| | | .avue-map input{ |
| | | position: relative !important; |
| | | left: 30px !important; |
| | | } |
| | | |
| | | .avue-map .el-input-group__append{ |
| | | position: relative !important; |
| | | left: -51px !important; |
| | | } |
| | | |
| | | |
| | | </style> |