<template>
  <div style="cursor: default">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>环境监测系统</el-breadcrumb-item>
      <el-breadcrumb-item>环境监测</el-breadcrumb-item>
    </el-breadcrumb>
    <SearchBar
      @fun="getDisplayType"
      :displayType="displayType"
      @fun2="getIDName"
      @fun3="getIsOnline"
    >
      <!-- <div slot="search-box"></div> -->
    </SearchBar>
    <template v-if="displayType == 1">
      <el-row :gutter="10" v-loading="loading">
        <el-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="8"
          :xl="6"
          v-for="item in equipList"
          :key="item.equip_id"
        >
          <el-card class="box-card">
            <equip-item :is_online="Number(item.is_online)">
              <span slot="title">环境监测</span>
              <div slot="content" class="content">
                <p>
                  <i class="iconfont icon-yonghu"></i>
                  设备ID：{{ item.equip_id }}
                </p>
                <p>
                  <i class="iconfont icon-yonghu"></i>
                  设备名称：{{ item.equip_name || "无" }}
                </p>
                <p>
                  <i class="iconfont icon-biaoqian"></i>
                  电压：{{ item.volt }}
                </p>
                <p>
                  <i class="iconfont icon-diannao"></i>
                  信号强度：{{ item.rssi }}
                </p>
                <p>
                  <i class="iconfont icon-shijian"></i>
                  最新上报时间 : {{ (item.uptime * 1000) | formatTime }}
                </p>
                <p>
                  <i class="iconfont icon-dizhi"></i>
                  地址 : {{ item.address || "无" }}
                </p>
                <p class="btns">
                  <i class="iconfont icon-yemiancaozuo"></i>
                  <el-button
                    size="mini"
                    type="warning"
                    @click="equipSet(item.d_id, item.equip_id, item.equip_name)"
                    >设备控制</el-button
                  >
                  <el-button
                    size="mini"
                    type="success"
                    @click="check24Data(item.equip_id)"
                    >24小时数据</el-button
                  >
                  <el-button
                    size="mini"
                    type="info"
                    @click="showStateDialog(item.equip_id)"
                    >实时状态</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="goHistoryData(item.equip_id)"
                    >历史数据</el-button
                  >
                </p>
              </div>
            </equip-item>
          </el-card>
        </el-col>
      </el-row>
    </template>
    <template v-if="displayType == 2">
      <el-card class="box-card">
        <el-table
          v-loading="loading"
          :data="equipList"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="equip_id"
            label="设备ID"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="equip_name"
            label="设备名称"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="equip_id"
            label="电压"
            width="180"
          ></el-table-column>
          <el-table-column prop="equip_id" label="信号强度"></el-table-column>
          <el-table-column prop="uptime" label="最新上报时间">
            <template slot-scope="scope">{{
              (scope.row.uptime * 1000) | formatTime
            }}</template>
          </el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column label="操作" width="400">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="
                  equipSet(
                    scope.row.d_id,
                    scope.row.equip_id,
                    scope.row.equip_name
                  )
                "
                >设备控制</el-button
              >
              <el-button
                size="mini"
                type="success"
                @click="check24Data(scope.row.equip_id)"
                >24小时数据</el-button
              >
              <el-button
                size="mini"
                type="info"
                @click="showStateDialog(scope.row.equip_id)"
                >实时状态</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="goHistoryData(scope.row.equip_id)"
                >历史数据</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </template>
    <!-- 暂无数据 -->
    <div
      class="expertDiagnosis_referral_units_not"
      v-if="equipList.length <= 0 && displayType == 1"
    >
      <img
        :src="$imghost + zanwu"
        alt
        class="expertDiagnosis_referral_units_notImg"
      />
    </div>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalNum"
      @current-change="changePage"
    ></el-pagination>
    <!-- 实时状态对话框 -->
    <el-dialog title="实时状态" :visible.sync="stateDialogVisible" width="40%">
      <el-row :gutter="20">
        <el-col
          :xs="24"
          :sm="12"
          :md="12"
          :lg="8"
          :xl="6"
          v-for="(item, index) in reaTimeStatusList"
          :key="index"
        >
          <div class="real-time">
            <div class="left">
              <div
                :class="['icon-box', 'bg1']"
                :style="{
                  background:
                    bgColor[Math.floor(Math.random() * bgColor.length)],
                }"
              >
                <img
                  :src="
                    $imghost +
                    '/static/images/hjjc/dev/icon_' +
                    item.icon +
                    '.png'
                  "
                />
              </div>
              <p class="aisle">{{ item.e }}</p>
            </div>
            <div class="right">
              <p class="num">{{ item.num }}</p>
              <p class="unit">
                {{ item.name }}
                <span>{{ item.unit | unitFormat }}</span>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- <div class="checkData">
				<span @click="check24Data()">查看24小时数据 >></span>
			</div> -->
    </el-dialog>
    <!-- 手动控制对话框 -->
    <el-dialog
      title="手动控制"
      :visible.sync="handControlDialogVisible"
      width="30%"
    >
      <template v-if="handControlSwitch.length">
        <el-row :gutter="10">
          <el-col
            :xs="24"
            :sm="24"
            :md="12"
            :lg="12"
            :xl="8"
            v-for="(item, index) in handControlSwitch"
            :key="index"
          >
            <div class="swi-box">
              <label @click="handControlModifyName(index)">
                <i class="el-icon-edit"></i>
                {{ item.name }}
              </label>
              <el-switch
                v-model="item.status"
                active-color="#17BB89"
                @change="handControlSwitchChange($event, index)"
              ></el-switch>
            </div>
          </el-col>
        </el-row>
      </template>
      <template v-else>
        <div style="text-align: center">
          <img :src="$imghost + nodate" />
        </div>
      </template>
    </el-dialog>
    <!-- 阈值控制对话框 -->
    <el-dialog
      title="阈值控制"
      :visible.sync="thresholdDialogVisible"
      width="40%"
    >
      <template v-if="thresholdList.length > 0">
        <el-table :data="thresholdList" stripe style="width: 100%">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="e" label="通道号"></el-table-column>
          <el-table-column prop="upper" label="最大值"></el-table-column>
          <el-table-column prop="lower" label="最小值"></el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :disabled="scope.row.isDisabled"
                active-color="#17BB89"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            T
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="showThresholdEditDialog(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-else>
        <div style="text-align: center">
          <img :src="$imghost + nodate" />
        </div>
      </template>
    </el-dialog>
    <!-- 设置阈值信息弹框 -->
    <el-dialog
      title="阈值设置"
      :visible.sync="thresholdSetDialogVisible"
      width="30%"
    >
      <el-form label-width="62px" :model="thresholdSetData">
        <el-form-item label="最大值">
          <el-input v-model="thresholdSetData.upper"></el-input>
        </el-form-item>
        <el-form-item label="最小值">
          <el-input v-model="thresholdSetData.lower"></el-input>
        </el-form-item>
        <el-form-item label="规则">
          <el-radio-group v-model="thresholdSetData.method">
            <el-radio label="1">程序一</el-radio>
            <el-radio label="0">程序二</el-radio>
          </el-radio-group>
          <p v-if="thresholdSetData.method == '1'">
            低于下限
            <span class="red">关闭</span> , 高于上限
            <span class="red">开启</span>
          </p>
          <p v-if="thresholdSetData.method == '0'">
            低于下限
            <span class="red">开启</span> , 高于上限
            <span class="red">关闭</span>
          </p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="thresholdSetDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="thresholdSetSubm()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 设备控制对话框 -->
    <el-dialog
      title="设备控制"
      :visible.sync="setDialogVisible"
      @close="equipControlDialogClosed"
      width="500px"
    >
      <div class="set_item">
        <span>设备编号:</span><span>{{ equipInfo.equip_id }}</span>
      </div>
      <div class="set_item" v-if="equipInfo.equip_name">
        <span>设备名称:</span><span>{{ equipInfo.equip_name }}</span>
      </div>
      <div class="tit">操作</div>
      <div class="setBtnBox" style="margin-top: 10px">
        <el-button type="primary" size="mini" @click="equipControl('reboot')"
          >重启</el-button
        >
        <el-button type="primary" size="mini" @click="searchInterval('data')"
          >刷新</el-button
        >
      </div>
      <div class="tit">显示屏设置</div>
      <div class="set_item">
        <span style="width: 123px">标题文字设置:</span>
        <el-input style="width: 217px" v-model="setFrom.content"></el-input>
      </div>
      <div class="set_item">
        <span style="width: 123px">显示时间设置(min):</span>
        <el-input
          style="width: 217px"
          type="number"
          min="0"
          v-model="setFrom.timeout"
        ></el-input>
      </div>
      <div class="tit">上传时间间隔</div>
      <div class="set_item">
        <span>上传时间间隔设置(min):</span>
        <div class="sliderParent">
          <div class="block">
            <el-slider
              v-model="setFrom.interval"
              show-input
              :min="1"
              :max="360"
            ></el-slider>
          </div>
        </div>
      </div>
      <div class="setBtnBox">
        <el-button
          type="primary"
          size="mini"
          @click="searchInterval('interval')"
          >查询上传时间间隔</el-button
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="equipSetSubm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import SearchBar from "@/components/SearchBar";
import EquipItem from "@/components/EquipItem";
export default {
  data() {
    return {
      zanwu: "/images/expertDiagnosis/zanwu.png",
      nodate: "/images/hjjc/nodata.png",
      displayType: "",
      itemId: "", //当前点开的弹框设备ID
      //设备列表
      equipList: [],
      selectItem: "1", //1设备号，2用户名
      searchVal: "",
      //参数
      queryInfo: {
        is_online: "",
        page: 1,
        f_id: "",
        ename: "",
      },
      //总设备数
      totalNum: 0,
      //实时状态对话框
      stateDialogVisible: false,
      //手动控制对话框
      handControlDialogVisible: false,
      //手动控制开关
      value: false,
      //手动控制数据
      handControlSwitch: [],
      //阈值控制对话框
      thresholdDialogVisible: false,
      //阈值设置对话框
      thresholdSetDialogVisible: false,
      //定时控制设置对话框
      timeControlSetDialogVisible: false,
      //阈值数据
      thresholdList: [],
      //阈值设置数据
      thresholdSetData: {
        upper: "",
        lower: "",
        method: "",
        JK: "",
        eKey: "",
        equip_id: "",
      },
      // 实时状态数据
      reaTimeStatusList: [],
      //定时控制
      timeControlList: [],
      //定时控制设置
      timeControlSet: {
        JK: "",
        StartTime: 0,
        Duration: 0,
      },
      // 实时状态背景色
      bgColor: ["#61b2f0", "#e86a84", "#50c05d", "#f3b00f", "#b97ec0"],
      timeControlSetRules: {
        StartTime: [
          { required: true, message: "请输入起始时间", trigger: "blur" },
          { type: "number", message: "格式不正确", trigger: "blur" },
          { min: 0, max: 23, message: "大小在0-23之间", trigger: "blur" },
        ],
        Duration: [
          {
            type: "number",
            required: true,
            message: "请输入工作时长",
            trigger: "blur",
          },
          { min: 1, max: 24, message: "大小在1-24之间", trigger: "blur" },
        ],
      },
      equipInfo: {
        d_id: "",
        equip_id: "",
        equip_name: "",
      },
      setDialogVisible: false, //设备控制弹框
      setFrom: {
        //设备控制
        content: "",
        timeout: null,
        interval: 0,
      },
      loading: true,
    };
  },
  mounted() {
    // console.log(vueJsonp.install)
    this.getEquipList();
  },
  created() {
    this.displayType = String(localStorage.getItem("hjjcListType") || "1");
  },
  methods: {
    getIsOnline(data) {
      this.queryInfo.is_online = data;
      this.queryInfo.page = 1;
      this.getEquipList();
    },
    getIDName(data) {
      this.queryInfo.f_id = data.f_id;
      this.queryInfo.ename = data.ename;
      this.queryInfo.page = 1;
      this.getEquipList();
    },
    getDisplayType(data) {
      this.displayType = String(data);
      localStorage.setItem("hjjcListType", data);
    },
    //获取设备列表
    getEquipList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=weather.weather.qxz_page",
        data: this.qs.stringify({
          page: this.queryInfo.page,
          device_id: this.queryInfo.f_id,
          device_name: this.queryInfo.ename,
          device_status: this.queryInfo.is_online,
        }),
      })
        .then((res) => {
          if (res.data) {
            let _this = this;
            this.equipList = [];
            let data = res.data.data.ids;
            getList(0, data.length);
            function getList(j, length) {
              let lat = data[j].lat;
              let lng = data[j].lng;
              _this
                .$jsonp(
                  `http://api.map.baidu.com/reverse_geocoding/v3/?renderReverse&output=json&coordtype=wgs84ll`,
                  {
                    ak: "nroAiX0Lf6ppNEGt2dBLtDkOldGCPFwF",
                    location: `${lat},${lng}`,
                  }
                )
                .then((res) => {
                  let addressComponent =
                    res.result && res.result.addressComponent;
                  if (addressComponent) {
                    data[j].address =
                      addressComponent.province +
                      addressComponent.city +
                      addressComponent.district;
                  } else {
                    data[j].address = "";
                  }
                  _this.equipList.push(data[j]);
                  if (++j < length) {
                    getList(j, length);
                  } else {
                    _this.loading = false;
                  }
                });
            }
            this.totalNum = Number(res.data.data.nums);
          }
        })
        .catch(() => {
          this.$message.error("获取数据失败！");
        });
    },
    //改变page
    changePage(val) {
      this.queryInfo.page = val;
      this.getEquipList();
    },
    //获取手动控制开关数据
    handControlSwitchList(id) {
      this.$axios({
        method: "POST",
        url: "/vip/qxz_status",
        data: this.qs.stringify({ e_id: id }),
      })
        .then((res) => {
          if (
            res.data.qxz_switch &&
            eval("(" + res.data.qxz_switch + ")").length > 0
          ) {
            let qxz_switch = eval("(" + res.data.qxz_switch + ")");
            let arr = new Array();
            for (let item1 of qxz_switch) {
              let obj = {};
              if (
                res.data.switch_name &&
                eval("(" + res.data.switch_name + ")").length > 0
              ) {
                let switch_name = eval("(" + res.data.switch_name + ")");
                for (let item2 of switch_name) {
                  if (item1.JK == item2.JK) {
                    if (item2.name) {
                      obj.name = item2.name;
                    } else {
                      obj.name = `开关${Number(item1.JK) + 1}`;
                    }
                    obj.status = item1.status;
                  }
                }
              } else {
                obj.name = `开关${Number(item1.JK) + 1}`;
                obj.status = item1.status;
              }
              arr.push({
                name: obj.name,
                status: obj.status,
              });
            }
            this.handControlSwitch = arr;
          } else {
            this.handControlSwitch = [];
          }
        })
        .catch(() => {
          this.$message.error("获取数据失败!");
        });
    },
    //获取实时状态列表
    getReaTimeStatusList(id) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=weather.weather.qxz_status",
        data: this.qs.stringify({ device_id: id }),
      })
        .then((res) => {
          if (res.data.message == "") {
            let arr = new Array();
            let conf = res.data.data.conf;
            let dat = res.data.data.dat;
            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];
                for (let i2 in dat) {
                  if (i1 == i2) {
                    let arr3 = dat[i2].split("#");
                    obj.num = arr3[0] == "-99.99" ? "N/A" : arr3[0];
                    obj.icon = arr3[1];
                    arr.push(obj);
                  }
                }
              }
            }
            arr = arr.sort((a, b) => {
              return a.e.slice(2) - b.e.slice(2);
            });
            this.reaTimeStatusList = arr;
          }
        })
        .catch(() => {
          this.$message.error("获取数据失败！");
        });
    },
    //修改设备名称
    modifyName() {
      this.$prompt("", "修改名字", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (value) {
            this.$message({
              type: "success",
              message: "修改成功",
            });
          } else {
            this.$message({
              type: "info",
              message: "内容不能为空",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 实时状态弹框
    showStateDialog(id) {
      this.stateDialogVisible = true;
      this.itemId = id;
      this.getReaTimeStatusList(id);
    },
    // 手动控制弹框
    showHandControlDialog(id) {
      this.handControlDialogVisible = true;
      this.itemId = id;
      this.handControlSwitchList(id);
    },
    //阈值控制
    showThresholdDialog(id) {
      this.thresholdDialogVisible = true;
      this.itemId = id;
      this.$axios({
        method: "POST",
        url: "qxz_status",
        data: this.qs.stringify({ e_id: id }),
      }).then((res) => {
        if (
          res.data.auto_list &&
          eval("(" + res.data.auto_list + ")").length > 0
        ) {
          //排除""和"[]"
          let arr = eval("(" + res.data.auto_list + ")"); //阈值数据
          let qxz_switch = eval("(" + res.data.qxz_switch + ")"); //开关数据，为了获取开关状态
          let dat = res.data.dat;
          this.thresholdList = [];
          for (let item of arr) {
            let obj = {};
            if (item.Jk != 255) {
              //排除JK=255
              let ek = `e${Number(item.eKey) + 1}`;
              if (dat[ek]) {
                //在dat里找dat[ek],如果没有值，排除
                if (item.upper == 32767 || item.lower == 32767) {
                  obj.upper = "--";
                  obj.lower = "--";
                  obj.isDisabled = true; //阈值禁用
                } else {
                  obj.upper = item.upper;
                  obj.lower = item.lower;
                  obj.isDisabled = false; //阈值开启
                }

                obj.e = `通道${ek}`;
                obj.method = item.method; //规则，0为程序二，1为程序一
                obj.JK = item.JK;
                obj.eKey = item.eKey;

                for (let item3 of qxz_switch) {
                  if (item3.JK == item.JK) {
                    obj.status = item3.status == 0 ? false : true; //开关状态
                    if (
                      res.data.switch_name &&
                      eval("(" + res.data.switch_name + ")").length > 0
                    ) {
                      let switch_name = eval("(" + res.data.switch_name + ")"); //重命名的按钮数据
                      for (let item2 of switch_name) {
                        if (item2.JK == item.JK) {
                          // console.log(item2.JK);
                          obj.name = item2.name; //开关重命名
                          this.thresholdList.push(obj); //阈值控制数据
                        }
                      }
                    } else {
                      obj.name = `开关${item3.JK}`;
                      this.thresholdList.push(obj); //阈值控制数据
                    }
                  }
                }
              }
            }
          }
        } else {
          this.thresholdList = [];
        }
        console.log(this.thresholdList);
      });
    },
    //阈值设置
    showThresholdEditDialog(data) {
      this.thresholdSetData.upper = data.upper;
      this.thresholdSetData.lower = data.lower;
      this.thresholdSetData.method = data.method.toString();
      this.thresholdSetData.JK = data.JK;
      this.thresholdSetData.eKey = data.eKey;
      this.thresholdSetDialogVisible = true;
    },
    //阈值设置提交
    thresholdSetSubm() {
      this.$axios({
        method: "POST",
        url: "/qxz_value_mqtt",
        data: this.qs.stringify({
          JK: this.thresholdSetData.JK,
          eKey: this.thresholdSetData.eKey,
          upper: this.thresholdSetData.upper,
          lower: this.thresholdSetData.lower,
          method: this.thresholdSetData.method,
          equip_id: this.itemId,
        }),
      }).then((res) => {
        this.$message({
          message: "提交成功！",
          type: "success",
        });
        this.thresholdSetDialogVisible = false;
      });
    },
    //定时控制
    showTimeControlDialog(id) {
      this.itemId = id;
      this.timeControlDialogVisible = true;
      this.$axios({
        method: "POST",
        url: "/qxz_status",
        data: this.qs.stringify({ e_id: id }),
      }).then((res) => {
        if (
          res.data.timing_list &&
          eval("(" + res.data.timing_list + ")").length > 0
        ) {
          let timing_list = eval("(" + res.data.timing_list + ")");
          let qxz_switch = eval("(" + res.data.qxz_switch + ")");
          this.timeControlList = [];
          for (let item of timing_list) {
            let obj = {};
            for (let item2 of qxz_switch) {
              if (item.StartTime == 32767 || item.Duration == 32767) {
                obj.StartTime = "--";
                obj.Duration = "--";
                obj.isDisabled = true;
              } else {
                obj.StartTime = item.StartTime;
                obj.Duration = item.Duration;
                obj.isDisabled = false;
              }
              obj.status = item2.status;
              obj.JK = item.JK;
              if (
                res.data.switch_name &&
                eval("(" + res.data.switch_name + ")").length > 0
              ) {
                //判断是否有重命名
                let switch_name = eval("(" + res.data.switch_name + ")");
                for (let item3 of switch_name) {
                  if (item3.JK == item2.JK && item3.JK == item.JK) {
                    obj.name = item3.name;
                    this.timeControlList.push(obj);
                  }
                }
              } else {
                if (item.JK == item2.JK) {
                  obj.name = `开关${item.JK}`;
                  this.timeControlList.push(obj);
                }
              }
            }
          }
        } else {
          this.timeControlList = [];
        }
      });
    },
    //定时设置
    showTimeControlEditDialog(data) {
      this.timeControlSetDialogVisible = true;
      this.timeControlSet.JK = data.JK;
      this.timeControlSet.StartTime = data.StartTime;
      this.timeControlSet.Duration = data.Duration;
    },
    //定时设置提交
    timeControlSetSubm(ref) {
      //表单验证
      this.$refs[ref].validate((valid) => {
        if (valid) {
          this.$axios({
            method: "POST",
            url: "/qxz_timing_mqtt",
            data: this.qs.stringify({
              JK: this.timeControlSet.JK,
              StartTime: this.timeControlSet.StartTime,
              Duration: this.timeControlSet.Duration,
              equip_id: this.itemId,
            }),
          }).then((res) => {
            this.$message({
              message: "提交成功！",
              type: "success",
            });
            this.timeControlSetDialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //跳转到历史数据页面
    goHistoryData(id) {
      this.itemId = id;
      this.$router.push(`/index/historyData/${id}`);
    },
    //手动控制自定义名称
    handControlModifyName(index) {
      this.$prompt("", "自定义名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$axios({
            method: "POST",
            url: "/qxz_switch_name",
            data: this.qs.stringify({
              imei: this.itemId,
              way: index,
              sw_name: value,
            }),
          }).then(() => {
            this.$message({
              type: "success",
              message: "自定义名称是: " + value,
            });
            this.handControlSwitch[index].name = value;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //手动控制修改swicth
    handControlSwitchChange(val, index) {
      let id = this.itemId;
      this.$axios({
        method: "POST",
        url: "/qxz_switch",
        data: this.qs.stringify({
          imei: id,
          req: "set",
          way: index,
          switch: val ? "1" : "0",
        }),
      });
    },
    //查看24小时数据
    check24Data(id) {
      this.$router.push(`/index/data24/${id}`);
    },
    equipSet(d_id, equip_id, equip_name) {
      this.equipInfo = { d_id, equip_id, equip_name };
      this.setDialogVisible = true;
    },
    equipControlDialogClosed() {
      this.setFrom = {};
    },
    equipControl(cmd) {
      this.$axios({
        method: "POST",
        url:
          "/api/api_gateway?method=forecast.send_control.admin_device_control",
        data: this.qs.stringify({
          device_type_id: 5,
          d_id: this.equipInfo.d_id,
          cmd: cmd,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("操作成功");
        } else {
          this.$message.err("操作失败");
        }
      });
    },
    searchInterval(cmd) {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.get_device_config",
        data: this.qs.stringify({
          device_type_id: 5,
          d_id: this.equipInfo.d_id,
          control_type: cmd,
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("操作成功");
        } else {
          this.$message.err("操作失败");
        }
      });
    },
    equipSetSubm() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=forecast.send_control.device_control",
        data: this.qs.stringify({
          device_type_id: 5,
          d_id: this.equipInfo.d_id,
          config: JSON.stringify(this.setFrom),
        }),
      }).then((res) => {
        if (res.data.message == "") {
          this.$message.success("操作成功");
        } else {
          this.$message.err("操作失败");
        }
        this.setDialogVisible = false;
      });
    },
  },
  components: {
    SearchBar,
    EquipItem,
  },
  filters: {
    unitFormat(value) {
      return `(${value})`;
    },
  },
};
</script>
<style lang="less" scoped>
.swi-box {
  text-align: center;
  padding: 10px 0;
  label {
    color: #333;
    margin-right: 8px;
    font-size: 14px;
  }
  i.el-icon-edit {
    margin-right: 8px;
  }
}
.search-box {
  text-align: right;
  .el-input {
    width: 300px;
  }
  margin-bottom: 10px;
}
.real-time {
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 20px 0;
  .left {
    margin-right: 10px;
    .icon-box {
      border-radius: 50%;
      width: 46px;
      height: 46px;
      padding: 5px;
      box-sizing: border-box;
      margin-bottom: 3px;
      img {
        width: 100%;
        height: auto;
      }
    }
    .aisle {
      text-align: center;
      font-size: 14px;
      color: #666;
    }
  }
  .right {
    color: #333;
    .num {
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 3px;
    }
    .unit {
      font-size: 14px;
      color: #666;
    }
  }
}
.checkData {
  text-align: right;
  font-size: 14px;
  span {
    cursor: pointer;
  }
}
.demo-dynamic .el-input {
  margin-right: 10px;
  width: 270px;
  vertical-align: top;
}
.red {
  color: red;
  padding: 0 2px;
}
.setBtnBox {
}
.tit {
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  font-weight: 800;
}
.set_item {
  margin: 5px 0;
  display: flex;
  justify-content: flex-start;
  span {
    margin-right: 15px;
    line-height: 40px;
  }
  .sliderParent {
    flex: 1;
  }
}
</style>
