fj-dc-ui/.svn/pristine/28/28c622d4bd612602dba5fea67155e24be9f75eb9.svn-base

<!--  -->
<template>
  <div :style="{'height':tableHeight1 + 'px'}">
    <el-button v-if="formIsShow" @click="addProblem" type="primary" style="float: right;margin-bottom: 10px">添加问题</el-button>
    <!-- 查询展示 -->
    <div v-if="formIsShow" :style="{'height':testHeight1+'px'}">
      <el-table
        border
        :height="tableHeight"
        ref="multipleTable"
        :data="searchResult"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" min-width="25" fixed>
          <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}</template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="nm"
          label="督查水源地名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="180"
          prop="inspPblmsName"
          label="问题类别"
          show-overflow-tooltip
        ></el-table-column>
        <!--<el-table-column-->
          <!--header-align="center"-->
          <!--align="center"-->
          <!--min-width="150"-->
          <!--prop="inspPblmName"-->
          <!--label="检查事项"-->
          <!--show-overflow-tooltip-->
        <!--&gt;</el-table-column>-->
        <el-table-column
          header-align="center"
          align="center"
          min-width="180"
          prop="inspPblmDesc"
          label="详细描述"
          show-overflow-tooltip
        ></el-table-column>
        <!-- <el-table-column
                header-align="center"
                align="center"
                min-width="60"
                prop="ifCasePblm"
                label="典型"
              >
                <template slot-scope="scope">
                  <p v-if="scope.row.ifCasePblm == 1">是</p>
                  <p v-if="scope.row.ifCasePblm == 0">否</p>
                </template>
        </el-table-column>-->

        <el-table-column
          header-align="center"
          align="center"
          min-width="60"
          prop="persName"
          label="上报人"
        ></el-table-column>
        <!--<el-table-column-->
          <!--header-align="center"-->
          <!--align="center"-->
          <!--min-width="80"-->
          <!--show-overflow-tooltip-->
          <!--prop="orgNm"-->
          <!--label="所在组"-->
        <!--&gt;</el-table-column>-->

        <el-table-column
          prop="collTime"
          label="上报时间"
          :formatter="timestampToTime"
          sortable
          align="center"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
                align="center"
                prop
                min-width="130"
                label="操作"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button icon="el-icon-view"  title="查看详情"type="text" @click="showDetails(scope.row.pblmId)"></el-button>
                  <el-button v-if="ownPriv('manage')" icon="el-icon-edit" type="text" title="修改问题" @click="changeSup(scope.row.pblmId)"></el-button>
                  <el-button v-if="ownPriv('manage')"
                    icon="el-icon-delete"
                    type="text"
                     title="删除问题" @click="removeSuperviseOne(scope.row.pblmId)"
                  ></el-button>
                </template>
              </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div>
        <el-pagination
          class="paginationCenter"
          background
          @size-change="handleSizeChange"
          @current-change="search"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div v-if="!formIsShow" class="popupContentClass" :style="{'height':testHeight1+'px'}">
      <el-table
        border
        :height="tableHeight"
        ref="multipleTable"
        :data="searchResult"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" min-width="50">
          <template slot-scope="scope">{{ (currentPage - 1) * pageSize + (scope.$index + 1) }}</template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="130"
          prop="nm"
          label="督查水源地名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="180"
          prop="inspPblmsName"
          label="问题类别"
          show-overflow-tooltip
        ></el-table-column>
        <!--<el-table-column-->
          <!--header-align="center"-->
          <!--align="center"-->
          <!--min-width="150"-->
          <!--prop="inspPblmName"-->
          <!--label="检查事项"-->
          <!--show-overflow-tooltip-->
        <!--&gt;</el-table-column>-->
        <el-table-column
          header-align="center"
          align="center"
          min-width="180"
          prop="inspPblmDesc"
          label="详细描述"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="persName"
          label="上报人"
        ></el-table-column>
        <el-table-column
          prop="collTime"
          label="上报时间"
          :formatter="timestampToTime"
          sortable
          align="center"
          min-width="120"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop
          min-width="130"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button icon="el-icon-view"  title="查看详情"type="text" @click="showDetails(scope.row.pblmId)"></el-button>
            <el-button v-if="ownPriv('manage') && formIsShow" icon="el-icon-edit" type="text" title="修改问题" @click="changeSup(scope.row.pblmId)"></el-button>
            <el-button v-if="ownPriv('manage') && formIsShow"
                       icon="el-icon-delete"
                       type="text"
                        title="删除问题" @click="removeSuperviseOne(scope.row.pblmId)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div>
        <el-pagination
          class="paginationCenter"
          background
          @size-change="handleSizeChange"
          @current-change="search"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <!-- 详情弹框 -->
    <el-dialog
      class="outerDialog custom_dialog"
      title="问题详情"
      :visible.sync="supervisionDetailsVisible"
      v-if="supervisionDetailsVisible"
      :append-to-body="true"
    >
      <supervision-details ref="xianqing" :problemId="currentProblemId" :objType="13"></supervision-details>
      <span slot="footer">
        <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
      </span>
    </el-dialog>
    <problemEdit :editId="updateIdXiuGai" v-if="problemEditDialog" @closeEditDialog="closeEditDialog"></problemEdit>
    <!-- 删除的弹窗 -->
    <el-dialog class="deleteDialog" title="问题删除描述" :visible.sync="problemDeleteVisible" :append-to-body="true">
      <Problem-delete
        ref="deleteMiaoShu"
        :deleteProblemId="deleteId"
        @deleteSuccess="deleteSuccess"
      ></Problem-delete>
      <span slot="footer">
        <el-button @click="problemDeleteVisible = false">返回</el-button>
      </span>
    </el-dialog>

    <problemDialog
      v-if="showAddProblemDialog"
      objName="水源地"
      @closeDialog="closePlDialog"
      :currentObjectRgstrId="currentObjectRgstrId"
      :objId="currentObjectId"
      :showAddProblemDialog="showAddProblemDialog">
    </problemDialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  findPageInfoShuiKu,
  getShuiKuWenTi,
  getXSKProblemNewExport,
  findPageInfo,
  getSzwtTable,
  removeSupervise,
  showDetailsXq,
  submitUpload,
  creatSupervise,
  getSupervisdByID,
  deleteFileById,
  updatelist,
  getEngId,

} from "../../api/duChaAPI.js";
import request from "../../utils/gw_ajax_request.js";
import { hostUrl } from "@util/global_variable.js";
import elaudio from "../../widgets/elAudioShort.vue";
import inuptWithDuChaTreeNode from "../../widgets/inuptWithDuChaTreeNode.vue";
import inputWidthDuChaNodes from "../../widgets/inputWithDuChaNodes.vue";
import inputWidthDuChaShuiKu from "../../widgets/inputWith_sk.vue";
import problemDialog from "../duChaWenTi/addProblem/problem_dialog";
import problemEdit from "../duChaWenTi/shuiYuanDiProblemModify"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    //详情页
    supervisionDetails: resolve => {
      require(["../duChaWenTi/supervisionDetails_shuiku.vue"], resolve);
    },
    upload: resolve => {
      require(["../../widgets/uploadFile.vue"], resolve);
    },
    // 删除描述页
    ProblemDelete: resolve => {
      require(["../duChaWenTi/problemDelete.vue"], resolve);
    },
    problemEdit:problemEdit,
    elaudio: elaudio,
    inuptWithDuChaTreeNode: inuptWithDuChaTreeNode,
    inputWidthDuChaNodes: inputWidthDuChaNodes,
    inputWidthDuChaShuiKu: inputWidthDuChaShuiKu,
    problemDialog: problemDialog
  },
  props: ["activedName","currentResCode","currentObjectRgstrId","currentObjectName","szRuls","currentObjectId","showOrEdit","swhsId"],
  data() {
    //这里存放数据
    return {
      tableHeight: window.innerHeight * .45,
      tableHeight1: window.innerHeight * .55,
      supervisionState: [
        {
          value: "0",
          label: "一般"
        },
        {
          value: "1",
          label: "较重"
        },
        {
          value: "2",
          label: "严重"
        },
        {
          value: "3",
          label: "特别严重"
        }
      ],
      supervision: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        }
      ],
      updateIdXiuGai: "",
      pblmId: "",
      addPicPanel: false,
      supervisionDetailsVisible:false,
      currentProblemId: "",
      currentPage: 1, // 页码
      pageSize: 20,
      loading: false,
      total: 0, // 总数
      searchResult: [], // 结果
      userId: localStorage.getItem("userid"),
      pictureArray: [],
      audioArray: [],
      videoArray: [],
      audiotabName: "",
      videotabName: "",
      picturetabName: "",
      deleteId: "",
      playerOptions: {
        height: "120",
        autoplay: true,
        muted: true,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          },
          {
            type: "video/mp4",
            // mp4
            src: "http://vjs.zencdn.net/v/oceans.mp4"
            // webm
            // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }
        ]
      },
      changeSupervisionVisible: false,
      changeSupervisionLoading: false,
      changeSupervision: {
        nm: "",
        presId: localStorage.getItem("userid"),
        endTime: "",
        pblmId: "",
        objId: "",
        objType: "",
        inspGroupId: "",
        inspPblmName: "",
        inspPblmDesc: "",
        pblmLong: "",
        pblmLat: "",
        pblmStat: "",
        ifCasePblm: "",
        inspPblmOrgName: "",
        pblmPersName: "",
        inspPblmCate: "",
        reviOpin: "",
        reviConc: "",
        reviOrgGuid: "",
        collTime: "",
        recPers: "",
        gwComFiles: [
          {
            id: "",
            filePath: "",
            bizId: ""
          }
        ]
      },
      // 文件弹框
      fileList: [], // 当前文件列表
      flash: false,
      // 督查类型
      supervisionTypeList: [
        {
          value: "1",
          label: "小水库"
        }
      ],
      leibie: [],
      // 查询
      value6: [],
      findParams: {
        hasVedio:"",
        adCode: "",
        pblmStat: "",
        inspPblmCate: "",
        ifCasePblm: "",
        nm: "",
        rsName: "",
        adFullName: "",
        startTime: "",
        endTime: "",
        objType: 1,
        inspPblmName: "",
        persId: localStorage.getItem("userid")
      },
      currentPage: 1, // 页码
      pageSize: 20, // 条数
      loading: false,
      total: 0, // 总数
      searchResult: [], // 结果
      crId: "", // 当前督查id
      // 督查详情
      userid: localStorage.getItem("userid"),
      supervisionDetailsVisible: false,
      problemDeleteVisible: false,
      supervisionDetails: {},
      pblmId: "",
      gwComFiles: [],
      pblscr: "",
      pblscrList: [
        {
          lable: "我的问题",
          value: localStorage.getItem("userid")
        }
      ],
      pblscrGroup: "",
      showAddProblemDialog: false,
      formIsShow: true,
      problemEditDialog: false

    };
  },
  //监听属性 类似于data概念
  computed: {
    hostUrl(){
        return hostUrl
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.showOrEdit === "show") {
      this.formIsShow = false;
    } else {
      this.formIsShow = true;
    }
    this.addPicPanel = false;
    if (this.userId) {
      console.log("已经登录");
      this.search();
    } else {
      this.$router.push("/login");
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.search();
  },
  //监控data中的数据变化
  watch: {
    activedName(n,o) {
      if(n == '问题清单'){
        this.search();
      }
    },
    currentObjectRgstrId(){
      this.search();
    }
  },
  //方法集合

  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search();
    },
    // 查询
    search() {
      this.loading = true;
      let _self = this;
      let data = {};
      // data["gateName"] = "";
      // data["inspPblmName"] = "";
      data["objType"] = "13";
      data["presId"] = _self.userId;
      data["pageNum"] = _self.currentPage;
      data["regid"] = _self.currentObjectRgstrId;
      data["pageSize"] = _self.pageSize;
      data["villType"] = "13";
      // data["codes"] = _self.currentResCode;
      findPageInfo(data).then(res => {
        _self.loading = false;
        if (res.success) {
          _self.searchResult = res.data.list;
          _self.total = res.data.total;
        } else {
        }
      });
    },
    timestampToTime(row, column) {
      var date = new Date(row.collTime);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    // 详情弹框
    showDetails(id) {
      this.currentProblemId = id;
      this.supervisionDetailsVisible = true;
    },
     // 修改弹窗显示
    changeSup(id) {
      this.updateIdXiuGai = id;
      this.problemEditDialog = true;
    },
    closeEditDialog(){
      this.problemEditDialog = false;
      this.currentProblemId = "";
      this.search();
    },
    // 提交修改信息
    changeSupervisionInfo() {
      this.changeSupervisionVisible = true;
      this.$refs.changeSupFrom.validate(valid => {
        if (valid) {
          this.changeSupervisionLoading = true;
          let data = this.changeSupervision;
          if (!this.changeSupervision.inspPblmDesc) {
            this.$message.warning('请填写详细描述');
            return
          }
          updatelist(data).then(res => {
            this.pblmId = res.data.pblmId;
            this.gwComFiles = res.data.gwComFiles;
            if (res.success) {
                this.removeNewSupervision();
              this.successInfo();
              if (this.$refs.uploadFile.submitUpload(data.pblmId)) {
                  this.removeNewSupervision();
                  this.successInfo();
                  this.addPicPanel = false;
                  this.changeSupervisionLoading = false;
              }
            } else {
              this.failInfo();
            }
          });
        }
      });
    },
    removeNewSupervision(arg) {
      if (arg) {
        console.log(arg);
        var args = this.gwComFiles.concat(arg);
        this.updatefilelist(args);
      }
      this.search();
      this.gwComFiles = [];
      this.newSupervisionVisible = false;
      this.changeSupervisionVisible = false;
      this.newSupervision = {
        id: "",
        checkPoint: "",
        presId: localStorage.getItem("userid"),
        dataStat: "",
        nm: "",
        endTime: "",
        pblmId: "",
        objId: "",
        objType: "",
        inspGroupId: "",
        inspPblmCate: "",
        inspPblmName: "",
        inspPblmDesc: "",
        pblmLong: "",
        pblmLat: "",
        pblmStat: "",
        ifCasePblm: "",
        inspPblmOrgName: "",
        pblmPersName: "",
        inspPblmCate: "",
        reviOpin: "",
        reviConc: "",
        reviOrgGuid: "",
        collTime: "",
        recPers: "",
        note: ""
      };
      // this.$refs.uploadFile.init();
    },
    // 删除图片文件
    removeFile(id, index) {
      // this.updateIdXiuGai = this.updateIdXiuGai;
      var _self = this;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "返回",
        type: "warning"
      }).then(
        res => {
          if (res === "confirm") {
            deleteFileById(id, this.userId).then(res => {
              if (res.success) {
                // this.changeSupervision.gwComFiles.splice(index, 1);
                this.changeSupervision.gwComFiles.forEach(item => {
                  if (
                    item.fileExt == "mp3" ||
                    item.fileExt == "MP3" ||
                    item.fileExt == "m4a"
                  ) {
                    this.audiotabName.splice(index, 1);
                  } else if (
                    item.fileExt == "jpg" ||
                    item.fileExt == "JPG" ||
                    item.fileExt == "png" ||
                    item.fileExt == "PNG" ||
                    item.fileExt == "JPEG" ||
                    item.fileExt == "jpeg"
                  ) {
                    this.pictureArray.splice(index, 1);
                  } else if (item.fileExt == "mp4" || item.fileExt == "MP4") {
                    this.videoArray.splice(index, 1);
                  }
                });
                _self.changeSup(this.updateIdXiuGai);
              } else {
                this.failInfo();
              }
            });
          }
        },
        res => {
          console.log("返回");
        }
      );

    },
    // 操作成功反馈
    successInfo() {
      this.$message({
        type: "success",
        message: "操作成功!"
      });
    },
    // 操作失败反馈
    failInfo(val) {
      this.$message.error(val);
    },
    // 清空选择
    toggleSelection(rows) {
      this.$refs.multipleTable.clearSelection();
    },
    // 已选择项
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 文件上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    addPic() {
      this.addPicPanel = !this.addPicPanel;
    },
    // 删除弹窗
    removeSuperviseOne(id) {
      this.deleteId = id;
      this.problemDeleteVisible = true;
    },
    deleteSuccess() {
      this.problemDeleteVisible = false;
      this.search();
    },
    changeSupervisionVisiblefalse() {
      this.$nextTick(() => {
        if (this.flash) {
          this.flash = false;
          this.search();

        }
      });

      this.changeSupervisionVisible = false;
      this.changeSupervision = {
        dataStat: "",
        nm: "",
        endTime: "",
        pblmId: "",
        objId: "",
        objType: "",
        inspGroupId: "",
        inspPblmCate: "",
        inspPblmName: "",
        inspPblmDesc: "",
        pblmLong: "",
        pblmLat: "",
        pblmStat: "",
        ifCasePblm: "",
        inspPblmOrgName: "",
        pblmPersName: "",
        inspPblmCate: "",
        reviOpin: "",
        reviConc: "",
        reviOrgGuid: "",
        collTime: "",
        recPers: "",
        note: "",
        gwComFiles: [
          {
            id: "",
            filePath: "",
            bizId: ""
          }
        ]
      };
      this.$refs.uploadFile.init();
      this.addPicPanel = false;
    },
    addProblem: function() {
      this.showAddProblemDialog = true;
    },
    closePlDialog(val) {
      this.showAddProblemDialog = false;
      this.search()
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../duChaWenTi/base.css";
@import url("/src/assets/iconfont/iconfont.css");
@import url("/src/assets/css/mixin.scss");
.upload-container {
  width: 100%;
  position: relative;
  .image-uploader {
    width: 35%;
    float: left;
  }
  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    // margin-left: 50px;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
      .el-icon-delete {
        font-size: 36px;
      }
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
  .image-app-preview {
    margin-bottom: 10px;
    width: 40vh;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    // margin-left: 50px;
    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
#wenTiContainer_sk .el-tree-node {
  /* overflow: auto; */
}

#wenTiContainer_sk .el-tree-node > .el-tree-node__children {
  overflow: auto;
}

.shuiku .el-date-editor.el-input {
  min-width: 180px !important;
}

.shuiku .header {
  padding: 0px 10px;
}

.shuiku .el-row {
  margin-bottom: 5px;
}

.shuiku .content {
  margin: 10px;
}

/* .search .el-table>>>.el-tooltip {
    white-space: pre-wrap !important;
    line-height: 30px;
    font-size: 0;
} */

.shuiku .search >>> .el-table .el-button:nth-child(odd) {
  margin-left: 0 !important;
}

.custom_dialog .el-dialog {
  width: 60% !important;
}

.custom_dialog .scroll300 {
  max-height: 60vh !important;
}

.shuiku .el-tag + .el-tag {
  margin-left: 10px;
}

.shuiku .button-new-tag {
  margin-left: 10px;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

.shuiku .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>