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

<template>
  <el-dialog
    class="setChannelDialog"
    title="通道设置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="640px"
    @close="handleclose"
  >
    <div class="zzinfo">
      装置编号：{{ areaData.cmdid
      }}<el-button type="text" icon="el-icon-refresh" @click="searchBtn"
        >刷新</el-button
      >
    </div>
    <div class="channelsetBox" v-loading="channelsetLoading">
      <el-form ref="form" :model="channelForm" label-width="100px">
        <!-- <el-form-item label="装置编号">
          <el-input v-model="channelForm.zzbh" disabled></el-input>
        </el-form-item> -->
        <el-form-item label="拍照通道">
          <el-radio-group
            v-model="channelForm.selectChannel"
            @input="changeChannel"
          >
            <el-radio
              v-for="item in channelList"
              :key="item.channelid"
              :label="item.channelid"
              :value="item.channelid"
            >
              {{
                item.alias !== null && item.alias !== ""
                  ? item.alias
                  : item.channelname
              }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <div class="photoinfo">
          <el-form-item label="照片大小" class="photoSize">
            <el-input v-model="channelForm.resolutionCX"></el-input>
            <el-input v-model="channelForm.resolutionCY"></el-input>
          </el-form-item>
          <el-form-item label="压缩率">
            <el-input v-model="channelForm.ysl"></el-input>
            <span class="infoSpan">(0-100的整数)</span>
          </el-form-item>
        </div>

        <div class="picZoomClass">
          <el-form-item label="图片放大">
            <el-radio-group v-model="channelForm.isImageZoomEnabled">
              <el-radio :label="1">开</el-radio>
              <el-radio :label="0">关</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="放大倍数" class="zoomBox">
            <el-slider
              v-model="channelForm.zoomVal"
              :min="1"
              :max="4"
              :step="0.1"
            ></el-slider>

            <el-tag type="info">{{ channelForm.zoomVal }}</el-tag>
          </el-form-item>
        </div>
        <div class="videoDiv">
          <el-form-item label="视频分辨率" class="videoclass">
            <el-select
              v-model="channelForm.videoSize"
              placeholder="请选择"
              @change="changevideoChannel"
            >
              <el-option
                v-for="item in videoOptionSize"
                :key="item.value"
                :label="item.name + '(' + item.label + ')'"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="视频时长">
            <el-input v-model="channelForm.videoDuration"></el-input>
            <span class="infoSpan">(秒)</span>
          </el-form-item>
        </div>

        <el-form-item label="参数设置">
          <el-checkbox
            label="USB接口"
            v-model="channelForm.usbchecked"
          ></el-checkbox>
          <el-checkbox
            label="自动对焦"
            v-model="channelForm.zzdjchecked"
          ></el-checkbox>
          <el-checkbox
            label="自动曝光"
            v-model="channelForm.zdbgchecked"
            @change="bgchange"
          ></el-checkbox>
        </el-form-item>
        <div class="isoDiv">
          <el-form-item label="曝光时间">
            <el-input v-model="channelForm.bgsj" :disabled="bgflag"></el-input>
            <span class="infoSpan">(毫秒)</span>
          </el-form-item>
          <el-form-item label="ISO">
            <el-input v-model="channelForm.iso" :disabled="bgflag"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="模式选择">
          <el-checkbox
            label="HDR模式"
            v-model="channelForm.hdrchecked"
          ></el-checkbox>
          <el-checkbox
            label="夜晚模式"
            v-model="channelForm.ywchecked"
          ></el-checkbox>
        </el-form-item>
        <div class="roteAiBox">
          <el-form-item label="旋转角度">
            <el-select v-model="channelForm.roteval" placeholder="请选择">
              <el-option
                v-for="item in roteOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="AI识别">
            <el-select v-model="channelForm.aival" placeholder="请选择">
              <el-option
                v-for="item in aiOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item label="左上OSD">
          <el-input v-model="channelForm.ltosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
        <el-form-item label="右上OSD">
          <el-input v-model="channelForm.rtosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
        <el-form-item label="左下OSD">
          <el-input v-model="channelForm.lbosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
        <el-form-item label="右下OSD">
          <el-input v-model="channelForm.rbosd"></el-input>
          <span class="infoSpan">(多行使用\n换行)</span>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleclose" :disabled="channelsetLoading"
        >取 消</el-button
      >
      <el-button
        type="primary"
        :disabled="channelsetLoading"
        @click="handleConfim"
        :loading="channelLoading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import {
  getChannelListJoggle,
  getTermStatus,
  setTermCamera,
  getTermCameraRequest,
} from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      channelsetLoading: true,
      isShow: false,
      channelLoading: false,
      channelList: [], //通道选项
      channelForm: {
        zzbh: "",
        selectChannel: "",
        resolutionCX: "",
        resolutionCY: "",
        isImageZoomEnabled: 0,
        zoomVal: 1,
        videoSize: "",
        videoCX: "",
        videoCY: "",
        videoDuration: 15,
        ysl: 80,
        usbchecked: "",
        zzdjchecked: 1,
        zdbgchecked: 1,
        bgsj: "",
        iso: "",
        hdrchecked: "",
        ywchecked: "",
        roteval: "",
        aival: "",
        ltosd: "",
        rtosd: "",
        lbosd: "",
        rbosd: "",
      },
      bgflag: false,
      roteOptions: [
        {
          value: 0,
          label: "无旋转",
        },
        {
          value: 1,
          label: "0°",
        },
        {
          value: 2,
          label: "90°",
        },
        {
          value: 3,
          label: "180°",
        },
        {
          value: 4,
          label: "270°",
        },
      ],
      aiOptions: [
        {
          value: 0,
          label: "0-关闭当前通道AI识别",
        },
        {
          value: 1,
          label: "1-启用但不绘制区域",
        },
        {
          value: 2,
          label: "2-启用并绘制区域",
        },
      ],
      pictureSize: [
        {
          value: 0,
          label: "5376X3024",
        },
        {
          value: 1,
          label: "1920X1080",
        },
        {
          value: 2,
          label: "2048X1536",
        },
      ],
      videoOptionSize: [
        {
          value: 0,
          name: "默认",
          label: "720X480",
        },
        {
          value: 1,
          name: "QVGA",
          label: "320X240",
        },
        {
          value: 2,
          name: "VGA",
          label: "640X480",
        },
        {
          value: 3,
          name: "720p",
          label: "1280X720",
        },
        {
          value: 4,
          name: "1080p",
          label: "1920X1080",
        },
      ],
      requestid: "",
      searchNum: 0,
      searchTimer: null,
      setNum: 0,
      setTimer: null,
    };
  },
  computed: {
    areaData() {
      return this.$store.state.currentData;
    },
  },
  mounted() {
    this.channelForm.zzbh = this.areaData.cmdid;
    this.channelForm.roteval = this.roteOptions[0].value;
    this.channelForm.videoSize = this.videoOptionSize[0].value;
    this.channelForm.aival = this.aiOptions[0].value;
  },
  methods: {
    //获取通道
    getChannelSelect() {
      getChannelListJoggle({ termid: this.areaData.id })
        .then((res) => {
          this.channelList = res.data.list;
          this.channelForm.selectChannel = this.channelList[0].channelid;
          console.log(this.channelList);
          this.changeChannel();
        })
        .catch((err) => {});
    },
    //是否选中曝光
    bgchange(val) {
      console.log(val, "是否选中");
      if (val) {
        this.bgflag = true;
        this.channelForm.bgsj = "";
        this.channelForm.iso = "";
      } else {
        this.bgflag = false;
      }
    },
    changevideoChannel() {
      console.log(this.channelForm.videoSize);
      if (this.channelForm.videoSize == 0) {
        // this.channelForm.picSize = this.pictureSize[0].value;
        this.channelForm.videoCX = 720;
        this.channelForm.videoCY = 480;
      } else if (this.channelForm.videoSize == 1) {
        //this.channelForm.picSize = this.pictureSize[1].value;
        this.channelForm.videoCX = 320;
        this.channelForm.videoCY = 240;
      } else if (this.channelForm.videoSize == 2) {
        this.channelForm.videoCX = 640;
        this.channelForm.videoCY = 480;
      } else if (this.channelForm.videoSize == 3) {
        this.channelForm.videoCX = 1280;
        this.channelForm.videoCY = 720;
      } else if (this.channelForm.videoSize == 4) {
        //this.channelForm.picSize = this.pictureSize[2].value;
        this.channelForm.videoCX = 1920;
        this.channelForm.videoCY = 1080;
      }
    },
    //修改通道
    changeChannel() {
      console.log(this.channelForm.selectChannel);
      if (this.channelForm.selectChannel == 1) {
        // this.channelForm.picSize = this.pictureSize[0].value;
        this.channelForm.resolutionCX = 5376;
        this.channelForm.resolutionCY = 3024;
      } else if (
        this.channelForm.selectChannel == 2 ||
        this.channelForm.selectChannel == 3
      ) {
        //this.channelForm.picSize = this.pictureSize[1].value;
        this.channelForm.resolutionCX = 1920;
        this.channelForm.resolutionCY = 1080;
      } else if (this.channelForm.selectChannel == 4) {
        //this.channelForm.picSize = this.pictureSize[2].value;
        this.channelForm.resolutionCX = 2048;
        this.channelForm.resolutionCY = 1536;
      }
      this.searchBtn();
    },
    handleConfim() {
      console.log("点击了确定");
      console.log(this.channelForm);
      this.channelLoading = true;

      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          let params = [
            {
              name: "act",
              value: "cfg",
            },
            {
              name: "udp",
              value: 1,
            },
            {
              name: "reboot",
              value: 0,
            },
            {
              name: "pathType",
              value: 1,
            },
            {
              name: "updateType",
              value: 1,
            },
            {
              name: "path",
              value:
                "data/channels/" + this.channelForm.selectChannel + ".json",
            },
            {
              name: "configs",
              value: 21,
            },
            // {
            //   name: "resolutionCX",
            //   type: 0,
            //   value: this.channelForm.resolutionCX,
            // },
            { name: "name1", value: "resolutionCX" },
            { name: "value1", value: this.channelForm.resolutionCX },
            { name: "type1", value: 0 },
            // {
            //   name: "resolutionCY",
            //   type: 0,
            //   value: this.channelForm.resolutionCY,
            // },
            { name: "name2", value: "resolutionCY" },
            { name: "value2", value: this.channelForm.resolutionCY },
            { name: "type2", value: 0 },
            // {
            //   name: "quality",
            //   type: 0,
            //   value: this.channelForm.ysl,
            // },
            { name: "name3", value: "quality" },
            { name: "value3", value: this.channelForm.ysl },
            { name: "type3", value: 0 },
            // {
            //   name: "usbCamera",
            //   type: 0,
            //   value: this.channelForm.usbchecked ? 1 : 0,
            // },
            { name: "name4", value: "usbCamera" },
            { name: "value4", value: this.channelForm.usbchecked ? 1 : 0 },
            { name: "type4", value: 0 },
            // {
            //   name: "autoFocus",
            //   type: 0,
            //   value: this.channelForm.zzdjchecked ? 1 : 0,
            // },
            { name: "name5", value: "autoFocus" },
            { name: "value5", value: this.channelForm.zzdjchecked ? 1 : 0 },
            { name: "type5", value: 0 },
            // {
            //   name: "autoExposure",
            //   type: 0,
            //   value: this.channelForm.zdbgchecked ? 1 : 0,
            // },
            { name: "name6", value: "autoExposure" },
            { name: "value6", value: this.channelForm.zdbgchecked ? 1 : 0 },
            { name: "type6", value: 0 },
            // {
            //   name: "exposureTime",
            //   type: 0,
            //   value: this.channelForm.bgsj,
            // },
            { name: "name7", value: "exposureTime" },
            { name: "value7", value: this.channelForm.bgsj },
            { name: "type7", value: 0 },
            // {
            //   name: "sensibility",
            //   type: 0,
            //   value: this.channelForm.iso,
            // },
            { name: "name8", value: "sensibility" },
            { name: "value8", value: this.channelForm.iso },
            { name: "type8", value: 0 },
            // {
            //   name: "hdrMode",
            //   type: 0,
            //   value: this.channelForm.hdrchecked ? 1 : 0,
            // },
            { name: "name9", value: "hdrMode" },
            { name: "value9", value: this.channelForm.hdrchecked ? 1 : 0 },
            { name: "type9", value: 0 },
            // {
            //   name: "nightMode",
            //   type: 0,
            //   value: this.channelForm.ywchecked ? 1 : 0,
            // },
            { name: "name10", value: "nightMode" },
            { name: "value10", value: this.channelForm.ywchecked ? 1 : 0 },
            { name: "type10", value: 0 },
            // {
            //   name: "orientation",
            //   type: 0,
            //   value: this.channelForm.roteval,
            // },
            { name: "name11", value: "orientation" },
            { name: "value11", value: this.channelForm.roteval },
            { name: "type11", value: 0 },
            // {
            //   name: "recognization",
            //   type: 0,
            //   value: this.channelForm.aival,
            // },
            { name: "name12", value: "recognization" },
            { name: "value12", value: this.channelForm.aival },
            { name: "type12", value: 0 },
            // {
            //   name: "osd.leftTop",
            //   type: 1,
            //   value: this.channelForm.ltosd,
            // },
            { name: "name13", value: "osd.leftTop" },
            { name: "value13", value: this.channelForm.ltosd },
            { name: "type13", value: 1 },
            // {
            //   name: "osd.rightTop",
            //   type: 1,
            //   value: this.channelForm.rtosd,
            // },
            { name: "name14", value: "osd.rightTop" },
            { name: "value14", value: this.channelForm.rtosd },
            { name: "type14", value: 1 },
            // {
            //   name: "osd.rightBottom",
            //   type: 1,
            //   value: this.channelForm.lbosd,
            // },
            { name: "name15", value: "osd.leftBottom" },
            { name: "value15", value: this.channelForm.lbosd },
            { name: "type15", value: 1 },
            // {
            //   name: "osd.leftBottom",
            //   type: 1,
            //   value: this.channelForm.rbosd,
            // },
            { name: "name16", value: "osd.rightBottom" },
            { name: "value16", value: this.channelForm.rbosd },
            { name: "type16", value: 1 },
            //视频分辨率

            { name: "name17", value: "videoCX" },
            { name: "value17", value: this.channelForm.videoCX },
            { name: "type17", value: 0 },

            { name: "name18", value: "videoCY" },
            { name: "value18", value: this.channelForm.videoCY },
            { name: "type18", value: 0 },
            //视频时长
            { name: "name19", value: "videoDuration" },
            { name: "value19", value: this.channelForm.videoDuration },
            { name: "type19", value: 0 },
            //图片放大
            { name: "name20", value: "zoom" },
            { name: "value20", value: this.channelForm.isImageZoomEnabled },
            { name: "type20", value: 0 },
            //放大倍数
            { name: "name21", value: "zoomRatio" },
            { name: "value21", value: this.channelForm.zoomVal },
            { name: "type21", value: 0 },
          ];
          console.log(params);
          this.setTermFn(params);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    setTermFn(val) {
      setTermCamera({
        termId: this.areaData.id,
        list: val,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;

          this.getTakechannelStatus();
          clearInterval(this.setTimer);
          this.setTimer = window.setInterval(() => {
            this.getTakechannelStatus();
            this.setNum++;
          }, 1000);
        })
        .catch((err) => {});
    },
    getTakechannelStatus() {
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          console.log(res);
          if (res.data.success == 1) {
            window.clearInterval(this.setTimer);
            this.setTimer = null;
            this.setNum = 0;
            this.isShow = false;
            this.channelLoading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "通道设置成功",
              type: "success",
            });
          } else if (this.setNum > 3) {
            // this.isShow = false;
            window.clearInterval(this.setTimer);
            this.setTimer = null;
            this.setNum = 0;
            this.channelLoading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "通道设置失败",
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
    searchBtn() {
      this.channelsetLoading = true;
      //--act=cfg --udp=1 --cmdid=XY-ANDROIDSIM-002 --pathType=1 --updateType=0 --path=data/channels/1.json --configs=3 --name1=osd.leftTop --type1=1 --value1="OSD for LeftTop %%CH%%" --name2=osd.rightTop --type2=255 --value2="OSD for rIGHTTop %%CH%%" --name3=usbCamera --type3=0 --value3=1 --clientid=5 --reqid=TS
      getTermStatus({ termId: this.areaData.id }).then((res) => {
        console.log(res);
        if (res.data.isonline) {
          let params = [
            {
              name: "act",
              value: "cfg",
            },
            {
              name: "udp",
              value: 1,
            },

            {
              name: "pathType",
              value: 1,
            },
            {
              name: "updateType",
              value: 0,
            },
            {
              name: "path",
              value:
                "data/channels/" + this.channelForm.selectChannel + ".json",
            },
          ];
          console.log(params);
          this.searchTermFn(params);
        } else {
          this.$message({
            duration: 1500,
            showClose: true,
            message: "装置下线，发送指令失败",
            type: "error",
          });
        }
      });
    },
    searchTermFn(val) {
      setTermCamera({
        termId: this.areaData.id,
        list: val,
      })
        .then((res) => {
          console.log(res);
          this.requestid = res.data.requestId;
          this.getsearchchannelStatus();
          clearInterval(this.searchTimer);
          this.searchTimer = window.setInterval(() => {
            this.getsearchchannelStatus();
            this.searchNum++;
          }, 1000);
        })
        .catch((err) => {});
    },
    getsearchchannelStatus() {
      getTermCameraRequest({ requestid: this.requestid })
        .then((res) => {
          console.log(res);
          if (res.data.success == 1) {
            window.clearInterval(this.searchTimer);
            this.searchTimer = null;
            this.searchNum = 0;
            this.channelsetLoading = false;
            // this.isShow = false;
            // this.channelLoading = false;
            console.log(res.data);
            console.log(JSON.parse(res.data.data));
            const resultData = JSON.parse(res.data.data);
            const resultContent = JSON.parse(
              decodeURIComponent(escape(window.atob(resultData.content)))
            );
            console.log(resultContent);

            this.channelForm.ysl = resultContent.quality;
            this.channelForm.usbchecked =
              resultContent.usbCamera == 1 ? true : false;
            this.channelForm.zzdjchecked =
              resultContent.autoFocus == 1 ? true : false;
            this.channelForm.zdbgchecked =
              resultContent.autoExposure == 1 ? true : false;
            this.channelForm.bgsj =
              resultContent.exposureTime == 0 ? "" : resultContent.exposureTime;
            this.channelForm.iso =
              resultContent.sensibility == 0 ? "" : resultContent.sensibility;
            this.channelForm.hdrchecked =
              resultContent.hdrMode == 1 ? true : false;
            this.channelForm.ywchecked =
              resultContent.nightMode == 1 ? true : false;
            this.channelForm.aival = resultContent.recognization;
            this.channelForm.roteval = resultContent.orientation;
            this.channelForm.rtosd = resultContent.osd.rightTop;
            this.channelForm.ltosd = resultContent.osd.leftTop;
            this.channelForm.lbosd = resultContent.osd.leftBottom;
            this.channelForm.rbosd = resultContent.osd.rightBottom;
            // this.channelForm.videoSize = resultContent.;
            this.channelForm.videoCX = resultContent.videoCX;
            this.channelForm.videoCY = resultContent.videoCY;
            if (this.channelForm.zdbgchecked) {
              this.bgflag = true;
              this.channelForm.bgsj = "";
              this.channelForm.iso = "";
            } else {
              this.bgflag = false;
            }
            if (
              this.channelForm.videoCX == 720 &&
              this.channelForm.videoCY == 480
            ) {
              // this.channelForm.picSize = this.pictureSize[0].value;
              this.channelForm.videoSize = 0;
            } else if (
              this.channelForm.videoCX == 320 &&
              this.channelForm.videoCY == 240
            ) {
              //this.channelForm.picSize = this.pictureSize[1].value;
              this.channelForm.videoSize = 1;
            } else if (
              this.channelForm.videoCX == 640 &&
              this.channelForm.videoCY == 480
            ) {
              this.channelForm.videoSize = 2;
            } else if (
              this.channelForm.videoCX == 1280 &&
              this.channelForm.videoCY == 720
            ) {
              this.channelForm.videoSize = 3;
            } else if (
              this.channelForm.videoCX == 1920 &&
              this.channelForm.videoCY == 1080
            ) {
              //this.channelForm.picSize = this.pictureSize[2].value;

              this.channelForm.videoSize = 4;
            }
            this.channelForm.videoDuration = resultContent.videoDuration;

            this.$message({
              duration: 1500,
              showClose: true,
              message: "通道查询成功",
              type: "success",
            });
          } else if (this.searchNum > 3) {
            // this.isShow = false;
            // this.channelLoading = false;
            window.clearInterval(this.searchTimer);
            this.searchTimer = null;
            this.searchNum = 0;
            this.channelsetLoading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "通道查询失败",
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
      this.channelForm.zzbh = this.areaData.cmdid;
      this.getChannelSelect();
      this.changevideoChannel();
      console.log(this.areaData);
    },
    handleclose() {
      this.isShow = false;
      this.bgflag = false;
      this.channelLoading = false;
      this.channelForm.zzbh = "";
      this.channelForm.ysl = 80;
      this.channelForm.usbchecked = "";
      this.channelForm.zzdjchecked = 1;
      this.channelForm.zdbgchecked = 1;
      this.channelForm.bgsj = "";
      this.channelForm.iso = "";
      this.channelForm.hdrchecked = "";
      this.channelForm.ywchecked = "";
      this.channelForm.rtosd = "";
      this.channelForm.ltosd = "";
      this.channelForm.lbosd = "";
      this.channelForm.rbosd = "";
      this.channelForm.videoSize = "";
      this.channelForm.videoCX = "";
      this.channelForm.videoCY = "";
      this.channelForm.videoDuration = 15;
      window.clearInterval(this.searchTimer);
      this.searchTimer = null;
      this.searchNum = 0;
    },
  },
};
</script>
<style lang="less">
.setChannelDialog {
  .zzinfo {
    position: absolute;
    top: 22px;
    left: 120px;
  }

  .el-dialog__body {
    padding-bottom: 0px;
    .el-form-item--small.el-form-item {
      margin-bottom: 12px;
    }
    .channelsetBox {
      width: 100%;
      // height: 400px;
      //background: #fcc;
      .el-input {
        width: 300px;
      }
    }
    .infoSpan {
      margin-left: 8px;
    }
    .photoSize {
      .el-form-item__content {
        display: flex;
        //justify-content: space-between;
        .el-input {
          width: 90px;
          margin-right: 12px;
        }
      }
    }
    .photoinfo {
      display: flex;
      .el-input {
        width: 80px;
      }
    }
    .roteAiBox {
      display: flex;
      .el-input {
        width: 150px;
      }
    }
    .picZoomClass {
      display: flex;

      .zoomBox {
        .el-form-item__content {
          display: flex;
          align-items: center;
        }
      }
      .el-slider {
        width: 200px;
        margin-right: 12px;
        .el-slider__runway {
          height: 8px;
          margin: 12px 0;
        }
        .el-slider__button-wrapper {
          height: 24px;
          width: 24px;
          position: absolute;
          z-index: 1001;
          top: -9px;
        }
        .el-input {
          width: 100px;
        }
      }
    }
    .videoDiv {
      display: flex;
      .el-select {
        .el-input {
          width: 160px;
        }
      }
      .el-input {
        width: 100px;
      }
    }
    .isoDiv {
      display: flex;

      .el-input {
        width: 140px;
      }
    }
    .videoclass {
      // .el-form-item__content {
      //   display: flex;
      //   //justify-content: space-between;
      //   .el-select {
      //     width: 164px;
      //     margin-right: 12px;
      //   }
      // }
    }
  }
  .dialog-footer {
    .el-button--default,
    .el-button--primary {
      width: 80px !important;
      margin-bottom: 0px !important;
    }
    .el-button + .el-button {
      margin-left: 10px !important;
    }
  }
}
</style>