xy-frontend/src/views/realTimeMonitor/components/parameterArea.vue

<template>
  <div class="AreaBox">
    <div class="areaHead">{{ areaData.cmdid }}</div>
    <div class="paramsDate">
      <h3>日历快速查询</h3>
      <el-date-picker
        v-model="dateValue"
        type="date"
        placeholder="选择日期"
        format="yyyy 年 MM 月 dd 日"
        :picker-options="pickerOptions"
        @change="changedate"
        :clearable="false"
      >
      </el-date-picker>
    </div>
    <div class="paramsDate">
      <h3>通道监拍点</h3>
      <!-- <el-radio-group v-model="selectChannelValue" @input="changeChannelId">
        <el-radio-button
          v-for="item in channelListOption"
          :key="item.channelid"
          :value="item.channelid"
          :label="item.channelid"
        >
          {{
            item.alias !== null && item.alias !== ""
              ? item.alias
              : item.channelname
          }}</el-radio-button
        >
      </el-radio-group> -->
      <el-select
        v-model="selectChannelValue"
        placeholder="请选择通道"
        @change="changeChannelId"
        ref="multiSelect"
      >
        <el-option
          v-for="item in channelListOption"
          :key="item.channelid"
          :label="
            item.alias !== null && item.alias !== ''
              ? item.alias
              : item.channelname
          "
          :value="item.channelid"
        >
          {{
            item.alias !== null && item.alias !== ""
              ? item.alias
              : item.channelname
          }}
        </el-option>
      </el-select>
    </div>
    <div class="paramsDate setTimebtn">
      <h3>操作项</h3>
      <div class="buttonGroup">
        <takePicButton></takePicButton>
        <takeVideoButton></takeVideoButton>

        <deviceInfoButton></deviceInfoButton>

        <scheduleButton></scheduleButton>
        <alarmButton></alarmButton>
        <cableButton></cableButton>
        <gpsButton></gpsButton>
        <el-button type="primary" @click="handlehistoryPic">
          历史图片</el-button
        >
        <el-button type="primary" @click="handleParams"> 参数配置</el-button>
        <!-- <el-button type="primary" @click="handleTakePic" :loading="picLoading"
          >主动拍照
        </el-button> -->
        <!-- <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button>
        <el-button type="primary">主动拍照 </el-button> -->
      </div>
    </div>
    <parameterSetDialog ref="parameterSetref"></parameterSetDialog>
  </div>
</template>
<script>
import takePicButton from "./takePicButton.vue";
import takeVideoButton from "./takeVideoButton.vue";
import deviceInfoButton from "./deviceInfoButton.vue";
import scheduleButton from "./scheduleButton.vue";
import alarmButton from "./alarmButton.vue";
import cableButton from "./cableButton.vue";
import gpsButton from "./gpsButton.vue";
import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
import { getChannelByTermidJoggle } from "@/utils/api/index";
export default {
  components: {
    takePicButton,
    takeVideoButton,
    deviceInfoButton,
    scheduleButton,
    alarmButton,
    cableButton,
    gpsButton,
    parameterSetDialog,
  },
  data() {
    return {
      selectChannelValue: null, //选中的通道
      channelListOption: [], //通道数组
      dateValue: "", //选择日期
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },
      picLoading: false, //拍照loading
      selectDyId: "", //获取当前选中的电压线路等信息
      selectLineId: "",
      selectTowerId: "",
    };
  },

  watch: {
    areaData: {
      handler(newVal, oldVal) {},
      deep: true,
      immediate: true,
    },
  },
  computed: {
    areaData() {
      return this.$store.state.currentData;
    },
  },
  mounted() {
    this.getDateTime();
  },
  methods: {
    //获取当前时间
    getDateTime() {
      console.log(new Date());
      this.dateValue = new Date().getTime();
      console.log(this.dateValue);
    },
    //选择时间
    changedate() {
      console.log(this.dateValue.getTime());
      this.$parent.getPhotoList(
        this.selectChannelValue,
        this.dateValue,
        this.areaData.id
      );
    },
    //获取通道的接口
    getChannelList() {
      console.log(this.areaData);
      getChannelByTermidJoggle({ termid: this.areaData.id })
        .then((res) => {
          console.log(res);
          this.channelListOption = [
            { channelname: "全部", channelid: -1, alias: null },
          ];
          this.channelListOption = this.channelListOption.concat(res.data.list);
          console.log(this.channelListOption);

          this.selectChannelValue = this.channelListOption[0].channelid; //默认选中所有通道;
          this.$store.commit("channelId", this.selectChannelValue); //通道保存在vuex中
          this.$store.commit("channelIdList", res.data.list); //将通道保存在vuex中
          this.$parent.getPhotoList(
            this.selectChannelValue,
            this.dateValue,
            this.areaData.id
          );
          this.selectDyId = res.data.dyId;
          this.selectLineId = res.data.lineId;
          this.selectTowerId = res.data.towerId;
        })
        .catch((err) => {
          console.log(err); //代码错误、请求失败捕获
        });
    },
    //切换通道
    changeChannelId(val) {
      console.log(val);
      this.$store.commit("channelId", val); //将currentData保存在vuex中
      this.$parent.getPhotoList(val, this.dateValue, this.areaData.id);
    },
    //历史图片跳转
    handlehistoryPic() {
      console.log(this.areaData);
      console.log(this.selectDyId, this.selectLineId, this.selectTowerId);
      // console.log(this.zzCmdid, this.selectChannelValue);
      if (typeof this.dateValue == "number") {
        this.dateValue = new Date(new Date().toLocaleDateString()).getTime();
      } else {
        this.dateValue = this.dateValue.getTime();
      }
      this.$router.push({
        path: "/realTimeSearch",
        query: {
          dyId: this.selectDyId,
          lineId: this.selectLineId,
          towerId: this.selectTowerId,
          termId: this.areaData.id,
          cmdId: this.areaData.cmdid,
          channelId: this.selectChannelValue,
          date: this.dateValue,
        },
      });
    },
    //参数配置
    handleParams() {
      console.log(this.areaData);
      this.$refs.parameterSetref.display(this.areaData);
    },
  },
};
</script>
<style lang="less">
.AreaBox {
  .areaHead {
    height: 32px;
    line-height: 32px;
    color: #169e8c;
    font-size: 14px;
    font-weight: normal;
  }
  .paramsDate {
    margin-bottom: 16px;
    position: relative;
    h3 {
      font-size: 14px;
      font-weight: normal;
      color: #303133;
      margin-bottom: 8px;
    }
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      .el-radio-button {
        margin-right: 6px;
        margin-top: 6px;
        .el-radio-button__inner {
          padding: 8px 4px;
          width: 66px;
          border-left: 1px solid #dcdfe6;
          border-radius: 4px;
        }
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          box-shadow: none !important;
        }
      }
    }
  }
  .setTimebtn {
    .buttonGroup {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-button {
        margin-bottom: 8px;
        width: 104px;
      }
      .el-button + .el-button {
        margin-left: 0px;
      }
    }
  }
}
</style>