设备管理小样

mark

2022-10-21 1fe240406526b9b6256664559d3d2bec9250135c

 src/views/equipmentManagement/equipmentList/components/FormList.vue

@@ -3,6 +3,54 @@
    <div class="search">
      <div class="left">
        <div class="id">
          <div class="left-txt">设备名称/ID</div>
          <el-input class="id-input" v-model="inputText" placeholder="请输入设备名称/ID"></el-input>
        </div>

        <div class="time">
          <div class="left-txt">设备安装时间</div>

          <el-date-picker
            style="width: 380px"
            v-model="searchTime"
            @change="searchingBtn"
            type="datetimerange"
            size="small"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          ></el-date-picker>
        </div>

        <div class="cluster">
          <div class="left-txt">所属集群</div>
          <div class="cluster-select">
            <el-select style="width: 200px" v-model="cluster" placeholder="请选择所属集群">
              <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="button searchBtn" @click="searchingBtn">搜索</div>
        <div class="button resetBtn" @click="clearSearch">重置</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="btns">
      <div class="button add" @click="isShowAdd = true">
        <img src="@/assets/img/add.png" alt="" />
        <div class="button-txt">添加设备</div>
      </div>
      <div class="button export" @click="exportFile">
        <div class="iconfont">&#xe614;</div>
        <div class="button-txt">导出</div>
      </div>
    </div>

    <!-- <div class="left">
        <div class="id">
          设备名称/ID
          <el-input v-model="inputText" placeholder="请输入"></el-input>
        </div>
@@ -23,35 +71,28 @@
        <div class="cluster">
          所属集群
          <el-select v-model="cluster" placeholder="请选择">
            <el-option
              v-for="item in clusterArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            <el-option v-for="item in clusterArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      </div> -->

      <div class="right">
        <div class="button searchBtn" @click="searchingBtn">搜索</div>
        <div class="button resetBtn" @click="clearSearch">重置</div>
      </div>
    </div>
    <!-- <el-table-column label="首次使用时间" min-width="159">
          <template slot-scope="scope">
            <div v-if="scope.row.firstUseTime.length > 1">
              <div>{{ scope.row.firstUseTime[0] }}</div>
              <div>{{ scope.row.firstUseTime[1] }}</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column> -->

    <div class="btns">
      <div class="button add" @click="isShowAdd = true">
        <span>+</span>添加设备
      </div>
      <div class="button export" @click="exportFile">
        <span class="iconfont">&#xe614;</span>导出
      </div>
    </div>

    <!-- height="50" 
        -->
    <div class="table-area">
      <el-table
        id="multipleTable"
        :header-cell-style="{ height: '50px' }"
        ref="multipleTable"
        tooltip-effect="dark"
        :data="dataList"
@@ -60,27 +101,11 @@
        :stripe="true"
      >
        <el-table-column label="序号" width="80" class-name="index">
          <template slot-scope="scope">{{
            scope.$index + 1 + (page - 1) * size
          }}</template>
          <template slot-scope="scope">{{ scope.$index + 1 + (page - 1) * size }}</template>
        </el-table-column>
        <el-table-column
          prop="devId"
          label="设备ID"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="devName"
          label="设备名称"
          min-width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="devIp"
          label="IP地址"
          min-width="150"
        ></el-table-column>
        <el-table-column prop="devId" label="设备ID" min-width="210" show-overflow-tooltip></el-table-column>
        <el-table-column prop="devName" label="设备名称" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="devIp" label="IP地址" min-width="150"></el-table-column>
        <el-table-column label="安装时间" min-width="159">
          <template slot-scope="scope">
            <div v-if="scope.row.installTime.length > 1">
@@ -90,15 +115,6 @@
            <div v-else>--</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="首次使用时间" min-width="159">
          <template slot-scope="scope">
            <div v-if="scope.row.firstUseTime.length > 1">
              <div>{{ scope.row.firstUseTime[0] }}</div>
              <div>{{ scope.row.firstUseTime[1] }}</div>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column> -->

        <el-table-column label="所属集群" show-overflow-tooltip min-width="154">
          <template slot-scope="scope"> {{ scope.row.clusterName }} </template>
