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

<template>
  <div class="AreaBox">
    <div class="areaHead">
      <span>{{ areaData.cmdid }}</span>
      <!-- <el-tooltip
        class="item"
        effect="dark"
        :content="!collect ? '取消收藏' : '添加收藏'"
        placement="top"
      >
        <i
          :class="collect ? 'el-icon-star-off' : 'el-icon-star-on'"
          @click="collectCourses"
        ></i>
      </el-tooltip> -->
    </div>
    <div class="paramsDate">
      <h3>日历快速查询</h3>
      <el-date-picker
        v-model="dateValue"
        type="date"
        placeholder="选择日期"
        format="yyyy 年 MM 月 dd 日"
        :picker-options="pickerOptions"
        @change="changedate"
        @focus="handleDateFocus"
        :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>
    <div class="setfocalLength" v-if="areaData.protocol == '65286'">
      <h3>焦距调节</h3>
      <div class="selectChannel">
        <span class="labelname">选择通道</span>
        <el-select
          v-model="channelarrValue"
          placeholder="请选择通道"
          ref="multiSelect"
        >
          <el-option
            v-for="item in channelfocalOpyion"
            :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="buttonGroup">
        <el-button type="primary" icon="el-icon-zoom-in" @click="amplify()"
          >放大</el-button
        >
        <el-button type="primary" icon="el-icon-zoom-out" @click="reduce()"
          >缩小</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,
  updateTermCamera,
  getTermStatus,
} from "@/utils/api/index";
export default {
  components: {
    takePicButton,
    takeVideoButton,
    deviceInfoButton,
    scheduleButton,
    alarmButton,
    cableButton,
    gpsButton,
    parameterSetDialog,
  },
  data() {
    return {
      selectChannelValue: null, //选中的通道
      channelListOption: [], //通道数组
      channelarrValue: null,
      channelfocalOpyion: [], //焦距通道
      dateValue: "", //选择日期
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > Date.now(); // 禁用大于今天的日期
        },
      },
      picLoading: false, //拍照loading
      selectDyId: "", //获取当前选中的电压线路等信息
      selectLineId: "",
      selectTowerId: "",
      collect: false, //收藏
    };
  },

  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);
    },
    //点击收藏和取消收藏
    collectCourses() {
      this.collect = !this.collect;
    },
    //focus时间重新赋值
    handleDateFocus() {
      // 更新pickerOptions的disabledDate函数，禁用大于当前时间的日期
      this.pickerOptions.disabledDate = (date) => {
        //console.log(date);
        const currentDate = new Date();
        return date.getTime() > currentDate.getTime(); // 禁用大于今天的日期
      };
    },
    //选择时间
    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.channelfocalOpyion = res.data.list; //焦距通道
          this.channelarrValue = this.channelfocalOpyion[0].channelid;
          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);
    },
    //焦距放大缩小
    amplify() {
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          updateTermCamera({
            termId: this.areaData.id,
            channelId: this.channelarrValue,
            type: 6,
          })
            .then((res) => {})
            .catch();
          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
      console.log(this.channelarrValue, this.areaData.id);
    },
    //焦距缩小
    reduce() {
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          updateTermCamera({
            termId: this.areaData.id,
            channelId: this.channelarrValue,
            type: 7,
          })
            .then((res) => {})
            .catch();
          //this.$refs.infodialog_ref.getListData(this.channelId, this.cmdid);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
  },
};
</script>
<style lang="less">
.AreaBox {
  .areaHead {
    height: 32px;
    line-height: 32px;
    color: #169e8c;
    font-size: 14px;
    font-weight: normal;
    display: flex;
    align-items: center;
    i {
      margin-left: 16px;
      cursor: pointer;
    }
    .el-icon-star-off {
      font-size: 18px;
      color: #f08200;
    }
    .el-icon-star-on {
      font-size: 20px;
      color: #f08200;
    }
  }
  .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;
      }
    }
  }
  .setfocalLength {
    margin-bottom: 16px;
    position: relative;
    h3 {
      font-size: 14px;
      font-weight: normal;
      color: #303133;
      margin-bottom: 8px;
    }
    .selectChannel {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
      .labelname {
        font-size: 14px;
        margin-right: 4px;
        width: 80px;
        color: #666;
      }
    }
    .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>