设备管理调整

zengh

2021-04-02 4f8d790612e206664b20241d376e76668421089e

设备管理调整

 src/views/clientManagement/clientManagement.vue

@@ -18,6 +18,8 @@
                   @row-update="rowUpdate"
                   @row-save="rowSave"
                   :row-style="rowStyle"
                   @contextmenu.prevent.native=""
                   @row-contextmenu="rightClick"
                   row-class-name="tabFontSize"
                   :before-open="beforeOpen"
                   @search-change="searchChange"
@@ -44,22 +46,22 @@
              }}
            </el-tag>
          </template>
          <template slot-scope="{ type, size, row }" slot="menu">
            <el-button
              icon="el-icon-video-camera-solid"
              :size="size"
              :type="type"
              @click.stop="handleStart(row)"
            >视频
            </el-button>
            <el-button
              icon="el-icon-location-outline"
              :size="size"
              :type="type"
              @click.stop="handleMap(row)"
            >定位
            </el-button>
          </template>
<!--          <template slot-scope="{ type, size, row }" slot="menu">-->
<!--            <el-button-->
<!--              icon="el-icon-video-camera-solid"-->
<!--              :size="size"-->
<!--              :type="type"-->
<!--              @click.stop="handleStart(row)"-->
<!--            >视频-->
<!--            </el-button>-->
<!--            <el-button-->
<!--              icon="el-icon-location-outline"-->
<!--              :size="size"-->
<!--              :type="type"-->
<!--              @click.stop="handleMap(row)"-->
<!--            >定位-->
<!--            </el-button>-->
<!--          </template>-->

          <template slot-scope="{ row }" slot="dxzt">
            <el-tag>{{
@@ -75,6 +77,12 @@

        </avue-crud>

        <div v-show="menuVisible">
          <ul id="menu" class="menu">
            <li class="menu_item" @click.stop="handleStart">视频</li>
            <li class="menu_item" @click.stop="handleMap">定位</li>
          </ul>
        </div>

        <el-drawer
          title="电子地图"
@@ -195,8 +203,10 @@
        form: {},
        query: {},
        showMap: false,
        selectRow:null,
        initFlag: true,
        loading: true,
        menuVisible:false,
        page: {
          pageSize: 10,
          currentPage: 1,
@@ -238,14 +248,15 @@
          calcHeight: 80,
          labelWidth: '100',
          dialogWidth: 950,
          menuWidth: 250,
          menuWidth: 150,
          align:"center",
          size: "mini",
          tip: false,
          searchShow: true,
          searchMenuSpan: 4,
          searchSpan: 4,
          border: true,
          border: false,
          stripe:true,
          index: true,
          viewBtn: true,
          selection: true,
@@ -330,12 +341,10 @@
              label: "缴费状态",
              prop: "jfzt",
              slot: true,
              align: "center",
              addDisplay: false,
              editDisplay: false,
            }, {
              label: "布撤防状态",
              align: "center",
              prop: "devicestate",
              type: "select",
              slot: true,
@@ -358,7 +367,6 @@
            },
            {
              label: "设备状态",
              align: "center",
              prop: "dxzt",
              slot: true,
              addDisplay: false,
@@ -390,6 +398,10 @@
                value: "dictValue"
              },
              dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "省份",
@@ -406,7 +418,11 @@
              cascaderItem: ["city", "district"],
              dicUrl: "/api/blade-system/region/select",
              span: 6,
              className: "cityClass1"
              className: "cityClass1",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "地市",
@@ -424,7 +440,11 @@
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass2"
              className: "cityClass2",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "区县",
@@ -442,45 +462,77 @@
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass3"
              className: "cityClass3",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "街道",
              prop: "street",
              width: 200
              width: 200,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "负责人",
              prop: "oneContacts",
              width: 72
              width: 72,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "负责人电话",
              prop: "onePhone",
              width: 110
              width: 110,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "到期时间",
              prop: "expireTime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
              width: 130,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "缴费信息",
              prop: "pay",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            }, {
              label: "安装时间",
              prop: "stime",
              type: "datetime",
              format: "yyyy-MM-dd",
              valueFormat: "yyyy-MM-dd HH:mm:ss",
              width: 130
              width: 130,
              hide: 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
              width: 130,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },

          ]
@@ -726,6 +778,7 @@
        });

      }, handleStart(row) {
        row = this.selectRow;
        var arr = [];
        this.$store.state.tags.tagList.forEach(item => {
          if (item.label != "视频") {
@@ -737,18 +790,42 @@
          path: `/real/video/`, query: row
        });
      }, handleMap(row) {
        row = this.selectRow;
        this.showMap = true;
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[0].init("equipment", {x: row.jd, y: row.wd});
          };
        })
      },rightClick(row, event) {
        this.selectRow = row;
        this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('#menu');
        this.styleMenu(menu);
      },
      foo() {
        // 取消鼠标监听事件 菜单栏
        this.menuVisible = false;
        document.removeEventListener('click', this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      },
      styleMenu(menu) {
        let cha = document.body.clientHeight - event.clientY
        //console.log(document.body.clientHeight,event.clientY,cha)
        // 防止菜单太靠底，根据可视高度调整菜单出现位置
        if (cha < 150) {
          menu.style.top = event.clientY -120 - (120) + 'px'
        } else {
          menu.style.top = event.clientY -10 - (120) + 'px'
        }
        menu.style.left = event.clientX + 10 - (240) + 'px'
        document.addEventListener('click', this.foo); // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
      }
    }
  };
</script>

<style>
<style scoped>
  .payWin {
    overflow-y: auto;
    height: 350px;
@@ -799,4 +876,41 @@
    font-size: 15px;
  }

  .menu_item {
    cursor:pointer;
    line-height: 20px;
    text-align: center;
    margin-top: 0px;
  }

  .menu {
    height: auto;
    width: 120px;
    color: #606266;
    position: absolute;
    padding: 0px;
    box-sizing: border-box;
    /*border: 1px solid #999999;*/
    text-align: center;
    background-color: #fff;
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }
  li:hover {
    background-color: rgba(232,237,250,.6);
    color: darkslategrey;
  }
  li{
    position: relative;
    display: flex;
    font-size: 14px;
    align-items: center;
    height: 34px;
    line-height: 34px;
    outline: none;
    margin-top: 0px;
    padding-left: 20px;
    padding-right: 5px;
  }

</style>