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

<template>
  <el-dialog
    class="setAppDialog"
    title="App设置"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="880px"
    @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="appsetLoading">
      <el-form ref="form" :model="appForm" label-width="160px">
        <el-form-item label="装置编号">
          <el-input v-model="appForm.CMDID"></el-input>
        </el-form-item>
        <el-form-item label="装置通道数">
          <el-input v-model="appForm.channels"></el-input>
        </el-form-item>
        <el-form-item label="装置型号 ">
          <el-input v-model="appForm.model"></el-input>
        </el-form-item>
        <el-form-item label="装置名称">
          <el-input v-model="appForm.equipName"></el-input>
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input v-model="appForm.bsManufacturer"></el-input>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-date-picker
            v-model="appForm.productionDate"
            value-format="timestamp"
            type="date"
            placeholder="选择日期"
            @focus="handleFocus"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图像质量">
          <el-input v-model="appForm.imgQuality"></el-input>
          <!-- <span class="infoSpan">(0-100的整数)</span> -->
        </el-form-item>
        <el-form-item label="心跳周期" class="heartClass">
          <el-input v-model="appForm.heartbeat"></el-input>
          <span class="infoSpan">(分)</span>
        </el-form-item>

        <!-- <el-form-item label="参数设置">
          <el-checkbox
            label="报文子包起始号"
            v-model="appForm.usbchecked"
          ></el-checkbox>
        </el-form-item> -->
        <el-form-item label="报文子包起始号">
          <el-select v-model="appForm.upgradePacketBase" placeholder="请选择">
            <el-option
              v-for="item in PacketBaseOptions"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规约">
          <el-select v-model="appForm.protocol" placeholder="请选择">
            <el-option
              v-for="item in protocolOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网络协议">
          <el-radio-group
            v-model="appForm.networkProtocol"
            @input="changenetwork"
          >
            <el-radio
              v-for="item in netWorkList"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="CMA服务器ip">
          <el-input v-model="appForm.server"></el-input>
        </el-form-item>
        <el-form-item label="CMA服务器端口" class="cmaClass">
          <el-input v-model="appForm.port"></el-input>
          <span class="infoSpan">(1025-65535)</span>
        </el-form-item>

        <el-form-item label="图像数据分包大小" class="packetClass">
          <el-input v-model="appForm.packetSize"></el-input>
        </el-form-item>

        <el-form-item label="日志保留时间" class="packetClass">
          <el-input v-model="appForm.timeForKeepingLogs"></el-input>
          <span class="infoSpan">(天)</span>
        </el-form-item>

        <el-form-item label="未上传图像的保留时间" class="packetClass">
          <el-input v-model="appForm.timeForKeepingPhotos"></el-input>
          <span class="infoSpan">(天)</span>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleclose" :disabled="appsetLoading"
        >取 消</el-button
      >
      <el-button
        type="primary"
        :disabled="appsetLoading"
        @click="handleConfim"
        :loading="appLoading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import {
  getChannelListJoggle,
  getTermStatus,
  setTermCamera,
  getTermCameraRequest,
} from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      appsetLoading: true,
      isShow: false,
      appLoading: false,
      netWorkList: [
        {
          value: 0,
          label: "tcp",
        },
        {
          value: 1,
          label: "udp",
        },
      ], //通道选项
      appForm: {
        channels: 4, //装置通道数,程序默认值为4
        packetSize: 2048, //图像数据分包大小
        timeForKeepingLogs: 15, //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
        timeForKeepingPhotos: 15, //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
        imgQuality: "", //图像质量
        heartbeat: 10, //心跳周期
        upgradePacketBase: 0, //升级报文中，子包起始号 一般可设置的值是 0或者1
        protocol: "", // 规约（湖南、浙江 ...） 修改后需重启
        networkProtocol: 1, //  网络协议 0: tcp 1 udp 修改后需重启
        //network: "", // 使用的网络， 暂时不做配置
        CMDID: "", // 装置编号  修改后需重启
        server: "", // CMA 服务器ip  修改后需重启
        port: "", // CMA服务器端口 1025-65535   修改后需重启
        model: "", // 装置型号
        equipName: "", // 装置名称
        bsManufacturer: "", // 生产厂家
        productionDate: "", // 生产日期
      },
      protocolOptions: [
        {
          id: 65280,
          name: "国网I1",
        },
        {
          id: 65296,
          name: "陕西",
        },
        {
          id: 65281,
          name: "安徽",
        },
        {
          id: 65282,
          name: "江苏",
        },
        {
          id: 65283,
          name: "湖南",
        },
        {
          id: 65284,
          name: "浙江",
        },
        {
          id: 65285,
          name: "河南",
        },
        {
          id: 65286,
          name: "河南郑州",
        },
      ],
      PacketBaseOptions: [
        {
          id: 0,
          value: 0,
        },
        {
          id: 1,
          value: 1,
        },
      ],
      requestid: "",
      searchNum: 0,
      searchTimer: null,
      setNum: 0,
      setTimer: null,
    };
  },
  computed: {
    areaData() {
      return this.$store.state.currentData;
    },
  },
  mounted() {
    // this.appForm.zzbh = this.areaData.cmdid;
    this.appForm.timeForKeepingPhotos =
      this.appForm.timeForKeepingPhotos * 86400;
    this.appForm.timeForKeepingLogs = this.appForm.timeForKeepingLogs * 86400;
    // this.appForm.aival = this.aiOptions[0].value;
  },
  methods: {
    handleFocus() {
      if (this.appForm.productionDate == "") {
        this.appForm.productionDate = new Date();
      }
    },
    changenetwork() {
      console.log(this.appForm.networkProtocol);
    },
    handleConfim() {
      console.log("点击了确定");
      console.log(this.appForm);

      this.appLoading = 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: 1,
            },
            {
              name: "pathType",
              value: 1,
            },
            {
              name: "updateType",
              value: 1,
            },
            {
              name: "path",
              value: "data/App.json",
            },
            {
              name: "configs",
              value: 16,
            },
            //装置通道数
            { name: "name1", value: "channels" },
            { name: "value1", value: this.appForm.channels },
            { name: "type1", value: 0 },
            //图像数据分包大小
            { name: "name2", value: "packetSize" },
            { name: "value2", value: this.appForm.packetSize },
            { name: "type2", value: 0 },
            //日志保留时间，单位秒 程序默认值为15天
            { name: "name3", value: "timeForKeepingLogs" },
            { name: "value3", value: this.appForm.timeForKeepingLogs * 86400 },
            { name: "type3", value: 0 },
            //未上传图像的保留时间
            { name: "name4", value: "timeForKeepingPhotos" },
            {
              name: "value4",
              value: this.appForm.timeForKeepingPhotos * 86400,
            },
            { name: "type4", value: 0 },
            //图像质量
            { name: "name5", value: "imgQuality" },
            { name: "value5", value: this.appForm.imgQuality },
            { name: "type5", value: 0 },
            //规约（湖南、浙江 ...） 修改后需重启
            { name: "name6", value: "protocol" },
            { name: "value6", value: this.appForm.protocol },
            { name: "type6", value: 0 },
            // 网络协议 0: tcp 1 udp 修改后需重启
            { name: "name7", value: "networkProtocol" },
            { name: "value7", value: this.appForm.networkProtocol },
            { name: "type7", value: 0 },
            //装置编号  修改后需重启
            { name: "name8", value: "CMDID" },
            { name: "value8", value: this.appForm.CMDID },
            { name: "type8", value: 1 },
            //CMA 服务器ip  修改后需重启
            { name: "name9", value: "server" },
            { name: "value9", value: this.appForm.server },
            { name: "type9", value: 1 },
            //CMA服务器端口 1025-65535   修改后需重启
            { name: "name10", value: "port" },
            { name: "value10", value: this.appForm.port },
            { name: "type10", value: 0 },
            //装置型号
            { name: "name11", value: "model" },
            { name: "value11", value: this.appForm.model },
            { name: "type11", value: 1 },
            //EquipName 装置名称
            { name: "name12", value: "equipName" },
            { name: "value12", value: this.appForm.equipName },
            { name: "type12", value: 1 },
            //BsManufacturer 生产厂家
            { name: "name13", value: "bsManufacturer" },
            { name: "value13", value: this.appForm.bsManufacturer },
            { name: "type13", value: 1 },
            //productionDate 生产日期
            { name: "name14", value: "productionDate" },
            { name: "value14", value: this.appForm.productionDate },
            { name: "type14", value: 0 },
            //心跳周期
            { name: "name15", value: "heartbeat" },
            { name: "value15", value: this.appForm.heartbeat },
            { name: "type15", value: 0 },
            //子包
            { name: "name16", value: "upgradePacketBase" },
            { name: "value16", value: this.appForm.upgradePacketBase },
            { name: "type16", value: 0 },
          ];
          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.appLoading = 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.appLoading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "设置失败",
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
    searchBtn() {
      this.appsetLoading = 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/App.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.appsetLoading = 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.appForm.channels = resultContent.channels; //装置通道数,程序默认值为4
            this.appForm.packetSize = resultContent.packetSize; //图像数据分包大小
            this.appForm.timeForKeepingLogs =
              resultContent.timeForKeepingLogs / 86400; //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
            this.appForm.timeForKeepingPhotos =
              resultContent.timeForKeepingPhotos / 86400; //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
            this.appForm.imgQuality = resultContent.imgQuality; //图像质量
            this.appForm.heartbeat = resultContent.heartbeat; //心跳周期
            this.appForm.upgradePacketBase = resultContent.upgradePacketBase; //升级报文中，子包起始号 一般可设置的值是 0或者1
            this.appForm.protocol = resultContent.protocol; // 规约（湖南、浙江 ...） 修改后需重启
            this.appForm.networkProtocol = resultContent.networkProtocol; //  网络协议 0: tcp 1 udp 修改后需重启
            // this.appForm.network = resultContent.network; // 使用的网络， 暂时不做配置
            this.appForm.CMDID = resultContent.CMDID; // 装置编号  修改后需重启
            this.appForm.server = resultContent.server; // CMA 服务器ip  修改后需重启
            this.appForm.port = resultContent.port; // CMA服务器端口 1025-65535   修改后需重启
            this.appForm.model = resultContent.model; // 装置型号
            this.appForm.equipName = resultContent.equipName; // 装置名称
            this.appForm.bsManufacturer = resultContent.bsManufacturer; // 生产厂家
            this.appForm.productionDate = resultContent.productionDate; // 生产日期
            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.appsetLoading = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "查询失败",
              type: "error",
            });
          }
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
      this.appForm.CMDID = this.areaData.cmdid;
      this.searchBtn();
      console.log(this.areaData);
    },
    handleclose() {
      this.isShow = false;
      this.bgflag = false;
      this.appLoading = false;
      this.appForm.channels = 4; //装置通道数,程序默认值为4
      this.appForm.packetSize = 2048; //图像数据分包大小
      this.appForm.timeForKeepingLogs = 15; //效范围：1*86400（含）-45*86400（含）  不设置的默认值为 15*86400
      this.appForm.timeForKeepingPhotos = 15; //有效范围：1*86400（含）-45*86400（含）   不设置的默认值为 15*86400
      this.appForm.imgQuality = ""; //图像质量
      this.appForm.heartbeat = 10; //心跳周期
      this.appForm.upgradePacketBase = 0; //升级报文中，子包起始号 一般可设置的值是 0或者1
      this.appForm.protocol = this.areaData.protocol; // 规约（湖南、浙江 ...） 修改后需重启
      this.appForm.networkProtocol = 0; //  网络协议 0: tcp 1 udp 修改后需重启
      // this.appForm.network = resultContent.network; // 使用的网络， 暂时不做配置
      this.appForm.CMDID = this.areaData.cmdid; // 装置编号  修改后需重启
      this.appForm.server = ""; // CMA 服务器ip  修改后需重启
      this.appForm.port = ""; // CMA服务器端口 1025-65535   修改后需重启
      this.appForm.model = ""; // 装置型号
      this.appForm.equipName = ""; // 装置名称
      this.appForm.bsManufacturer = ""; // 生产厂家
      this.appForm.productionDate = ""; // 生产日期
      window.clearInterval(this.searchTimer);
      this.searchTimer = null;
      this.searchNum = 0;
    },
  },
};
</script>
<style lang="less">
.setAppDialog {
  .zzinfo {
    position: absolute;
    top: 22px;
    left: 120px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .el-dialog__body {
    padding-bottom: 0px;
    .el-form-item--small.el-form-item {
      margin-bottom: 12px;
    }
    .channelsetBox {
      width: 100%;
      .el-input {
        width: 250px;
      }
    }
    .infoSpan {
      margin-left: 8px;
    }
    .heartClass {
      .el-input {
        width: 190px;
      }
    }
    .cmaClass {
      .el-input {
        width: 180px;
      }
    }
    .packetClass {
      .el-input {
        width: 200px;
      }
    }
  }
  .dialog-footer {
    .el-button--default,
    .el-button--primary {
      width: 80px !important;
      margin-bottom: 0px !important;
    }
    .el-button + .el-button {
      margin-left: 10px !important;
    }
  }
}
</style>