@@ -113,12 +129,7 @@

        <el-table-column label="操作" min-width="180">
          <template slot-scope="scope">
            <!-- 加入 -->
            <el-tooltip
              content="加入集群"
              placement="top"
              v-if="!scope.row.clusterId"
            >
            <el-tooltip content="加入集群" placement="top" v-if="!scope.row.clusterId">
              <span
                class="iconfont option"
                @click="joinCluster(scope.row)"
@@ -126,7 +137,7 @@
                >&#xe640;</span
              >
            </el-tooltip>
            <!-- 退出 -->

            <el-tooltip content="退出集群" placement="top" v-else>
              <span
                class="iconfont option"
@@ -135,7 +146,7 @@
                >&#xe63c;</span
              >
            </el-tooltip>
            <!-- 算法详情 -->

            <el-tooltip content="应用详情" placement="top">
              <span
                class="iconfont option"
@@ -144,7 +155,7 @@
                >&#xe621;</span
              >
            </el-tooltip>
            <!-- 设备详情 -->

            <el-tooltip content="设备详情" placement="top">
              <span
                class="iconfont option"
@@ -153,12 +164,9 @@
                >&#xe619;</span
              >
            </el-tooltip>
            <!-- 解绑 -->

            <el-tooltip content="解除绑定" placement="top">
              <span
                class="iconfont option"
                @click="Untying(scope.row)"
                :class="{ disable: scope.row.isOnline != 1 }"
              <span class="iconfont option" @click="Untying(scope.row)" :class="{ disable: scope.row.isOnline != 1 }"
                >&#xe617;</span
              >
            </el-tooltip>
@@ -166,7 +174,7 @@
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
        <!-- <el-pagination
          @current-change="refrash"
          @size-change="handleSizeChange"
          :current-page="page"
@@ -175,62 +183,46 @@
          :page-sizes="[5, 10, 15, 20, 25]"
          :total="total"
          background
        ></el-pagination>
        ></el-pagination> -->
      </div>
    </div>

    <!-- 解绑弹窗 -->
    <UnbindBox
      @close="closeUnbindBox"
      v-if="isShowUnbind"
      :id="unbindId"
      @reflash="reflash"
    ></UnbindBox>
    <UnbindBox @close="closeUnbindBox" v-if="isShowUnbind" :id="unbindId" @reflash="reflash"></UnbindBox>

    <!-- 添加设备弹窗 -->
    <AddBox @close="closeAddBox" v-if="isShowAdd"></AddBox>

    <!-- 退出集群弹窗 -->
    <QuitClusterBox
      :equipment="activeEquipment"
      v-if="showQuit"
      @close="showQuit = false"
    ></QuitClusterBox>
    <QuitClusterBox :equipment="activeEquipment" v-if="showQuit" @close="showQuit = false"></QuitClusterBox>

    <!-- 加入集群弹窗 -->
    <JoinClusterBox
      :equipment="activeEquipment"
      v-if="showJoin"
      @close="showJoin = false"
    ></JoinClusterBox>
    <JoinClusterBox :equipment="activeEquipment" v-if="showJoin" @close="showJoin = false"></JoinClusterBox>
  </div>
</template>

<script>
import {
  findDevList,
  findClustersBySearch,
  exportDevListExcel,
} from "@/api/device";
import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox";
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox";
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox";
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox";

import bus from "@/plugin/bus";

