xy-frontend/src/views/photographicDevice/components/imageCapture.vue

<template>
  <el-tabs
    v-model="activeName"
    type="card"
    @tab-click="handleClick"
    v-loading="loading"
  >
    <el-tab-pane label="查询实际参数" name="1">
      <div class="captureBox">
        <div class="flexnr">
          <div class="wt80">通道</div>
          <el-select
            v-model="selaccess"
            placeholder="请选择"
            class="mr20"
            @change="clearform"
          >
            <el-option
              v-for="item in accesslist"
              :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="flexno bt30">
          <div class="wt80">色彩选择</div>
          <el-select v-model="capturenr.color" class="wt280" :disabled="true">
            <el-option
              v-for="item in colorlist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="flexno bt30">
          <div class="wt80">图像分辨率</div>
          <el-select
            v-model="capturenr.resolution"
            class="wt280"
            :disabled="true"
          >
            <el-option
              v-for="item in ratiolist"
              :key="item.id"
              :label="item.id + '  (' + item.name + ')'"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="flexno bt30">
          <div class="wt80">亮度</div>
          <el-input
            v-model="capturenr.luminance"
            :disabled="true"
            class="wt280"
          ></el-input>
        </div>
        <div class="flexno bt30">
          <div class="wt80">对比度</div>
          <el-input
            v-model="capturenr.contrast"
            :disabled="true"
            class="wt280"
          ></el-input>
        </div>
        <div class="flexno bt30">
          <div class="wt80">饱和度</div>
          <el-input
            v-model="capturenr.saturation"
            :disabled="true"
            class="wt280"
          ></el-input>
        </div>
        <el-button
          class="searchImage"
          :loading="searchloading"
          type="primary"
          @click="imageSearch()"
          >查询</el-button
        >
        <p class="looktime" v-if="lookTime && showLookTime">
          {{ $moment(lookTime).format("YYYY-MM-DD HH:mm:ss") }}
        </p>
        <!-- <el-button
          class="searchImage"
          :loading="searchloading"
          type="primary"
          @click="inquirebtn()"
          >查询</el-button
        > -->
      </div>
    </el-tab-pane>
    <el-tab-pane label="设置参数" name="2">
      <div class="captureBox">
        <el-form
          :model="setForm"
          :rules="rules"
          ref="setForm"
          label-width="120px"
          class="captureForm"
        >
          <el-form-item label="通道" prop="channelId">
            <el-select
              v-model="setForm.channelId"
              placeholder="请选择"
              class="mr20"
            >
              <el-option
                v-for="item in accesslist"
                :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>
          </el-form-item>
          <el-form-item label="色彩选择" prop="color">
            <el-select
              v-model="setForm.color"
              placeholder="请选择"
              class="mr20"
            >
              <el-option
                v-for="item in colorlist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图像分辨率" prop="resolution">
            <el-select
              v-model="setForm.resolution"
              placeholder="请选择"
              class="mr20"
            >
              <el-option
                v-for="item in ratiolist"
                :key="item.id"
                :label="item.id + '  (' + item.name + ')'"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="亮度" prop="luminance">
            <el-input-number
              v-model="setForm.luminance"
              :min="1"
              :max="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="对比度" prop="contrast">
            <el-input-number
              v-model="setForm.contrast"
              :min="1"
              :max="100"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="饱和度" prop="saturation">
            <el-input-number
              v-model="setForm.saturation"
              :min="1"
              :max="100"
            ></el-input-number>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" @click="submitbtn('setForm')"
              >确认</el-button
            > -->
            <el-button
              type="primary"
              @click="imageSet('setForm')"
              :loading="setloading"
              >确认</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import {
  getChannelListJoggle,
  getPhotoParamApi,
  setPhotoParamApi,
  getPhotoParamnrApi,
  getResolutionRatio,
  setTermCamera,
  getTermCameraRequest,
} from "@/utils/api/index";
export default {
  data() {
    return {
      loading: false,
      searchloading: false,
      setloading: false,
      activeName: "1", //选项卡
      accesslist: [], //通道选择器
      colorlist: [
        {
          name: "彩色",
          id: 1,
        },
        {
          name: "黑白",
          id: 0,
        },
      ], //色彩选择器
      ratiolist: [],
      hnratiolist: [
        {
          id: 1,
          name: "320X240",
        },
        {
          id: 2,
          name: "640X480",
        },
        {
          id: 3,
          name: "704X576",
        },
        {
          id: 5,
          name: "1024X768",
        },
        {
          id: 6,
          name: "1280X1024",
        },
        {
          id: 7,
          name: "1280X720",
        },
        {
          id: 8,
          name: "1920X1080",
        },
        {
          id: 9,
          name: "2560X1440",
        },
        {
          id: 10,
          name: "3840X2160",
        },
        {
          id: 11,
          name: "2560X1920",
        },
        {
          id: 12,
          name: "3200X2400",
        },
        {
          id: 13,
          name: "4000X3000",
        },
        {
          id: 14,
          name: "4160X3120",
        },
        {
          id: 15,
          name: "4608X3456",
        },
        {
          id: 16,
          name: "",
        },
        {
          id: 17,
          name: "",
        },
        {
          id: 18,
          name: "",
        },
        {
          id: 19,
          name: "",
        },
        {
          id: 20,
          name: "",
        },
      ], //湖南图像分辨率
      zzratiolist: [
        {
          id: 1,
          name: "320X240",
        },
        {
          id: 2,
          name: "640X480",
        },
        {
          id: 3,
          name: "704X576",
        },
        {
          id: 4,
          name: "800X600",
        },
        {
          id: 5,
          name: "1024X768",
        },
        {
          id: 6,
          name: "1280X1024",
        },
        {
          id: 7,
          name: "1280X720",
        },
        {
          id: 8,
          name: "1920X1080",
        },
        {
          id: 9,
          name: "2560X1440",
        },
        {
          id: 10,
          name: "3840X2160",
        },
        {
          id: 11,
          name: "",
        },
        {
          id: 12,
          name: "",
        },
        {
          id: 13,
          name: "",
        },
        {
          id: 14,
          name: "",
        },
        {
          id: 15,
          name: "",
        },
        {
          id: 16,
          name: "",
        },
        {
          id: 17,
          name: "",
        },
        {
          id: 18,
          name: "",
        },
        {
          id: 19,
          name: "",
        },
        {
          id: 20,
          name: "",
        },
      ], //郑州图像分辨率
      jsratiolist: [
        {
          id: 1,
          name: "320X240",
        },
        {
          id: 2,
          name: "640X480",
        },
        {
          id: 3,
          name: "704X576",
        },
        {
          id: 4,
          name: "720X480 ",
        },
        {
          id: 5,
          name: "1280X720",
        },
        {
          id: 6,
          name: "1920X1080 ",
        },
        {
          id: 7,
          name: "2048X1536",
        },
        {
          id: 8,
          name: "2592X1520",
        },
        {
          id: 9,
          name: "2592X1944",
        },
        {
          id: 10,
          name: "3072X2048",
        },
        {
          id: 11,
          name: "3840X2160 ",
        },
        {
          id: 12,
          name: "4000X3000",
        },
        {
          id: 13,
          name: "4608X3456",
        },
        {
          id: 14,
          name: "",
        },
        {
          id: 15,
          name: "",
        },

        {
          id: 16,
          name: "",
        },
        {
          id: 17,
          name: "",
        },
        {
          id: 18,
          name: "",
        },
        {
          id: 19,
          name: "",
        },
        {
          id: 20,
          name: "",
        },
      ], //江苏图像分辨率
      ahratiolist: [
        {
          id: 1,
          name: "320X240",
        },
        {
          id: 2,
          name: "640X480",
        },
        {
          id: 3,
          name: "704X576",
        },
        {
          id: 4,
          name: "720 X 480",
        },

        {
          id: 5,
          name: "1280X720",
        },
        {
          id: 6,
          name: "1920X1080",
        },
        {
          id: 7,
          name: "",
        },
        {
          id: 8,
          name: "",
        },
        {
          id: 9,
          name: "",
        },
        {
          id: 10,
          name: "",
        },
        {
          id: 11,
          name: "",
        },
        {
          id: 12,
          name: "",
        },
        {
          id: 13,
          name: "",
        },
        {
          id: 14,
          name: "",
        },
        {
          id: 15,
          name: "",
        },

        {
          id: 16,
          name: "",
        },
        {
          id: 17,
          name: "",
        },
        {
          id: 18,
          name: "",
        },
        {
          id: 19,
          name: "",
        },
        {
          id: 20,
          name: "",
        },
      ], //安徽图像分辨率
      zhejiangratiolist: [
        {
          id: 1,
          name: "320X240",
        },
        {
          id: 2,
          name: "640X480",
        },
        {
          id: 3,
          name: "704X576",
        },
        {
          id: 4,
          name: "800X600 ",
        },
        {
          id: 5,
          name: "1024X768",
        },
        {
          id: 6,
          name: "1280X960 ",
        },
        {
          id: 7,
          name: "1600X1200",
        },
        {
          id: 8,
          name: "1920X1080",
        },
        {
          id: 9,
          name: "2048X1536",
        },
        {
          id: 10,
          name: "2592X1944",
        },
        {
          id: 11,
          name: "2816X2112 ",
        },
        {
          id: 12,
          name: "3072X2304",
        },
        {
          id: 13,
          name: "3264X2448",
        },
        {
          id: 14,
          name: "3456X2592",
        },
        {
          id: 15,
          name: "3672X2754",
        },
        {
          id: 16,
          name: "",
        },
        {
          id: 17,
          name: "",
        },
        {
          id: 18,
          name: "",
        },
        {
          id: 19,
          name: "",
        },
        {
          id: 20,
          name: "",
        },
      ], //浙江
      henanratiolist: [
        {
          id: 1,
          name: "320X240",
        },
        {
          id: 2,
          name: "640X480",
        },
        {
          id: 3,
          name: "704X576",
        },
        {
          id: 4,
          name: "800X600 ",
        },
        {
          id: 5,
          name: "1024X768",
        },
        {
          id: 6,
          name: "1280X1024 ",
        },
        {
          id: 7,
          name: "1280X720",
        },
        {
          id: 8,
          name: "1920X1080",
        },
        {
          id: 9,
          name: "2560X1440",
        },
        {
          id: 10,
          name: "3840X2160",
        },
        {
          id: 11,
          name: "2560X1920 ",
        },
        {
          id: 12,
          name: "3264X2448",
        },
        {
          id: 13,
          name: "4224X3136",
        },
        {
          id: 14,
          name: "",
        },
        {
          id: 15,
          name: "",
        },
        {
          id: 16,
          name: "",
        },
        {
          id: 17,
          name: "",
        },
        {
          id: 18,
          name: "",
        },
        {
          id: 19,
          name: "",
        },
        {
          id: 20,
          name: "",
        },
      ], //河南
      selaccess: "", //选中的通道
      capturenr: {}, //查询后的内容
      setForm: {}, //设置参数
      rules: {
        channelId: [{ required: true, message: "请选择通道", trigger: "blur" }],
        color: [{ required: true, message: "请选择色彩", trigger: "blur" }],
        contrast: [
          { required: true, message: "请输入对比度", trigger: "blur" },
        ],
        luminance: [{ required: true, message: "请输入亮度", trigger: "blur" }],
        resolution: [
          { required: true, message: "请选择图像分辨率", trigger: "blur" },
        ],
        saturation: [
          { required: true, message: "请输入饱和度", trigger: "blur" },
        ],
      },
      timer: null,
      i: 0,
      seltermid: "", //装置id
      selcmdId: "", //cmdId
      requestId: "",
      requestid: "",
      timer: null,
      i: 0,
      onlinestatus: "",
      lookTime: "",
      showLookTime: false,
    };
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      this.capturenr = {};
      this.lookTime = "";
    },
    //获取设备通道
    getSingleAccess(val) {
      this.setForm = {};
      console.log(val);
      this.seltermid = val.id;
      this.selcmdId = val.cmdId;
      this.onlinestatus = val.isonline || val.onlinestatus;
      getChannelListJoggle({ termid: this.seltermid })
        .then((res) => {
          this.accesslist = res.data.list;
          this.selaccess = res.data.list[0].channelid;
          this.$set(this.setForm, "channelId", res.data.list[0].channelid);
        })
        .catch((err) => {});
    },
    //获取图像分辨率
    getRatio(val) {
      this.$set(this.setForm, "color", this.colorlist[0].id);
      console.log(val);
      switch (val.protocol) {
        //湖南
        case 65283:
          this.ratiolist = this.hnratiolist;
          break;
        //河南
        case 65285:
          this.ratiolist = this.henanratiolist;
          break;
        //郑州
        case 65286:
          this.ratiolist = this.zzratiolist;
          break;
        //江苏
        case 65282:
          this.ratiolist = this.jsratiolist;
          break;
        //安徽
        case 65281:
          this.ratiolist = this.ahratiolist;
          break;
        //浙江
        case 65284:
          this.ratiolist = this.zhejiangratiolist;
          break;
      }

      if (val.protocol == 65281) {
        this.$set(this.setForm, "resolution", this.ratiolist[5].id);
        this.$set(this.setForm, "luminance", 50);
        this.$set(this.setForm, "contrast", 50);
        this.$set(this.setForm, "saturation", 50);
      } else if (val.protocol == 65285) {
        this.$set(this.setForm, "resolution", this.ratiolist[7].id);
        this.$set(this.setForm, "luminance", 50);
        this.$set(this.setForm, "contrast", 50);
        this.$set(this.setForm, "saturation", 50);
      } else {
        this.$set(this.setForm, "resolution", this.ratiolist[0].id);
        this.$set(this.setForm, "luminance", 50);
        this.$set(this.setForm, "contrast", 50);
        this.$set(this.setForm, "saturation", 50);
      }
    },

    //命令调用imageSearch
    //--act=imgparams [0xC9] --flag=[Request Set Flag, default is set=1, 0: request] --rf=[Request Flag] --channel=[Channel No] --color=[Color Select: 0, 1] --resolution=[Resolution: 1-15 255] --luminance=[Luminance: 1-100] --contrast=[Contrast: 1-100] --saturation=[Saturation: 1-100]
    imageSearch() {
      if (this.onlinestatus || this.onlinestatus === 1) {
        this.searchloading = true;
        let params = [
          {
            name: "act",
            value: "imgparams",
          },
          {
            name: "flag",
            value: 0,
          },
          {
            name: "rf",
            value: 255,
          },
          {
            name: "channel",
            value: this.selaccess,
          },
          {
            name: "color",
            value: "",
          },
          {
            name: "resolution",
            value: "",
          },
          {
            name: "luminance",
            value: "",
          },
          {
            name: "contrast",
            value: "",
          },
          {
            name: "saturation",
            value: "",
          },
        ];
        this.setTermFn(params);
      } else {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "装置下线，发送指令失败",
          type: "error",
        });
      }
    },
    imageSet(setForm) {
      console.log(this.setForm);

      if (this.onlinestatus || this.onlinestatus === 1) {
        this.setloading = true;
        let params = [
          {
            name: "act",
            value: "imgparams",
          },
          {
            name: "flag",
            value: 1,
          },
          {
            name: "rf",
            value: 255,
          },
          {
            name: "channel",
            value: this.setForm.channelId,
          },
          {
            name: "color",
            value: this.setForm.color,
          },
          {
            name: "resolution",
            value: this.setForm.resolution,
          },
          {
            name: "luminance",
            value: this.setForm.luminance,
          },
          {
            name: "contrast",
            value: this.setForm.contrast,
          },
          {
            name: "saturation",
            value: this.setForm.saturation,
          },
        ];
        this.setTermFn(params);
      } else {
        this.$message({
          duration: 1500,
          showClose: true,
          message: "装置下线，发送指令失败",
          type: "error",
        });
      }
    },
    setTermFn(dataParams) {
      setTermCamera({
        termId: this.seltermid,
        list: dataParams,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;
          this.lookTime = res.data.date;
          //this.getinfo1();
          clearInterval(this.timer);
          this.timer = window.setInterval(() => {
            this.getinfo();
            this.i++;
          }, 1000);
        })
        .catch((err) => {});
    },
    getinfo() {
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          if (res.data.success == 1) {
            window.clearInterval(this.timer);
            this.timer = null;
            this.i = 0;
            console.log("终止轮询");
            this.searchloading = false;
            this.setloading = false;
            // && res.data.result == 255
            console.log(JSON.parse(res.data.data));
            this.capturenr = JSON.parse(res.data.data);
            this.$message({
              duration: 1500,
              showClose: true,
              message: "信息已更新",
              type: "success",
            });
            this.showLookTime = true;
          } else if (this.i > 9) {
            window.clearInterval(this.timer);
            this.timer = null;
            this.i = 0;
            this.searchloading = false;
            this.setloading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "暂未获取到信息，请稍后再试！！",
              type: "warning",
            });
          }
        })
        .catch();
    },
    clearform() {
      console.log("清除其他数据");
      this.capturenr = {};
      this.searchloading = false;
      this.setloading = false;
    },
    clearData() {
      this.capturenr = {};
      this.setForm = {};
      this.searchloading = false;
      this.setloading = false;
      this.lookTime = "";
      this.showLookTime = false;
    },
  },
};
</script>
<style lang="less">
.captureBox {
  width: 400px;
  margin: 0 auto;
  margin-top: 24px;
  .flexnr {
    display: flex;
    height: 32px;
    line-height: 32px;
    margin-bottom: 18px;
    .wt80 {
      text-align: right;
      float: left;
      font-size: 14px;
      color: #606266;
      margin: 0 12px 0 0;
      box-sizing: border-box;
      width: 100px;
      display: block;
    }
    .mr20 {
      flex: 1;
    }
  }
  .searchImage {
    margin-left: 110px;
  }
  .looktime {
    margin-top: 6px;
    margin-left: 110px;
  }
  .flexno {
    display: flex;
    height: 32px;
    line-height: 32px;
    margin-bottom: 18px;
    .wt80 {
      text-align: right;
      float: left;
      font-size: 14px;
      color: #606266;
      margin: 0 12px 0 0;
      box-sizing: border-box;
      width: 100px;
      display: block;
    }
    .wt280 {
      flex: 1;
    }
  }
  .captureForm {
    .el-form-item__content {
    }
  }
}
</style>