|
|
@@ -0,0 +1,871 @@
|
|
|
+<template>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <div class="header-left">
|
|
|
+ <span class="title">房态管理 </span>
|
|
|
+ <span> / 共182间</span>
|
|
|
+ </div>
|
|
|
+ <div class="header-right">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入姓名或者房间号"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ class="inquire-input"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button class="inquire-button">查询</el-button>
|
|
|
+ <div class="control">
|
|
|
+ <div class="title" @click="water = !water" style="cursor: pointer">
|
|
|
+ 批量控制水电
|
|
|
+ </div>
|
|
|
+ <ul v-show="water">
|
|
|
+ <li
|
|
|
+ @click="dialogShow"
|
|
|
+ v-for="(item, index) in titles"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="692px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-tree
|
|
|
+ :data="data"
|
|
|
+ show-checkbox
|
|
|
+ node-key="id"
|
|
|
+ :default-expanded-keys="[2, 3]"
|
|
|
+ :default-checked-keys="[5]"
|
|
|
+ :props="defaultProps"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="control" style="margin-left: 17px">
|
|
|
+ <div class="title" @click="room = !room" style="cursor: pointer">
|
|
|
+ 批量开关房
|
|
|
+ </div>
|
|
|
+ <ul v-show="room">
|
|
|
+ <li
|
|
|
+ @click="dialogShow"
|
|
|
+ v-for="(item, index) in titles2"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ <el-dialog
|
|
|
+ :title="title"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="692px"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <div class="tree">
|
|
|
+ <div class="tree-left">
|
|
|
+ <el-checkbox v-model="checked" style="margin-left: 15px"
|
|
|
+ >全选</el-checkbox
|
|
|
+ >
|
|
|
+ <span style="margin-left: 165px">100 / 200</span>
|
|
|
+ </div>
|
|
|
+ <el-tree
|
|
|
+ :data="data"
|
|
|
+ show-checkbox
|
|
|
+ node-key="id"
|
|
|
+ :default-expanded-keys="[2, 3]"
|
|
|
+ :default-checked-keys="[5]"
|
|
|
+ :props="defaultProps"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="tree">
|
|
|
+ <div class="tree-left">
|
|
|
+ <p style="margin-left: 15px">已选 ( 100 )</p>
|
|
|
+ </div>
|
|
|
+ <ul
|
|
|
+ class="infinite-list"
|
|
|
+ v-infinite-scroll="load"
|
|
|
+ style="overflow: auto"
|
|
|
+ infinite-scroll-immediate="false"
|
|
|
+ >
|
|
|
+ <li
|
|
|
+ v-for="(i, index) in count"
|
|
|
+ :key="index"
|
|
|
+ class="infinite-list-item"
|
|
|
+ >
|
|
|
+ <span style="margin-left: 19px">{{ i }}</span
|
|
|
+ ><i class="el-icon-close"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="dialogVisible = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-body">
|
|
|
+ <div class="room-floor">
|
|
|
+ <div class="floor">
|
|
|
+ <div class="header-title">
|
|
|
+ <div class="tier">2层</div>
|
|
|
+ <span>/ 共10间</span>
|
|
|
+ </div>
|
|
|
+ <div class="main-floor">
|
|
|
+ <div class="room-num" v-for="i in 8" :key="i">
|
|
|
+ <el-popover
|
|
|
+ width="70"
|
|
|
+ placement="right"
|
|
|
+ trigger="click"
|
|
|
+ popper-class="popperOptions"
|
|
|
+ >
|
|
|
+ <div class="control-room">
|
|
|
+ <div>关灯</div>
|
|
|
+ <div>关灯</div>
|
|
|
+ <div>关灯</div>
|
|
|
+ <div>关灯</div>
|
|
|
+ <div>关灯</div>
|
|
|
+ <div>关灯</div>
|
|
|
+ <div>关灯</div>
|
|
|
+ </div>
|
|
|
+ <div class="card" slot="reference">
|
|
|
+ <div class="title">
|
|
|
+ <span>17栋1单元2层01房</span>
|
|
|
+ <div class="state">空闲</div>
|
|
|
+ </div>
|
|
|
+ <div class="teacher">张老师</div>
|
|
|
+ <div class="num">
|
|
|
+ <span>水:25吨</span>
|
|
|
+ <span>电:25度</span>
|
|
|
+ </div>
|
|
|
+ <div class="count-down">
|
|
|
+ <span>退房倒计时:00:13:26</span>
|
|
|
+ <div class="tuifang">
|
|
|
+ <IconSvg :W="21" :H="21" name="tuifang" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-condition">
|
|
|
+ <div class="title">查询条件</div>
|
|
|
+ <div class="calendar">
|
|
|
+ <p>日期查询</p>
|
|
|
+ <div class="date">
|
|
|
+ <el-date-picker
|
|
|
+ size="mini"
|
|
|
+ v-model="date"
|
|
|
+ align="right"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ :clearable="false"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <el-calendar v-model="date" :first-day-of-week="7"> </el-calendar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="filtrate">
|
|
|
+ <p>房态筛选</p>
|
|
|
+ <div class="room-filtrate">
|
|
|
+ <div style="border-bottom: 1px solid rgba(225, 228, 232, 1)">
|
|
|
+ <el-checkbox
|
|
|
+ size="mini"
|
|
|
+ :indeterminate="isIndeterminate"
|
|
|
+ v-model="checkAll"
|
|
|
+ @change="handleCheckAllChange"
|
|
|
+ >全选</el-checkbox
|
|
|
+ >
|
|
|
+ <span class="all">150间</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin: 15px 0"></div>
|
|
|
+ <el-checkbox-group
|
|
|
+ size="mini"
|
|
|
+ v-model="checkedCities"
|
|
|
+ @change="handleCheckedCitiesChange"
|
|
|
+ >
|
|
|
+ <el-checkbox
|
|
|
+ size="mini"
|
|
|
+ v-for="city in cities"
|
|
|
+ :label="city"
|
|
|
+ :key="city"
|
|
|
+ >{{ city }} <span>50间</span></el-checkbox
|
|
|
+ >
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="reset">
|
|
|
+ <el-button @click="reset" type="primary" size="mini"
|
|
|
+ >重置筛选</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Home",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 批量数据
|
|
|
+ dialogVisible: false,
|
|
|
+ count: 20,
|
|
|
+ title: "",
|
|
|
+ checked: true,
|
|
|
+ titles: ["批量开电", "批量开水", "批量关电", "批量关水"],
|
|
|
+ titles2: ["批量开房", "批量关房"],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ label: "墨轩湖酒店",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ label: "三级 1-1-1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 10,
|
|
|
+ label: "三级 1-1-2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 9,
|
|
|
+ label: "17栋1单元02层01",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ },
|
|
|
+ water: false,
|
|
|
+ room: false,
|
|
|
+
|
|
|
+ //日历
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now();
|
|
|
+ },
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: "今天",
|
|
|
+ onClick(picker) {
|
|
|
+ picker.$emit("pick", new Date());
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "昨天",
|
|
|
+ onClick(picker) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
|
+ picker.$emit("pick", date);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "一周前",
|
|
|
+ onClick(picker) {
|
|
|
+ const date = new Date();
|
|
|
+ date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ picker.$emit("pick", date);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ date: new Date(),
|
|
|
+
|
|
|
+ // 房态筛选数据
|
|
|
+ checkAll: false,
|
|
|
+ checkedCities: ["已入住", "空间"],
|
|
|
+ cities: ["已入住", "空间", "已约定", "脏房", "保留房"],
|
|
|
+ isIndeterminate: true,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ document.getElementsByClassName(
|
|
|
+ "el-button--plain"
|
|
|
+ )[0].children[0].innerText = "<";
|
|
|
+ document.getElementsByClassName(
|
|
|
+ "el-button--plain"
|
|
|
+ )[1].children[0].innerText = "o";
|
|
|
+ document.getElementsByClassName(
|
|
|
+ "el-button--plain"
|
|
|
+ )[2].children[0].innerText = ">";
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleCheckChange(data, checked, indeterminate) {
|
|
|
+ console.log(data, checked, indeterminate);
|
|
|
+ },
|
|
|
+ loadNode(node, resolve) {
|
|
|
+ if (node.level === 0) {
|
|
|
+ return resolve([{ name: "region1" }, { name: "region2" }]);
|
|
|
+ }
|
|
|
+ if (node.level > 3) return resolve([]);
|
|
|
+
|
|
|
+ var hasChild;
|
|
|
+ if (node.data.name === "region1") {
|
|
|
+ hasChild = true;
|
|
|
+ } else if (node.data.name === "region2") {
|
|
|
+ hasChild = false;
|
|
|
+ } else {
|
|
|
+ hasChild = Math.random() > 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ var data;
|
|
|
+ if (hasChild) {
|
|
|
+ data = [
|
|
|
+ {
|
|
|
+ name: "zone" + this.count++,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "zone" + this.count++,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ } else {
|
|
|
+ data = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ resolve(data);
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ dialogShow(e) {
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.title = e.target.innerHTML;
|
|
|
+ },
|
|
|
+ handleClose(key, keyPath) {
|
|
|
+ console.log(key, keyPath);
|
|
|
+ },
|
|
|
+ load() {
|
|
|
+ this.count += 0;
|
|
|
+ if (this.count < 50) {
|
|
|
+ this.count += 4;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 房态筛查
|
|
|
+ handleCheckAllChange(val) {
|
|
|
+ this.checkedCities = val ? this.cities : [];
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ console.log(val);
|
|
|
+ },
|
|
|
+ handleCheckedCitiesChange(value) {
|
|
|
+ let checkedCount = value.length;
|
|
|
+ this.checkAll = checkedCount === this.cities.length;
|
|
|
+ this.isIndeterminate =
|
|
|
+ checkedCount > 0 && checkedCount < this.cities.length;
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.checkedCities = [];
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ this.checkAll = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleCommand(command) {
|
|
|
+ this.$message("click on item " + command);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.box-card {
|
|
|
+ /deep/ .el-card__header {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.clearfix {
|
|
|
+ height: 96px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .el-card__header {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ margin-left: 33px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-right {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .inquire-input {
|
|
|
+ width: 261px;
|
|
|
+ height: 37px;
|
|
|
+ background: rgba(240, 243, 247, 1);
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-left: 715px;
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ height: 37px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .inquire-button {
|
|
|
+ width: 73px;
|
|
|
+ height: 37px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin: 0 58px 0 9px;
|
|
|
+ padding: 0;
|
|
|
+ background: rgba(41, 109, 227, 1);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .control {
|
|
|
+ // width: 121px;
|
|
|
+ height: 37px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ background: rgba(41, 109, 227, 1);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 37px;
|
|
|
+ padding: 0 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ position: absolute;
|
|
|
+ list-style: none;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ li {
|
|
|
+ height: 26px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #000;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(41, 109, 227, 1);
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .el-card__body {
|
|
|
+ height: 854px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ .home-body {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .room-floor {
|
|
|
+ height: 2000px;
|
|
|
+ flex: 1;
|
|
|
+ .floor {
|
|
|
+ height: 394px;
|
|
|
+ margin: 0 0 0 33px;
|
|
|
+ .header-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 66px;
|
|
|
+ .tier {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main-floor {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .room-num {
|
|
|
+ margin-bottom: 30px;
|
|
|
+
|
|
|
+ .card {
|
|
|
+ width: 228px;
|
|
|
+ height: 140px;
|
|
|
+ background: rgba(240, 243, 247, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // div {
|
|
|
+ // margin-left: 15px;
|
|
|
+ // margin-bottom: 7px;
|
|
|
+ // }
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 15px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ }
|
|
|
+ .state {
|
|
|
+ width: 38px;
|
|
|
+ height: 17px;
|
|
|
+ opacity: 1;
|
|
|
+ /** 文本1 */
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 0px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 17px;
|
|
|
+ margin-left: 20px;
|
|
|
+ background: rgba(41, 109, 227, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .teacher {
|
|
|
+ margin: 5px 15px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ margin: 5px 15px;
|
|
|
+ }
|
|
|
+ .count-down {
|
|
|
+ margin-left: 15px;
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ margin-right: 60px;
|
|
|
+ }
|
|
|
+ .tuifang {
|
|
|
+ width: 21px;
|
|
|
+ height: 21px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dropdown-link {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ .el-icon-arrow-down {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .query-condition {
|
|
|
+ width: 302px;
|
|
|
+ height: 752px;
|
|
|
+ background: rgba(240, 243, 247, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin: 72px 29px 0 0;
|
|
|
+ .title {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ height: 55px;
|
|
|
+ border-bottom: 1px solid rgba(217, 217, 217, 1);
|
|
|
+ line-height: 55px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .calendar {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 266px;
|
|
|
+ height: 227px;
|
|
|
+ .date {
|
|
|
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
|
|
+ .el-input {
|
|
|
+ width: 266px !important;
|
|
|
+ .el-input__inner {
|
|
|
+ padding-left: 15px;
|
|
|
+ }
|
|
|
+ .el-input__prefix {
|
|
|
+ left: 233px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-calendar {
|
|
|
+ width: 266px;
|
|
|
+ height: 227px;
|
|
|
+
|
|
|
+ .el-calendar__header {
|
|
|
+ height: 37px;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 0 20px;
|
|
|
+ align-items: center;
|
|
|
+ .el-button {
|
|
|
+ width: 30px;
|
|
|
+ border: none;
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-calendar__body {
|
|
|
+ height: 190px !important;
|
|
|
+ padding: 0 20px;
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ height: 100% !important;
|
|
|
+ thead {
|
|
|
+ height: 19px;
|
|
|
+ th {
|
|
|
+ font-size: 10.7px;
|
|
|
+ padding: 15px 0 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-calendar-table__row {
|
|
|
+ .next,
|
|
|
+ .prev {
|
|
|
+ .el-calendar-day {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ height: 19px !important;
|
|
|
+ .is-selected {
|
|
|
+ background: transparent;
|
|
|
+ .el-calendar-day {
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: rgba(51, 150, 251, 1);
|
|
|
+ span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ height: 19px !important;
|
|
|
+ border-left: none;
|
|
|
+ border-top: none;
|
|
|
+ border-bottom: none;
|
|
|
+ border-right: none;
|
|
|
+
|
|
|
+ .el-calendar-day {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0;
|
|
|
+ height: 19px;
|
|
|
+ border: none !important;
|
|
|
+ margin: 4px 5px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 10.7px;
|
|
|
+ width: 19px;
|
|
|
+ height: 19px;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #000;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 19px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .filtrate {
|
|
|
+ margin-top: 85px;
|
|
|
+ padding: 0 20px;
|
|
|
+ p {
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .room-filtrate {
|
|
|
+ border-bottom: 1px solid rgba(225, 228, 232, 1);
|
|
|
+ }
|
|
|
+ .all {
|
|
|
+ float: right;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .el-checkbox {
|
|
|
+ width: 50%;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ .el-checkbox__label {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ span {
|
|
|
+ margin-left: 25px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-checkbox__inner {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ &:after {
|
|
|
+ left: 3px;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reset {
|
|
|
+ margin: 15px 20px;
|
|
|
+ .el-button {
|
|
|
+ width: 69px;
|
|
|
+ height: 28px;
|
|
|
+ background: rgba(41, 109, 227, 1);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.box-card {
|
|
|
+ width: 1612px;
|
|
|
+ height: 950px;
|
|
|
+ box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .el-dialog {
|
|
|
+ height: 565px !important;
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ height: 81px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border-bottom: 1px solid rgba(230, 230, 230, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(0, 0, 0, 1);
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ font-size: 20px;
|
|
|
+ width: 35px;
|
|
|
+ height: 35px;
|
|
|
+ top: 23px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 21px 0 0 0;
|
|
|
+
|
|
|
+ .tree {
|
|
|
+ .tree-left {
|
|
|
+ width: 316px;
|
|
|
+ height: 44px;
|
|
|
+ background: rgba(240, 243, 247, 1);
|
|
|
+ border: 1px solid rgba(230, 230, 230, 1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree {
|
|
|
+ width: 316px;
|
|
|
+ height: 324px;
|
|
|
+ border: 1px solid rgba(230, 230, 230, 1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 9px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ width: 316px;
|
|
|
+ height: 324px;
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ border: 1px solid rgba(230, 230, 230, 1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 24px 30px 0 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.popperOptions {
|
|
|
+ min-width: 69.99px;
|
|
|
+ height: 167px;
|
|
|
+ .control-room {
|
|
|
+ width: 69.99px;
|
|
|
+ height: 167px;
|
|
|
+ opacity: 1;
|
|
|
+ background: rgba(240, 243, 247, 1);
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|