import { findDevList, findClustersBySearch, exportDevListExcel } from "@/api/device"
import AddBox from "@/views/equipmentManagement/equipmentList/components/AddBox"
import UnbindBox from "@/views/equipmentManagement/equipmentDetail/components/UnbindBox"
import QuitClusterBox from "@/views/equipmentManagement/equipmentList/components/QuitClusterBox"
import JoinClusterBox from "@/views/equipmentManagement/equipmentList/components/JoinClusterBox"
import add from "@/assets/img/add.png"
import bus from "@/plugin/bus"
import "./FormList.scss"
export default {
  components: {
    AddBox,
    UnbindBox,
    QuitClusterBox,
    JoinClusterBox,
    JoinClusterBox
  },
  created() {
    this.getCluster();
    this.getCluster()
  },
  data() {
    return {
      add,
      searchTime: [], //搜索时间
      page: 1,
      size: 10, //分页相关
@@ -244,8 +236,8 @@
      cluster: null, //选中的集群类型
      showQuit: false, //展示退出集群的弹窗
      showJoin: false, //展示加入集群的弹窗
      activeEquipment: null, //处理中的设备
    };
      activeEquipment: null //处理中的设备
    }
  },
  methods: {
    async getCluster() {
@@ -253,47 +245,47 @@
        InputText: "",
        Page: 1,
        Size: 10000,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
      });
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id
      })
      if (res && res.success) {
        res.data.list.forEach((item) => {
          this.clusterArr.push({
            label: item.clusterName,
            value: item.clusterId,
          });
        });
            value: item.clusterId
          })
        })
      }
    },

    // 跳到设备详情
    checkDetail(row) {
      if (row.isOnline != 1) {
        return;
        return
      }
      this.$router.push({
        path: "/equipmentDetail",
        query: {
          id: row.devId,
        },
      });
          id: row.devId
        }
      })
    },

    // 跳到算法详情
    algorithmDetail(row) {
      if (row.isOnline != 1) {
        return;
        return
      }
      this.$router.push({
        path: "/algorithmDetail",
        query: {
          id: row.devId,
        },
      });
          id: row.devId
        }
      })
    },

    // 查询列表
    searchingBtn() {
      let param = {};
      let param = {}

      if (!this.searchTime) {
        param = {
@@ -302,8 +294,8 @@
          startTime: "",
          endTime: "",
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      } else {
        param = {
          page: this.page,
@@ -311,112 +303,109 @@
          startTime: this.searchTime[0],
          endTime: this.searchTime[1],
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      }

      findDevList(param)
        .then((res) => {
          this.dataList = res.data.list;
          this.dataList = res.data.list
          //时间分行显示
          this.dataList.forEach((item) => {
            item.installTime = item.installTime.split(" ");
            item.firstUseTime = item.firstUseTime.split(" ");
          });
          this.total = res.data.total;
            item.installTime = item.installTime.split(" ")
            item.firstUseTime = item.firstUseTime.split(" ")
          })
          this.total = res.data.total
          if (res.data.total <= this.size) {
            this.page = 1;
            this.page = 1
          }

          bus.$emit("refleshNode", this.dataList);
          bus.$emit("refleshNode", this.dataList)
        })
        .catch((err) => {
          console.log(err);
        });
          console.log(err)
        })
    },

    //分页功能
    handleSizeChange(size) {
      this.size = size;
      this.searchingBtn();
      this.size = size
      this.searchingBtn()
    },
    //分页功能
    refrash(page) {
      this.page = page;
      this.searchingBtn();
      this.page = page
      this.searchingBtn()
    },

    //解绑按钮
    Untying(row) {
      if (row.isOnline != 1) {
        return;
        return
      }
      this.unbindId = row.devId;
      this.isShowUnbind = true;
      this.unbindId = row.devId
      this.isShowUnbind = true
    },

    //获得默认时间
    getDateInit() {
      // 要求 默认一个月
      const end = new Date();
      const start = new Date();
      const nowDate = new Date();
      nowDate.setHours(0);
      nowDate.setMinutes(0);
      nowDate.setSeconds(0);
      nowDate.setMilliseconds(0);
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30);
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1);
      return [
        this.$moment(start).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(end).format("YYYY-MM-DD HH:mm:ss"),
      ];
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },

    //关闭新增弹窗
    closeAddBox() {
      this.isShowAdd = false;
      this.searchingBtn();
      this.isShowAdd = false
      this.searchingBtn()
    },
    // 关闭解绑弹窗
    closeUnbindBox() {
      this.isShowUnbind = false;
      this.isShowUnbind = false
    },

    //解绑成功回调
    reflash() {
      this.isShowUnbind = false;
      this.searchingBtn();
      this.isShowUnbind = false
      this.searchingBtn()
    },

    clearSearch() {
      this.searchTime = this.getDateInit();
      this.inputText = "";
      this.cluster = "";
      this.searchingBtn();
      this.searchTime = this.getDateInit()
      this.inputText = ""
      this.cluster = ""
      this.searchingBtn()
    },

    //退出集群
    quitCluster(equipment) {
      if (equipment.isOnline != 1) {
        return;
        return
      }
      this.activeEquipment = equipment;
      this.showQuit = true;
      this.activeEquipment = equipment
      this.showQuit = true
    },

    //加入集群
    joinCluster(equipment) {
      if (equipment.isOnline != 1) {
        return;
        return
      }
      this.activeEquipment = equipment;
      this.showJoin = true;
      this.activeEquipment = equipment
      this.showJoin = true
    },

    //导出列表文件
    async exportFile() {
      let param = {};
      let param = {}

      if (!this.searchTime) {
        param = {
@@ -425,8 +414,8 @@
          startTime: "",
          endTime: "",
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      } else {
        param = {
          page: this.page,
@@ -434,224 +423,246 @@
          startTime: this.searchTime[0],
          endTime: this.searchTime[1],
          clusterId: this.cluster,
          inputText: this.inputText,
        };
          inputText: this.inputText
        }
      }
      const result = await exportDevListExcel(param);
      const result = await exportDevListExcel(param)

      var blob = new Blob([result.body.data], {
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
        }),
        Temp = document.createElement("a");
        Temp = document.createElement("a")

      Temp.href = window.URL.createObjectURL(blob);
      Temp.href = window.URL.createObjectURL(blob)
      Temp.download = window.decodeURI(result.fileName)

      console.log(result);
      console.log(result.fileName);
      Temp.setAttribute("download", result.fileName)

      Temp.download = window.decodeURI(result.fileName);
      document.body.appendChild(Temp)

      Temp.setAttribute("download", result.fileName);
      Temp.click()

      document.body.appendChild(Temp);
      document.body.removeChild(Temp)

      Temp.click();

      document.body.removeChild(Temp);

      window.URL.revokeObjectURL(Temp);
    },
      window.URL.revokeObjectURL(Temp)
    }
  },
  mounted() {
    this.searchingBtn();
  },
};
    this.searchingBtn()
  }
}
</script>

