样式修改

shuishen

2021-04-08 a4e06ccd3cd976fbe4eef99e188d42ec9f3ad054

 src/views/clientManagement/clientManagement.vue

@@ -18,6 +18,9 @@
                   @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"
                   @search-reset="searchReset"
@@ -28,7 +31,7 @@
                   @on-load="onLoad">
          <template slot="menuLeft">
            <el-button type="danger"
                       size="small"
                       size="mini"
                       icon="el-icon-delete"
                       plain
                       v-if="permission.clientManagement_delete"
@@ -43,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>{{
@@ -74,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="电子地图"
@@ -194,8 +203,10 @@
        form: {},
        query: {},
        showMap: false,
        selectRow:null,
        initFlag: true,
        loading: true,
        menuVisible:false,
        page: {
          pageSize: 10,
          currentPage: 1,
@@ -237,16 +248,18 @@
          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: false,
          selection: true,
          dialogClickModal: false,
          column: [
            {
@@ -255,23 +268,7 @@
              prop: "deviceName",
              searchPlaceholder: "设备名称/编号",
              search: true,
            },
            {
              label: "上级菜单",
              prop: "pid",
              type: "tree",
              dicUrl: "/api/blade-jfpts/catalogs/catalogs/tree",
              hide: true,
              props: {
                label: "title"
              },
              rules: [
                {
                  required: false,
                  message: "请选择上级菜单",
                  trigger: "click"
                }
              ]
              sortable:true,
            },
            {
              label: "到期时间",
@@ -309,6 +306,23 @@
              ]
            },
            {
              label: "使用方",
              prop: "deptId",
              width: 200,
              type: "tree",
              dicUrl: "/api/blade-system/dept/trees",
              props: {
                label: "title"
              },
              rules: [
                {
                  required: false,
                  message: "请选择上级菜单",
                  trigger: "click"
                }
              ]
            },
            {
              label: "序列号",
              prop: "serialNumber",
              hide: true,
@@ -327,12 +341,10 @@
              label: "缴费状态",
              prop: "jfzt",
              slot: true,
              align: "center",
              addDisplay: false,
              editDisplay: false,
            }, {
              label: "布撤防状态",
              align: "center",
              prop: "devicestate",
              type: "select",
              slot: true,
@@ -352,13 +364,25 @@
                  value: "1"
                }
              ]
            }, {
            },
            {
              label: "设备状态",
              align: "center",
              prop: "dxzt",
              slot: true,
              addDisplay: false,
              editDisplay: false,
            },
            {
              label: "故障状态",
              prop: "state",
              addDisplay: false,
              editDisplay: false
            },
            {
              label: "故障原因",
              prop: "reason",
              addDisplay: false,
              editDisplay: false
            },
            {
              label: "设备类型",
@@ -374,6 +398,10 @@
                value: "dictValue"
              },
              dicUrl: "/api/blade-system/dict-biz/child-list?parentId=1357568691367661569",
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "省份",
@@ -390,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: "地市",
@@ -408,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: "区县",
@@ -426,40 +462,77 @@
              dicUrl: "/api/blade-system/region/select?code={{key}}",
              span: 3,
              labelWidth: "0",
              className: "cityClass3"
            },
            {
              label: "权属",
              prop: "ownership",
              width: 150
              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,
              hide: true,
              addDisplay: true,
              editDisplay: true,
              viewDisplay: true,
            },
            {
              label: "负责人电话",
              prop: "onePhone",
              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: "最后上传时间",
              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,
            },

          ]
@@ -472,7 +545,7 @@
      permissionList() {
        return {
          addBtn: this.vaildData(this.permission.clientManagement_add, false),
          viewBtn: this.vaildData(this.permission.clientManagement_view, false),
          viewBtn: this.vaildData(null, false),
          delBtn: this.vaildData(this.permission.clientManagement_delete, false),
          editBtn: this.vaildData(this.permission.clientManagement_edit, false)
        };
@@ -554,7 +627,7 @@
          });
      },
      searchReset() {
        this.treeDeptId = null;
        this.treeDeptId = "";
        this.query = {};
        this.onLoad(this.page);
      },
@@ -629,6 +702,16 @@
            ...this.query
          };
        }

        //在线设备
        if(this.$route.query.dxtype != undefined){
          values = {
            ...params,
            dxtype: this.$route.query.dxtype,
            ...this.query,
          };
        }

        this.loading = true;
        getList(page.currentPage, page.pageSize, values, this.treeDeptId).then(res => {
          const data = res.data.data;
@@ -695,6 +778,7 @@
        });

      }, handleStart(row) {
        row = this.selectRow;
        var arr = [];
        this.$store.state.tags.tagList.forEach(item => {
          if (item.label != "视频") {
@@ -706,13 +790,37 @@
          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>
@@ -725,6 +833,51 @@

  .payWin .el-dialog__body {
    padding-top: 0px !important;
  }


  /*页面样式*/
  .el-card__body .cityClass1 {
    width: 155px;
    padding-right: 0px !important;
  }

  .el-card__body .cityClass2 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .el-card__body .cityClass3 {
    width: 100px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /*新增窗体样式*/
  .el-dialog .cityClass1 {
    width: 220px;
    padding-right: 0px !important;
  }

  .el-dialog .cityClass2 {
    width: 110px;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .el-dialog .cityClass3 {
    width: 110px;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .cityClass2 div label {
    display: none;
  }

  .cityClass3 div label {
    display: none;
  }

  .real-jf-dialog {
@@ -764,4 +917,45 @@
    color: red;
  }

  .tabFontSize{
    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);
  }
  .menu li:hover {
    background-color: rgba(232,237,250,.6);
    color: darkslategrey;
  }
  .menu 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>