frontend/src/views/devicePhotoSchedule/components/setdevicebak.vue

<template>
  <el-dialog
    class="photoSetDialog"
    title="设置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="1020px"
    @close="handleclose"
  >
    <div class="setTimeTd" v-loading="timeboxLoading">
      <div class="headTitle">
        <div class="rulesInfo">
          <h3>时间表规则：</h3>
          <div
            class="timeBox"
            v-for="(val, index) in rulesTimeList.listTime"
            :key="index"
          >
            <div class="timeSlot">
              {{
                new Date(val.startTime).getHours() < 10
                  ? "0" + new Date(val.startTime).getHours()
                  : new Date(val.startTime).getHours()
              }}:
              {{
                new Date(val.startTime).getMinutes() < 10
                  ? "0" + new Date(val.startTime).getMinutes()
                  : new Date(val.startTime).getMinutes()
              }}
              ~
              {{
                new Date(val.endTime).getHours() < 10
                  ? "0" + new Date(val.endTime).getHours()
                  : new Date(val.endTime).getHours()
              }}:
              {{
                new Date(val.endTime).getMinutes() < 10
                  ? "0" + new Date(val.endTime).getMinutes()
                  : new Date(val.endTime).getMinutes()
              }}
            </div>
            <div class="timespan">
              间隔：<b>{{ val.span }}分钟</b>
            </div>
          </div>
        </div>
      </div>
      <div class="mathFloor">
        <span class="mathTitle">设置偏移量(max:10)：</span>
        <el-input-number v-model="mathMam" :min="0" :max="10"></el-input-number>
        <el-button type="primary" @click="setMathFloor()">设置</el-button>
      </div>
      <div class="channelBox">
        <span class="channelTitle">选择通道：</span>
        <div class="checkBox" v-if="channelList.length !== 0">
          <el-radio-group v-model="checkedAisle" @change="handleChange">
            <el-radio
              :label="val.id"
              border
              v-for="val in channelList"
              :key="val.id"
              >{{ val.name }}</el-radio
            >
          </el-radio-group>
        </div>
      </div>
      <div class="treebox" v-loading="treeloading">
        <el-tree
          :data="treeList"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
          :check-on-click-node="true"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.name == null ? data.cmdid : data.name }}</span
            >-- <span>{{ data.id }}</span
            >-- <span>{{ data.onlinestatus == 0 ? "离线" : "在线" }}</span
            >--
            <span>{{ data.protocol }}</span>
          </span>
        </el-tree>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button @click="getCheckedNodes">获取</el-button> -->
      <el-button @click="handleclose">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  // setScheduleRulel,
  getScheduleRulelAccessList,
  getTermListByChannelJoggle,
  // getCmaSchelduleUpload,
} from "@/utils/api/index";
// import moment from "moment";
export default {
  data() {
    return {
      isShow: false,
      timeboxLoading: false,
      rulesTimeList: "", //当前时间表数据
      mathMam: 0, //偏移量默认为0
      checkedAisle: 1, //选中通道数据
      channelList: [], //通道数据内容
      treeloading: false,
      treeList: [], //树结构
      defaultProps: {
        children: "list",
        label: "name",
        disabled: this.disabledFn,
      },
    };
  },
  mounted() {},
  methods: {
    //判断
    getdataform(val) {
      console.log(val);
      this.rulesTimeList = val;
      this.timeboxLoading = true;
      this.getChannelList();
    },

    // 保存确定操作
    submitForm() {},
    //获取通道
    getChannelList() {
      getScheduleRulelAccessList({})
        .then((res) => {
          console.log(res);
          this.channelList = res.data.channellist;

          this.handleChange();
        })
        .catch((err) => {});
    },
    //改变通道获取树状结构
    handleChange() {
      console.log(this.checkedAisle);
      this.treeloading = true;
      getTermListByChannelJoggle({
        id: this.checkedAisle,
      })
        .then((res) => {
          console.log(res);
          this.timeboxLoading = false;

          this.treeList = res.data.list;
          this.treeloading = false;
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
    },
    clearfn() {},
    handleclose() {
      this.isShow = false;
    },
  },
};
</script>
<style lang="less">
.photoSetDialog {
  .setTimeTd {
    //background-color: #fcc;
    .headTitle {
      .rulesInfo {
        display: flex;
        align-items: center;
        line-height: 32px;
        h3 {
          font-size: 14px;
          font-weight: normal;
        }
        .timeBox {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-right: 8px;
          .timeSlot {
            font-size: 14px;
            margin-right: 8px;
          }
          .timespan {
            b {
              font-size: 14px;
              font-weight: normal;
              color: #169e8c;
            }
          }
        }
      }
    }
    .mathFloor {
      margin-top: 8px;
      .mathTitle {
        font-size: 14px;
        font-weight: normal;
      }
      .el-button {
        margin-left: 8px;
      }
    }
    .channelBox {
      display: flex;
      align-items: center;
      line-height: 32px;
      margin-top: 8px;
      .channelTitle {
        font-size: 14px;
      }
      .el-radio {
        margin-right: 8px;
      }
    }
    .treebox {
      margin-top: 8px;
      background-color: #169e8c;
      height: 360px;
      // overflow: auto;
      display: flex;
      align-items: flex-start;
      border: 1px solid #eee;
      padding: 8px;
      border-radius: 4px;
      position: relative;
      .el-tree {
        width: 100%;
        height: 100%;
        overflow: auto;
        .el-tree-node {
          .el-tree-node__content {
            height: 32px;
            border-bottom: 1px solid #eee;
          }
        }
      }
    }
  }
}
</style>