<!--  -->
<template>
  <div class="data24box">
    <div class="baselistbox_top">
      <div class="baselistbox_top_title">
        <p @click="backtrack" style="cursor: pointer">
          <i class="el-icon-back"></i>
          <span>返回</span>
        </p>
        <p>24小时数据</p>
      </div>
      <p class="baselistbox_top_line"></p>
      <div class="baselistbox_top_search">
        <div style="width;100%;display: flex;justify-content: space-between;">
          <div style="font-size: 18px; font-weight: 700">实时数据</div>
          <div style="display: flex">
            <div class="newTime_time">{{ (uptime * 1000) | formatTime }}</div>
            <div>
              <el-button
                @click="refresh"
                type="primary"
                icon="el-icon-refresh-right"
                size="mini"
              ></el-button>
              <!-- 设置要素名称 -->
              <el-button
                @click="setFactor()"
                type="warning"
                icon="el-icon-setting"
                size="mini"
              ></el-button>
            </div>
          </div>
        </div>
        <div class="elemenbox">
          <div class="factorBox" v-if="realTimeArr.length !== 0">
            <div
              class="factorBox_ul"
              :class="
                realTimeArr.length % 11 == 2
                  ? 'six-product'
                  : '' || realTimeArr.length % 11 == 3
                  ? 'three-product'
                  : '' || realTimeArr.length % 11 == 4
                  ? 'four-product'
                  : '' || realTimeArr.length % 11 == 5
                  ? 'five-product'
                  : '' || realTimeArr.length % 11 == 6
                  ? 'six-product'
                  : '' || realTimeArr.length % 11 == 7
                  ? 'seven-product'
                  : '' || realTimeArr.length % 11 == 8
                  ? 'eight-product'
                  : '' || realTimeArr.length % 11 == 9
                  ? 'nine-product'
                  : '' || realTimeArr.length % 11 == 10
                  ? 'ten-product'
                  : ''
              "
            >
              <div
                class="factorBox_li"
                v-for="(item, index) in realTimeArr"
                :key="index"
              >
                <div
                  class="factorBox_li_impression"
                  :style="
                    ' background:' +
                    'url(' +
                    item.img +
                    ')no-repeat; background-size: 100% 100%;'
                  "
                >
                  <div
                    style="font-size: 15px; line-height: 30px; height: 28px"
                  ></div>

                  <!-- 测试 -->
                  <img
                    style="
                      width: 30px;
                      height: 30px;
                      position: absolute;
                      left: 37px;
                      top: 25px;
                    "
                    :src="
                      '../../../../static/images/weather/icon_' +
                      item.tu +
                      '.png'
                    "
                    alt=""
                    class=""
                  />
                  <!-- 测试 -->

                  <div
                    class="factorBox_li_number"
                    style="
                      line-height: 16px;
                      height: 35px;
                      margin: 45px 0 0 -23px;
                      width: 139px;
                    "
                  >
                    {{ item.num }}
                  </div>
                </div>
                <div class="factorBox_li_text" :title="item.name">
                  {{ item.name }}
                </div>
                <div class="factorBox_li_text2">
                  {{ item.unit }}
                </div>
              </div>
            </div>
          </div>

          <!-- 暂无数据 -->
          <div class="expertDiagnosis_referral_units_not" v-else>暂无数据</div>
        </div>
      </div>
    </div>
    <div class="baselistbox_table">
      <el-table :data="data24" stripe style="width: 100%">
        <el-table-column prop="e" label="传感器通道"></el-table-column>
        <el-table-column prop="name" label="通道名称"></el-table-column>
        <el-table-column prop="min" label="最小值"></el-table-column>
        <el-table-column prop="mintime" label="最小时间">
          <template v-if="scope.row.mintime" slot-scope="scope">{{
            (scope.row.mintime * 1000) | formatTime
          }}</template>
        </el-table-column>
        <el-table-column prop="max" label="最大值"></el-table-column>
        <el-table-column prop="maxtime" label="最大时间">
          <template v-if="scope.row.maxtime" slot-scope="scope">{{
            (scope.row.maxtime * 1000) | formatTime
          }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bgc"></div>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      title="修改要素名称"
      :visible.sync="setFactorShow"
      width="580px"
    >
      <template>
        <el-tabs
          v-loading="simLoading"
          element-loading-text="数据请求中"
          v-model="activeName"
        >
          <el-table
            :data="tableDataA"
            :row-class-name="tableRowClassName"
            border
            style="width: 100%; margin: 0.25rem 0 0 0"
          >
            <el-table-column prop="ekey" label="通道号"></el-table-column>
            <el-table-column
              prop="name"
              :render-header="renderHeader"
              label="名称"
            >
              <template slot-scope="scope">
                <el-input
                  class="warningMessage-ipt"
                  v-model="scope.row.name"
                  type="text"
                  @blur="amendFactor(scope.row)"
                  clearable
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="要素"> </el-table-column>
          </el-table>
        </el-tabs>
      </template>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
  data() {
    return {
      //24小时数据
      data24: [],
      id: this.$route.params.id,
      effect: 0,

      // 实时状态
      zanwu: "/images/expertDiagnosis/zanwu.png",
      realTimeArr: [],
      imgArr: [
        "../../../../static/images/weather/3.png",
        "../../../../static/images/weather/4.png",
        "../../../../static/images/weather/5.png",
        "../../../../static/images/weather/6.png",
        "../../../../static/images/weather/7.png",
      ],
      uptime: "", //时间戳

      // 设备手动控制、阈值
      isShow: true,
      value: true,

      // 手动控制
      manualArr: [], //手动
      dialogVisible: false,
      switchName: "", //修改名称
      index: null,

      // 定时控制
      timingArr: [], //定时控制

      // 阈值控制
      thresholdArr: [], //阈值控制

      // 修改要素名称
      setFactorShow: false,
      tableDataA: [],
      activeName: "sim", // sim卡切换状态
      simLoading: false, //sim卡加载loading
      equip_id: "", //设备id

      // 修改阈值控制最大最小值
      dialogVisibleA: false,
      maxValIpt: "", //最大值输入框
      minValIpt: "", //最小值输入框
      radio: "1", //程序选择
      offShow: true, //程序

      // 修改定时控制
      dialogVisibleB: false, // 弹框
      // 开始时间
      options: [
        {
          value: "0",
          label: "0",
        },
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "6",
          label: "6",
        },
        {
          value: "7",
          label: "7",
        },
        {
          value: "8",
          label: "8",
        },
        {
          value: "9",
          label: "9",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "11",
          label: "11",
        },
        {
          value: "12",
          label: "12",
        },
        {
          value: "13",
          label: "13",
        },
        {
          value: "14",
          label: "14",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "16",
          label: "16",
        },
        {
          value: "17",
          label: "17",
        },
        {
          value: "18",
          label: "18",
        },
        {
          value: "19",
          label: "19",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "21",
          label: "21",
        },
        {
          value: "22",
          label: "22",
        },
        {
          value: "23",
          label: "23",
        },
      ],
      value: "",
      // 工作时长
      optionsA: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "6",
          label: "6",
        },
        {
          value: "7",
          label: "7",
        },
        {
          value: "8",
          label: "8",
        },
        {
          value: "9",
          label: "9",
        },
        {
          value: "10",
          label: "10",
        },
        {
          value: "11",
          label: "11",
        },
        {
          value: "12",
          label: "12",
        },
        {
          value: "13",
          label: "13",
        },
        {
          value: "14",
          label: "14",
        },
        {
          value: "15",
          label: "15",
        },
        {
          value: "16",
          label: "16",
        },
        {
          value: "17",
          label: "17",
        },
        {
          value: "18",
          label: "18",
        },
        {
          value: "19",
          label: "19",
        },
        {
          value: "20",
          label: "20",
        },
        {
          value: "21",
          label: "21",
        },
        {
          value: "22",
          label: "22",
        },
        {
          value: "23",
          label: "23",
        },
        {
          value: "24",
          label: "24",
        },
      ],
      valueA: "",
      //数据预警
      simCodeVisible: false,
      phoneNumberA: "", //手机号
      phoneNumber: "",
      simLoading: false,
      activeName: "sim",
      tableData: [],
      idoptions: [], //id选择器
      idvalue: this.$route.params.id, //当前id
    };
  },
  watch: {
    // 手动控制-修改名称
    dialogVisible(val) {
      if (val == false) {
        this.switchName = "";
        this.index = null;
      }
    },

    // 修改阈值控制最大最小值
    dialogVisibleA(val) {
      if (val == false) {
        this.maxValIpt = "";
        this.minValIpt = "";
        this.index = null;
      }
    },

    // 修改阈值控制程序
    radio(val) {
      if (val == 1) {
        // 程序一
        this.offShow = true;
      } else if (val == 2) {
        // 程序二
        this.offShow = false;
      }
    },
  },
  mounted() {
    this.realTimeAxios(); //实时状态
  },
  methods: {
    backtrack() {
      this.$router.go(-1);
    },
    // 24小时数据
    get24List(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=weather.weather.qxz_day_data",
        data: this.qs.stringify({ device_id: id }),
      }).then((res) => {
        let arr = new Array();
        let data = res.data.data.data;
        this.data24 = [];
        if (data && data.length > 0) {
          for (let item of data) {
            var ename = item.ekey;
            ename = ename.split("e");
            arr.push({
              // e: item.ekey,
              e: ename[1],
              name: item.enum[1],
              min: item.min == "-99.99" ? "N/A" : item.min,
              mintime: item.mintime,
              max: item.max == "-99.99" ? "N/A" : item.max,
              maxtime: item.maxtime,
            });
          }
          console.log(arr);
          this.data24 = arr;
        }
      });
    },
    // swiper初始化
    switchChu() {
      var effect = this.effect;
      var swiper = new Swiper(".swiper-container", {
        speed: 1500,
        slidesPerView: 10,
        spaceBetween: 30,
        observer: true,
        centeredSlides: true,
      });
    },
    refresh() {
      if (document.getElementsByClassName("el-message").length == 0) {
        this.$message.success("指令下发成功");
      }
      this.realTimeAxios()
    },
    // 实时状态
    realTimeAxios() {
      var that = this;
      var id = that.id;
      var postData = that.qs.stringify({
        device_id: id,
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_status",
          data: postData,
        })
        .then((res) => {
          if (res.data.message == "") {
            let arr = new Array();
            let conf = res.data.data.conf;
            let dat = res.data.data.dat;
            let img = this.imgArr;
            let quantity = 0; //测试用
            for (let i2 in conf) {
              if (conf[i2]) {
                quantity++;
              }
            }
            // 背景图片
            if (quantity > img.length) {
              var num = quantity - img.length;
              var imgs = this.imgArr;
              for (var j = 0; j < num; j++) {
                imgs.push(imgs[j]);
              }
            } else {
              var imgs = img;
            }
            for (let i1 in conf) {
              if (conf[i1]) {
                let arr2 = conf[i1].split("#");
                let obj = {};
                obj.e = "通道" + i1.slice(1);
                obj.name = arr2[0];
                obj.unit = arr2[1];
                obj.ekey = i1;
                var i = i1.replace("e", "");
                obj.img = imgs[i - 1];
                for (let i2 in dat) {
                  if (i1 == i2) {
                    let arr3 = dat[i2].split("#");
                    obj.tu = arr3[1];
                    obj.num = arr3[0] == "-99.99" ? "N/A" : arr3[0];
                    obj.icon = arr3[1];
                    if (obj.icon == "117") {
                      obj["num"] = obj.num == 0 ? "无" : "有";
                    }
                    arr.push(obj);
                  }
                }
                quantity++;
              }
            }
            arr = arr.sort((a, b) => {
              return a.e.slice(2) - b.e.slice(2);
            });
            this.uptime = res.data.data.dat.uptime;
            // this.realTimeArr = arr;
            var list = [];
            console.log(arr);
            for (var i = 0; i < arr.length; i++) {
              if (arr[i].icon !== undefined && arr[i].tu !== undefined) {
                list.push(arr[i]);
              }
            }
            // console.log(list)
            this.realTimeArr = list;
            console.log(this.realTimeArr);
            this.thresholdValAxios(); //气象站开关、阈值状态
          }
        })
        .catch((err) => {
          this.$message.error("获取数据失败！");
          console.log(err);
        });
    },

    // 气象站开关、阈值状态接口
    thresholdValAxios() {
      var that = this;
      var id = that.id;
      let postData = that.qs.stringify({
        device_id: id,
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_switch_status",
          data: postData,
        })
        .then((res) => {
          var qxz_switch = res.data.data.qxz_switch; //设备手动控制
          var switch_name = res.data.data.switch_name; // 设备手动控制开关中文名称
          var timing_list = res.data.data.timing_list; // 设备定时控制
          var auto_list = res.data.data.auto_list; //设备阈值控制

          // 手动控制
          // console.log(JSON.parse(qxz_switch))
          if (qxz_switch !== "") {
            // 有数据-设备手动控制
            qxz_switch = eval("(" + qxz_switch + ")");
            switch_name = eval("(" + switch_name + ")");
            var arr = [];
            for (var i in qxz_switch) {
              if (qxz_switch[i].JK !== 255) {
                arr.push({
                  aisle: "通道" + (qxz_switch[i].JK + 1), //通道号
                  status: qxz_switch[i].status == 0 ? false : true, //开关状态
                  ekey: qxz_switch[i].JK + 1, //通道号
                  name:
                    switch_name[i].name == ""
                      ? "开关" + i
                      : switch_name[i].name, // 开关名称
                  way: i,
                });
              }
            }
            this.manualArr = arr;
            // console.log("手动控制 手动控制 手动控制 手动控制 ")
          }

          // 定时控制
          if (timing_list !== "") {
            // 有数据-定时控制 timingArr
            timing_list = eval("(" + timing_list + ")");
            var arr = [];
            // console.log(timing_list);
            for (var i in timing_list) {
              if (timing_list[i].JK !== 255) {
                if (
                  // timing_list[i].JK !== 255 &&
                  timing_list[i].Duration !== 32767 &&
                  timing_list[i].StartTime !== 32767
                ) {
                  var a = true;
                } else {
                  var a = false;
                }
                arr.push({
                  aisle: "通道" + (timing_list[i].JK + 1), //通道
                  duration: timing_list[i].Duration, // 工作时长
                  startTime: timing_list[i].StartTime, // 时间范围
                  name:
                    switch_name[i].name == ""
                      ? "开关" + i
                      : switch_name[i].name, //开关名称
                  status: a, //开关状态
                  JK: timing_list[i].JK,
                });
              }
            }
            // console.log(arr);
            this.timingArr = arr;
          }

          // 阈值控制
          if (auto_list !== "") {
            // 有数据-设备阈值控制 thresholdArr
            auto_list = eval("(" + auto_list + ")");
            var arr = [];
            for (var i in auto_list) {
              if (auto_list[i].JK !== 255) {
                if (
                  auto_list[i].upper !== 32767 &&
                  auto_list[i].lower !== 32767
                ) {
                  var a = true;
                  var txt = auto_list[i].upper;
                  var txtA = auto_list[i].lower;
                } else {
                  var a = false;
                  var txt = auto_list[i].upper;
                  var txtA = auto_list[i].lower;
                }

                if (auto_list[i].method !== 255 && auto_list[i].method == 0) {
                  var b = "低于下限开启，高于下限关闭";
                  var a = auto_list[i].method;
                } else if (
                  auto_list[i].method !== 255 &&
                  auto_list[i].method == 1
                ) {
                  var b = "低于下限关闭，高于下限开启";
                  var a = auto_list[i].method;
                }

                arr.push({
                  status: a, //开关状态
                  ekey: this.realTimeArr[i].name, //要素名称
                  unit: this.realTimeArr[i].unit, //要素单位
                  maxVal: txt, //最大值
                  minVal: txtA, //最小值
                  aisle: "通道" + (auto_list[i].JK + 1), //通道号
                  name:
                    (switch_name[i].name == "" ? "开关" : switch_name[i].name) +
                    i, // 开关名称
                  method: b,
                  methodNum: a,
                  JK: auto_list[i].JK,
                  eKeyNum: auto_list[i].eKey,
                });
              }
            }
            this.thresholdArr = arr;
            console.log(arr);
          }

          if (res.data.data.qxz_switch == "") {
            //不显示设备控制面板
            this.isShow = true;
            this.get24List(this.id);
          } else if (res.data.data.qxz_switch !== "") {
            // 显示
            this.isShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },

    // render 事件
    renderHeader(h, { column }) {
      // h即为cerateElement的简写，具体可看vue官方文档
      return h("div", [
        h("span", column.label),
        h("i", {
          class: "el-icon-edit",
          style: "color:#409eff;margin-left:5px;",
        }),
      ]);
    },
    // 数据预警
    dataWarning() {
      // console.log(index)
      // console.log(id)
      this.simCodeVisible = true;
      // this.equip_id = id;
      this.warningAxios(this.id);
    },
    warningAxios(id) {
      var that = this;
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_early_warning",
          data: that.qs.stringify({
            device_id: id,
            status: "see", //当status == see查看  status == save 保存
            alarm: "", //配置信息
          }),
        })
        .then((res) => {
          // 测试
          var data = res.data.data.conf;
          var arr = [];
          var len = Object.keys(data).length;
          if (res.data.data.alarm) {
            var phone = res.data.data.alarm;
            this.phoneNumber = phone;
          } else {
            var phone = {};
            this.phoneNumber = phone;
          }

          for (var i = 1; i <= len; i++) {
            var key = "e" + i;
            if (data[key]) {
              var conftxt = data[key].split("#")[0];
              if (phone.dat) {
                if (phone.dat[key]) {
                  var type = phone.dat[key].split("#")[0];
                  var alarmVal = phone.dat[key].split("#")[1];
                  console.log(111111111);
                } else {
                  var type = 0;
                  var alarmVal = "";
                  console.log(222222222);
                }
              }
              arr.push({
                ekey: key,
                name: conftxt,
                type: type,
                alarmVal: alarmVal,
              });
            }
          }
          this.tableData = arr;
          console.log(arr);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //确定手机号
    confirmPhone() {
      var that = this;
      var number = that.phoneNumberA; //手机号
      if (number == "") {
        alert("手机号码不能为空");
        this.$message({
          message: "手机号码不能为空",
          type: "warning",
          duration: 1500,
        });
      } else {
        if (
          !/^[1][345789]\d{9}$/.test(number) ||
          !/^[1-9]\d*$/.test(number) ||
          number.length !== 11
        ) {
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "手机号码不符合规范",
              type: "warning",
              duration: 1500,
            });
          }
        } else {
          // 手机号码符合规范,操作下步请求
          console.log("手机号码符合规范");
          var obj = {};
          var bb = {};
          for (var i = 0; i < this.tableData.length; i++) {
            var typ = this.tableData[i].type == true ? 1 : 0;
            var num =
              this.tableData[i].alarmVal == undefined
                ? ""
                : this.tableData[i].alarmVal;
            bb["e" + (i + 1)] = typ + "#" + num;
          }
          // console.log(bb);
          obj["dat"] = bb; //配置
          obj["tel"] = this.phoneNumberA; // 手机号
          obj["equip_id"] = this.equip_id; //设备id
          console.log(obj);

          // 请求配置接口
          var postData = this.qs.stringify({
            device_id: this.id,
            status: "save", //当status == see查看  status == save 保存
            alarm: JSON.stringify(obj), //配置信息
          });
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=weather.weather.qxz_early_warning",
            data: postData,
          })
            .then((res) => {
              // console.log(res.data.data.code);
              if (res.data.data.code == 0) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "设置成功",
                    type: "success",
                    duration: 1500,
                  });
                }
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "设置失败",
                    type: "error",
                    duration: 1500,
                  });
                }
              }
            })
            .catch((err) => {
              console.log(err);
              if (document.getElementsByClassName("el-message").length == 0) {
                this.$message({
                  message: "设置失败",
                  type: "error",
                  duration: 1500,
                });
              }
            });
        }
      }
    },
    // switch事件
    switchChangeFin(index, data) {
      // this.tableData[index].switch1 = data;
      this.tableData[index].type = data;
    },
    // 气象站短信预警接口
    // warningAxios(id) {
    //   var that = this;
    //   that
    //     .$axios({
    //       method: "POST",
    //       url: "/api/api_gateway?method=weather.weather.qxz_element_conf",
    //       data: that.qs.stringify({
    //         device_id: id,
    //         status: "see", //当status == see查看  status == save 保存
    //         alarm: "", //配置信息
    //       }),
    //     })
    //     .then((res) => {
    //       // 测试
    //       var data = res.data.data.conf;
    //       var arr = [];
    //       var len = Object.keys(data).length;
    //       if (res.data.data.alarm) {
    //         var phone = res.data.data.alarm;
    //         this.phoneNumber = phone;
    //       } else {
    //         var phone = {};
    //         this.phoneNumber = phone;
    //       }

    //       for (var i = 1; i <= len; i++) {
    //         var key = "e" + i;
    //         if (data[key]) {
    //           var conftxt = data[key].split("#")[0];
    //           if (phone.dat) {
    //             if (phone.dat[key]) {
    //               var type = phone.dat[key].split("#")[0];
    //               var alarmVal = phone.dat[key].split("#")[1];
    //             } else {
    //               var type = 0;
    //               var alarmVal = "";
    //             }
    //           }
    //           console.log(type);
    //           arr.push({
    //             ekey: key,
    //             name: conftxt,
    //             type: type,
    //             alarmVal: alarmVal,
    //           });
    //         }
    //       }
    //       console.log(arr);
    //       this.tableDataA = arr;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },

    amendFactor(data) {
      console.log(data);
      var name = data.name; //修改值
      var type = data.type; //原来值
      var ekey = data.ekey; //通道名
      if (name !== data.metadata) {
        this.$confirm("此操作将修改该要素名称, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            var postData = this.qs.stringify({
              device_id: this.id, //设备号
              status: "save", // 当status == see查看  status == save保存
              ekey, //通道号
              conf: name, //通道标题
            });
            this.$axios({
              method: "POST",
              url: "/api/api_gateway?method=weather.weather.qxz_element_conf",
              data: postData,
            })
              .then((res) => {
                if (res.data.data.code == 0) {
                  if (
                    document.getElementsByClassName("el-message").length == 0
                  ) {
                    this.$message({
                      type: "success",
                      message: "修改成功!",
                    });
                  }
                  this.realTimeAxios(); //实时状态数据请求
                  this.setFactorShow = false;
                } else {
                  if (
                    document.getElementsByClassName("el-message").length == 0
                  ) {
                    this.$message({
                      type: "error",
                      message: "修改失败!",
                    });
                  }
                }
                if (document.getElementsByClassName("el-message").length == 0) {
                }
                // this.setFactorShow = false;
              })
              .catch((err) => {
                console.log(err);
                // this.setFactorShow = false;
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    type: "error",
                    message: "修改失败!",
                  });
                }
              });
          })
          .catch(() => {
            this.tableDataA[data.index].name = type;
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                type: "info",
                message: "已取消修改",
              });
            }
          });
      } else if (name === data.metadata) {
        console.log("未修改");
      }
    },
    // 设置要素
    setFactor() {
      this.factorAxios();
      this.setFactorShow = true;
    },

    factorAxios() {
      var that = this;
      var postData = that.qs.stringify({
        device_id: this.id, //设备号
        status: "see", // 当status == see查看  status == save保存
        ekey: "", //通道号
        conf: "", //通道标题
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_element_conf",
          data: postData,
        })
        .then((res) => {
          var data = res.data.data.conf; //修改值
          var dataA = res.data.data.default; //原来值
          var arr = [];
          var len = Object.keys(data).length;

          for (var i = 1; i <= len; i++) {
            var key = "e" + i;
            if (data[key]) {
              var conftxt = data[key].split("#")[0];
              var type = dataA[key].split("#")[0];

              arr.push({
                ekey: key,
                name: conftxt,
                type: type,
                metadata: conftxt,
              });
            }
          }
          console.log(arr);
          that.tableDataA = arr;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 测试接口
    ceshiAxios() {
      var that = this;
      var id = that.id;
      let postData = that.qs.stringify({
        device_id: id, //设备号
        JK: "1", //开关编号
        eKey: "1", //通道号
        upper: "32767", //最大值
        lower: "300", //最小值
        method: "1", // 0程序二 1程序一
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_value_mqtt",
          data: postData,
        })
        .then((res) => {
          if (res.data.data.code == 0) {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "下发成功",
                type: "success",
                duration: 1500,
              });
            }
          } else {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "下发失败",
                type: "error",
                duration: 1500,
              });
            }
          }
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "修改失败",
              type: "error",
              duration: 1500,
            });
          }
        });
    },

    // 设备手动控制 - 修改开关名称
    amendName(name, index) {
      this.switchName = name;
      this.index = index;
      this.dialogVisible = true;
    },
    // 确定
    addrName() {
      var that = this;
      // console.log(that.manualArr[this.index]); //原数据
      // console.log(that.switchName); //input框中的数据
      if (that.switchName !== "") {
        if (that.manualArr[that.index].name == that.switchName) {
          // 数据未改变
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "当前开关名称未改变！",
              type: "warning",
              duration: 1500,
            });
          }
        } else {
          // 数据改变去请求接口
          let postData = that.qs.stringify({
            device_id: that.id, //设备号
            way: that.manualArr[that.index].way, //开关编号
            sw_name: that.switchName, //开关名称
          });
          that
            .$axios({
              method: "POST",
              url: "/api/api_gateway?method=weather.weather.qxz_switch_name",
              data: postData,
            })
            .then((res) => {
              console.log(res.data.data.code);
              if (res.data.data.code == 0) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                    duration: 1500,
                  });
                }
                that.thresholdValAxios(); //重新请求气象站开关、阈值状态接口
              } else if (res.data.data.code == 1) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "修改错误，请重试",
                    type: "error",
                    duration: 1500,
                  });
                }
              }
              that.dialogVisible = false;
            })
            .catch((err) => {
              console.log(err);
            });
        }
      } else {
        this.$message({
          message: "输入框不能为空！",
          type: "warning",
          duration: 1500,
        });
      }
    },

    // 设备手动控制 - 开关下发
    switchingState(data, index) {
      var that = this;
      var status = data.status == true ? "开启" : "关闭";
      this.$confirm("是否" + status + "?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let postData = that.qs.stringify({
            device_id: that.id, //设备号
            status: "set", // status == read读取状态信息  status == set 设置下发开关  status == conf 刷新开关状态
            way: data.way, // 开关编号
            switch: status == "开启" ? 1 : 0, // 0关闭 1开启
          });
          that
            .$axios({
              method: "POST",
              url: "/api/api_gateway?method=weather.weather.qxz_mqtt_set",
              data: postData,
            })
            .then((res) => {
              console.log(res.data);
              if (res.data.data.code == 0) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "下发成功",
                    type: "success",
                    duration: 1500,
                  });
                }
                // that.thresholdValAxios(); //请求气象站开关、阈值状态接口
              } else {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "下发失败",
                    type: "error",
                    duration: 1500,
                  });
                }
                this.manualArr[index].status = !this.manualArr[index].status;
              }
            });
        })
        .catch(() => {
          data.status = data.status == true ? false : true;
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              type: "info",
              message: "已取消下发",
              duration: 1500,
            });
          }
        });
    },

    // 设备阈值控制 - 弹框
    setValuepopUp(data, index) {
      var that = this;
      this.index = index;
      that.minValIpt = data.minVal;
      that.maxValIpt = data.maxVal;
      // console.log(data)

      // 0程序二  1程序一
      if (data.methodNum == 1) {
        that.radio = "1";
      } else if (data.methodNum == 0) {
        that.radio = "2";
      }
      that.dialogVisibleA = true;
    },
    // 确定
    setValueAdd() {
      var that = this;
      if (that.minValIpt !== "" && that.maxValIpt !== "") {
        // thresholdArr
        if (
          that.thresholdArr[that.index].maxVal == that.maxValIpt &&
          that.thresholdArr[that.index].minVal == that.minValIpt
        ) {
          // 数据未改变
          if (document.getElementsByClassName("el-message").length == 0) {
            this.$message({
              message: "当前最大值最小值未改变！",
              type: "warning",
              duration: 1500,
            });
          }
        } else {
          let postData = that.qs.stringify({
            JK: that.thresholdArr[that.index].JK, //开关编号
            eKey: that.thresholdArr[that.index].eKeyNum, //通道号
            upper: that.maxValIpt, //最大值
            lower: that.minValIpt, //最小值
            method: that.radio == "1" ? 1 : "0", // 0程序二  1程序一
            device_id: that.id, //设备号
          });
          that
            .$axios({
              method: "POST",
              url: "/api/api_gateway?method=weather.weather.qxz_value_mqtt",
              data: postData,
            })
            .then((res) => {
              if (res.data.data.code == 0) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "下发成功",
                    type: "success",
                    duration: 1500,
                  });
                }
                that.thresholdValAxios(); //重新请求气象站开关、阈值状态接口
              } else if (res.data.data.code == 1) {
                if (document.getElementsByClassName("el-message").length == 0) {
                  this.$message({
                    message: "下发错误，请重试",
                    type: "error",
                    duration: 1500,
                  });
                }
              }
              that.dialogVisibleA = false;
            })
            .catch((err) => {
              console.log(err);
            });
        }
      } else {
        // 最大值或最小值为空
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message({
            message: "最大值或最小值不能为空！",
            type: "warning",
            duration: 1500,
          });
        }
      }
    },

    // 设备阈值控制 - 气象站定时设置
    setThreshold(data, index) {
      var that = this;
      that.index = index;
      that.value = data.startTime;
      that.valueA = data.duration;
      that.dialogVisibleB = true;
    },
    setThresholdAdd() {
      var that = this;
      let postData = that.qs.stringify({
        device_id: that.id, //设备号
        JK: that.timingArr[that.index].JK, //开关编号
        starttime: that.value, //开始时间
        endtime: that.valueA, //结束时间
      });
      that
        .$axios({
          method: "POST",
          url: "/api/api_gateway?method=weather.weather.qxz_timing_mqtt",
          data: postData,
        })
        .then((res) => {
          if (res.data.data.code == 0) {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "下发成功",
                type: "success",
                duration: 1500,
              });
            }
            that.thresholdValAxios(); //重新请求气象站开关、阈值状态接口
          } else if (res.data.data.code == 1) {
            if (document.getElementsByClassName("el-message").length == 0) {
              this.$message({
                message: "下发错误，请重试",
                type: "error",
                duration: 1500,
              });
            }
          }
          that.dialogVisibleB = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    remoteMethod(e) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=weather.weather.qxz_page",
        data: this.qs.stringify({
          device_id: e,
        }),
      }).then((res) => {
        console.log(res.data.data.ids);
        this.idoptions = [];
        var idatas = res.data.data.ids;
        idatas.forEach((item, index) => {
          this.idoptions.push({
            value: index,
            label: item.equip_id,
          });
        });
      });
    },
    idchange(e) {
      console.log(e);
      this.id = this.idoptions[e].label;
      this.realTimeAxios();
      this.get24List(this.id);
    },
  },
};
</script>
<style lang="less" scoped>
.data24box {
  width: 100%;
  height: 100%;
}
.baselistbox_top {
  width: 100%;
  //   height: 130px;
  background-color: #fff;
  border-radius: 10px;
  .baselistbox_top_title {
    width: 100%;
    height: 65px;
    display: flex;
    padding: 20px;
    box-sizing: border-box;
    line-height: 25px;
    p:first-child {
      font-size: 14px;
    }
    p:last-child {
      font-size: 18px;
      font-weight: 700;
      margin-left: 20px;
    }
  }
  .baselistbox_top_line {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
  }
  .baselistbox_top_search {
    width: 100%;
    // height: 68px;
    padding: 20px;
    box-sizing: border-box;
    line-height: 28px;
  }
}
.baselistbox_table {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  padding: 20px;
  margin-bottom: 10px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
  /deep/.el-table__header {
    th {
      background-color: #f1f1f3;
    }
  }
}
.bgc {
  width: 100%;
  height: 10px;
}
.newTime_time {
  line-height: 30px;
  font-size: 16px;
  margin: 0 12px 0 0;
}
.elemenbox {
  margin-top: 20px;
  .factorBox {
    // border: 1px solid #000;
    width: 100%;
    // 10
    .ten-product:after {
      content: "";
      width: 8%;
      border: 1px solid transparent;
    }
    // 9
    .nine-product:after {
      content: "";
      width: 17%;
      border: 1px solid transparent;
    }
    // 8
    .eight-product:after {
      content: "";
      width: 27%;
      border: 1px solid transparent;
    }
    // 7
    .seven-product:after {
      content: "";
      width: 36%;
      border: 1px solid transparent;
    }
    // 6
    .six-product:after {
      content: "";
      width: 45%;
      border: 1px solid transparent;
    }
    // 5
    .five-product:after {
      content: "";
      width: 54%;
      border: 1px solid transparent;
    }
    // 4
    .four-product:after {
      content: "";
      width: 63%;
      border: 1px solid transparent;
    }
    // 3
    .three-product:after {
      content: "";
      width: 72%;
      border: 1px solid transparent;
    }
    // 2
    .two-product:after {
      content: "";
      width: 82%;
      border: 1px solid transparent;
    }

    .factorBox_ul {
      // border: 1px solid red;
      width: 100%;
      display: flex;
      // justify-content: space-between;
      flex-flow: wrap;

      .factorBox_li {
        .factorBox_li_impression {
          position: relative;
          // height: 110px;
          height: 107.583px !important;
          width: 107.583px !important;
          margin-right: 30px;
          text-align: center;
          font-size: 18px;
          // border-radius: 55px;
          .factorBox_li_number {
            color: #fff;
            position: absolute;
            left: 7px;
            bottom: 5px;
          }
        }
        .factorBox_li_text {
          text-align: center;
          margin: 0 0 0 -25px;
        }
        .factorBox_li_text2 {
          display: inline-block;
          text-align: right;
          width: 38px;
          position: relative;
          top: -130px;
          left: 62px;
          color: white;
        }
      }
    }
  }
}
</style>