<style scoped lang="scss">
.FormList {
  width: 1280px;
  // padding: 0 24px;
  // background: #36b24a;
  background-color: #1f2a3e;
  border-radius: 18px;
  // background: #34405a;
  .search {
    // margin-bottom: ;
    display: flex;
    justify-content: space-between;
    padding: 60px 0 30px 0;
    font-size: 14px;
    border-bottom: 1px solid #e9ebee;
    background-color: #fff;

    .left,
    .right,
    .id,
    .time,
    .cluster {
    padding: 24px;
    .left {
      display: flex;
      align-items: center;
    }
      .left-txt {
        // height: 20px;
        white-space: nowrap;
        font-family: PingFang SC Regular;
        font-size: 14px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #ffffff;
        margin-right: 16px;
      }
      .id,
      .time,
      .cluster {
        display: flex;
        align-items: center;
        padding-right: 24px;
      }
      .id ::v-deep .el-input .el-input__inner {
        width: 150px;
        height: 32px;
        border-radius: 3px;
        background: rgb(0, 0, 0, 0.2) !important;
      }
      .cluster::v-deep .el-input {
        width: 250px;
        height: 32px;
        // margin-left: 10px;
        // margin-right: 20px;

    .cluster {
      .el-select {
        width: 190px;
        height: 40px;
        line-height: 40px;
        input {
          border-radius: 1px;
          &::-webkit-input-placeholder {
            color: #999;
          }

        ::v-deep input {
          height: 40px;
          // &:focus {
          //   border-color: #0065ff;
          // }
        }
      }
      .cluster {
        // .cluster-select {
        //   width: 150px;
        // }
        .el-select {
          width: 150px;
          .el-input .el-input--suffix {
            width: 150px !important;
            // border-radius: 3px;
          }
          // height: 32px;
          // line-height: 32px;

        .el-icon-arrow-up {
          line-height: 40px;
        }

        ::v-deep .el-icon-arrow-up {
          height: 40px;
          // ::v-deep input {
          //   height: 32px;
          // }
          // el-select__caret el-input__icon el-icon-arrow-up
          ::v-deep .el-input__icon {
            line-height: 28px !important;
          }
        }
      }
    }

    .id .el-input ::v-deep {
      width: 180px;
    }

    .cluster::v-deep .el-input {
      width: 156px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;

      input {
        border-radius: 0;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
    .right {
      display: flex;
      align-items: center;
      .button {
        font-family: PingFang SC Regular;
        font-size: 14px;
        font-weight: normal;
        line-height: 32px;
        letter-spacing: 0px;
        padding: 0 16px;
        border-radius: 3px;
        margin: 0 4px;
      }
    }

    .el-input ::v-deep {
      width: 270px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;

      input {
        border-radius: 0;
        &::-webkit-input-placeholder {
          color: #999;
        }

        &:focus {
          border-color: #0065ff;
        }
      .searchBtn {
        background: #0082bc;
        color: #ffffff;
      }
    }

    .el-date-editor {
      width: 340px;
      height: 40px;
      margin-left: 10px;
      margin-right: 20px;
      border-radius: 0;

      &::-webkit-input-placeholder {
        color: #999;
      .resetBtn {
        border: 1px solid #0082bc;
        color: #0082bc;
      }

      &.is-active {
        border-color: #0065ff;
      }
    }

    .searchBtn {
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      background: #0065ff;
      margin-right: 20px;
    }

    .resetBtn {
      width: 110px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #0065ff;
      border: 1px solid #0065ff;
    }
  }

  .line {
    border: 1px solid #ffffff;
    opacity: 0.2;
    margin: 0 24px;
  }
  .btns {
    padding: 24px 24px;
    display: flex;
    margin: 30px 0;
    text-align: center;
    line-height: 40px;
    justify-content: flex-start;
    .button {
      padding: 0 16px;
      margin: 0 4px;

    .add {
      margin-right: 20px;
      width: 140px;
      height: 40px;
      background: #0065ff;
      color: #fff;
      span {
        margin-right: 10px;
        font-weight: 700;
        font-size: 18px;
      border-radius: 3px;
      font-family: PingFang SC Regular;
      font-size: 14px;
      font-weight: normal;
      line-height: 32px;
      letter-spacing: 0px;
      display: flex;
      align-items: center;
      .button-txt {
        margin-left: 10px;
      }
      .iconfont {
        // width: 12px;
        // height: 12px;
        // line-height: 12px;
        font-size: 16px;
      }
    }

    .add {
      background: #0082bc;
      color: #ffffff;
    }
    .export {
      width: 140px;
      height: 40px;
      border: 1px solid #0065ff;
      color: #0065ff;

      span {
        margin-right: 10px;
        font-size: 18px;
      }
      border: 1px solid #0082bc;
      color: #0082bc;
    }
  }

  .table-area {
    // min-height: 600px;
    padding: 0 24px 24px;
  }
  .table-area >>> .el-table__row > td {
    border: none !important;
  }
  .el-table::before {
    height: 0; //表格的线
  }
  // .el-table,
  .el-table ::v-deep {
    background-color: rgb(233, 235, 238);
    // background-color: rgb(233, 235, 238);
    padding: 1px;
    // .el-table__expanded-cell {
    //   background-color: transparent !important;
    // }
    // .el-table__header {
    //   background: rgba(255, 255, 255, 0.18) !important;
    // }

    &::after {
      display: none;
    }
    // .el-table th,
    // .el-table tr {
    //   background-color: transparent !important;
    // }

    td.index .cell {
      padding-left: 16px;
      padding-right: 4px;
    }
    // .el-table tr
    // &::after {
    //   display: none;
    // }

    // td.index .cell {
    //   padding-left: 16px;
    //   padding-right: 4px;
    // }

    .has-gutter tr th {
      background: #f0f3f5;
      // background: #f0f3f5;
      font-size: 16px;
      color: #3d3d3d;
      color: #ffffff;
      font-weight: 700;

      font-family: PingFangSC-Bold;
      font-size: 12px;
      font-weight: normal;
      line-height: 20px;
      letter-spacing: 0px;
    }

    td .cell {
      color: #3d3d3d;
    }
    // td .cell {
    //   color: #3d3d3d;
    // }

    tr:hover > td.el-table__cell {
      background-color: #fff;
      background: rgba(255, 255, 255, 0.08) !important;
    }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
    .el-table__row .el-table__cell {
      background-color: transparent !important;
    }
    tr:hover > td.el-table__cell {
      background-color: #fff;
    }
    // tr:hover > td.el-table__cell {
    //   // background-color: #fff;
    // }

    .el-table__row--striped .el-table__cell {
      background-color: #f0f5fa !important;
      background-color: transparent !important;
    }

    .status {
@@ -665,7 +676,7 @@
    .option {
      margin-right: 10px;
      font-size: 24px;
      color: rgb(0, 101, 255);
      color: #0082bc;
      cursor: pointer;

      &.disable {
@@ -675,60 +686,60 @@
    }
  }

  .el-pagination ::v-deep {
    margin-top: 30px;
    text-align: right;
    height: 24px;
    .el-pagination__sizes {
      margin-right: 0;
    }
  // .el-pagination ::v-deep {
  //   margin-top: 30px;
  //   text-align: right;
  //   height: 24px;
  //   .el-pagination__sizes {
  //     margin-right: 0;
  //   }

    button {
      margin: 0;
      background-color: #fff;
      border: 1px solid #c0c5cc;
      border-radius: 2px;
    }
  //   button {
  //     margin: 0;
  //     // background-color: #fff;
  //     border: 1px solid #c0c5cc;
  //     border-radius: 2px;
  //   }

    .number {
      background-color: #fff;
  //   .number {
  //     // background-color: #fff;

      &:not(.disabled):hover {
        color: #0065ff;
      }
  //     &:not(.disabled):hover {
  //       color: #0065ff;
  //     }

      &:not(.disabled).active {
        background-color: #0065ff;
        color: #fff;
      }
    }
  //     &:not(.disabled).active {
  //       // background-color: #0065ff;
  //       color: #fff;
  //     }
  //   }

    .el-input .el-input__inner {
      padding-left: 0;
  //   .el-input .el-input__inner {
  //     padding-left: 0;

      &:hover,
      &:focus {
        border-color: #0065ff;
      }
    }
  //     &:hover,
  //     &:focus {
  //       border-color: #0065ff;
  //     }
  //   }

    .el-pagination__jump {
      margin-left: 12px;
      .el-pagination__editor {
        width: 37px;
        input {
          width: 32px;
        }
      }
    }
  }
  //   .el-pagination__jump {
  //     margin-left: 12px;
  //     .el-pagination__editor {
  //       width: 37px;
  //       input {
  //         width: 32px;
  //       }
  //     }
  //   }
  // }
}
</style>

<style >
<style>
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background-color: #0065ff;
  /* background-color: #0065ff; */
}

.el-button--text span {
@@ -740,4 +751,4 @@
  color: #0065ff;
  border-color: #0065ff;
}
</style>
</style>