<template>
  <div style="padding: 0.5% 0.5%">
    <el-button
      v-if="backFlag"
      type="primary"
      @click="backPage"
      style="position: absolute; right: 20px; z-index: 99; float: right"
      >返回</el-button
    >
    <el-row :gutter="5">
      <!--左侧列表区-->
      <el-col :span="5">
        <div class="grid-content bg-purple" style="padding: 5px">
          <energyTree
            @eleMenuData="getTreeText"
            :dataTree="dataTree"
            ref="energyTree"
          ></energyTree>
        </div>
      </el-col>
      <!--右侧内容区-->
      <el-col :span="19">
        <div class="grid-content bg-purple-light right-top">
          <img src="../../../assets/login/logo.png" class="gr-img" />
          <el-descriptions title="设备基本信息" size="small" class="gr-des">
            <el-descriptions-item label="设备名称">
              <el-tag size="mini" type="warning">{{ devInfo.name }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="监测点名称">
              <el-tag size="mini" type="warning">{{ this.lineName }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="设备编号">{{
              devInfo.did
            }}</el-descriptions-item>
            <el-descriptions-item label="所属网关">{{
              devInfo.netDevName
            }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{
              devInfo.address
            }}</el-descriptions-item>
            <el-descriptions-item label="建单时间">{{
              devInfo.createTime
            }}</el-descriptions-item>

            <el-descriptions-item label="设备状态">{{
              devInfo.state == 0 ? "离线" : "在线"
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <!--tab标签区域-->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-light">
              <el-tabs
                type="border-card"
                v-model="activeName"
                style="height: 80%"
                @tab-click="handleClick"
              >
                <el-tab-pane
                  v-for="(item, index) in tabList"
                  :name="item.anotherName"
                  :label="item.id"
                  :key="index + item.anotherName"
                >
                  <span slot="label"
                    ><i class="el-icon-s-platform"></i
                    >{{ item.anotherName }}</span
                  >
                </el-tab-pane>
                <div
                  v-if="activeName == '测量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col
                              :span="4"
                              style="line-height: 35px; text-align: center"
                            >
                              <i
                                @click="handEcharts(1, dataItem.children)"
                                class="el-icon-data-line"
                                style="font-size: 20px; cursor: pointer"
                              ></i>
                            </el-col>
                          </el-row>
                        </div>

                        <el-row style="height: 15vh">
                          <el-col :span="18" :offset="4">
                            <div class="text item">
                              <el-row
                                v-for="(temItem, index) in dataItem.children"
                                :key="index"
                                style="padding: 0.5%"
                              >
                                <el-col :span="24">
                                  {{
                                    (temItem.phase !== "M"
                                      ? temItem.phase !== "T"
                                        ? temItem.phase + "相"
                                        : "总"
                                      : "") +
                                    temItem.anotherName +
                                    " " +
                                    (temItem.dataValue == null
                                      ? 0
                                      : toChange(temItem.dataValue)) +
                                    " " +
                                    (temItem.unit === null ? "" : temItem.unit)
                                  }}
                                </el-col>
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row :gutter="20">
                          <el-col :span="24" :offset="4">
                            <span style="color: #3bdd00"
                              >统计时间：{{ dataItem.children[0].time }}</span
                            >
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  v-if="activeName == '电能量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  margin-left: 10px;
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col
                              :span="4"
                              style="line-height: 35px; text-align: center"
                            >
                              <i
                                @click="handEcharts(1, dataItem.children)"
                                class="el-icon-data-line"
                                style="font-size: 20px; cursor: pointer"
                              ></i>
                            </el-col>
                          </el-row>
                        </div>

                        <el-row style="height: 15vh">
                          <el-col :span="24" :offset="4">
                            <div class="text item">
                              <el-row
                                v-for="(temItem, index) in dataItem.children"
                                :key="index"
                                style="padding: 2px"
                              >
                                {{
                                  (temItem.phase !== "M"
                                    ? temItem.phase !== "T"
                                      ? temItem.phase + "相"
                                      : "总"
                                    : "") +
                                  temItem.anotherName +
                                  " " +
                                  (temItem.dataValue == null
                                    ? 0
                                    : Number(temItem.dataValue).toFixed(3)) +
                                  " " +
                                  (temItem.unit === null ? "" : temItem.unit)
                                }}
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="24" :offset="4">
                            <span style="color: #3bdd00"
                              >统计时间：{{ dataItem.children[0].time }}</span
                            >
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  v-if="activeName == '状态量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  margin-left: 10px;
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col
                              :span="4"
                              style="line-height: 35px; text-align: center"
                            >
                              <i
                                @click="handEcharts(1, dataItem.children)"
                                class="el-icon-data-line"
                                style="font-size: 20px; cursor: pointer"
                              ></i>
                            </el-col>
                          </el-row>
                        </div>

                        <el-row style="height: 15vh">
                          <el-col :span="24" :offset="4">
                            <div class="text item">
                              <el-row
                                v-for="(temItem, index) in dataItem.children"
                                :key="index"
                                style="padding: 2px"
                              >
                                {{
                                  temItem.anotherName +
                                  " " +
                                  (temItem.dataValue == null
                                    ? 0
                                    : toChange(temItem.dataValue)) +
                                  " " +
                                  (temItem.unit === null ? "" : temItem.unit)
                                }}
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="24" :offset="4">
                            <span style="color: #3bdd00"
                              >统计时间：{{ dataItem.children[0].time }}</span
                            >
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>

                <div
                  v-if="activeName == '实时测量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  margin-left: 10px;
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col :span="4">
                              <img
                                src="../../../assets/Wi-Fi.png"
                                v-if="dataItem.state === 1"
                                style="float: right; margin-top: 1px"
                              />
                              <img
                                src="../../../assets/wi_fioff.png"
                                v-if="dataItem.state === 0"
                                style="float: right; margin-top: 1px"
                              />
                            </el-col>
                          </el-row>
                        </div>

                        <el-row style="height: 15vh">
                          <el-col :span="18" :offset="4">
                            <div class="text item">
                              <el-row
                                v-for="(temItem, index) in dataItem.children"
                                :key="index"
                                style="padding: 2px"
                              >
                                {{
                                  (temItem.phase !== "M"
                                    ? temItem.phase + "相"
                                    : "") +
                                  temItem.anotherName +
                                  " " +
                                  (temItem.dataValue == null
                                    ? 0
                                    : temItem.dataValue) +
                                  " " +
                                  (temItem.unit === null ? "" : temItem.unit)
                                }}
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  v-if="activeName == '实时电能量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  margin-left: 10px;
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col :span="4">
                              <img
                                src="../../../assets/Wi-Fi.png"
                                v-if="dataItem.state === 1"
                                style="float: right; margin-top: 1px"
                              />
                              <img
                                src="../../../assets/wi_fioff.png"
                                v-if="dataItem.state === 0"
                                style="float: right; margin-top: 1px"
                              />
                            </el-col>
                          </el-row>
                        </div>

                        <el-row style="height: 15vh">
                          <el-col :span="18" :offset="4">
                            <div class="text item">
                              <el-row
                                v-for="(temItem, index) in dataItem.children"
                                :key="index"
                                style="padding: 2px"
                              >
                                {{
                                  (temItem.phase !== "M"
                                    ? temItem.phase + "相"
                                    : "") +
                                  temItem.anotherName +
                                  " " +
                                  (temItem.dataValue == null
                                    ? 0
                                    : temItem.dataValue) +
                                  " " +
                                  (temItem.unit === null ? "" : temItem.unit)
                                }}
                              </el-row>
                            </div>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  v-if="activeName == '实时状态量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  margin-left: 10px;
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col :span="4">
                              <img
                                src="../../../assets/Wi-Fi.png"
                                v-if="dataItem.state === 1"
                                style="float: right; margin-top: 1px"
                              />
                              <img
                                src="../../../assets/wi_fioff.png"
                                v-if="dataItem.state === 0"
                                style="float: right; margin-top: 1px"
                              />
                            </el-col>
                          </el-row>
                        </div>

                        <el-row>
                          <el-col :span="18" :offset="4">
                            <div class="text item">
                              <el-row
                                v-for="(temItem, index) in dataItem.children"
                                :key="index"
                                style="padding: 2px"
                              >
                                {{
                                  temItem.anotherName +
                                  " " +
                                  (temItem.dataValue == null
                                    ? 0
                                    : temItem.dataValue) +
                                  " " +
                                  (temItem.unit === null ? "" : temItem.unit)
                                }}
                              </el-row>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="item">
                              <div v-if="dataItem.dataCompetence == 0">
                                <span class="el-icon-tickets">查看详情</span>
                              </div>
                              <div v-if="dataItem.dataCompetence == 1">
                                <span class="el-icon-edit-outline"></span>
                              </div>
                              <div v-if="dataItem.dataCompetence == 2">
                                <span>
                                  <el-switch v-model="operationType"></el-switch
                                ></span>
                              </div>
                              <div v-if="dataItem.dataCompetence == 3">
                                <span class="el-icon-tickets">查看详情</span>
                                <span class="el-icon-edit-outline"></span>
                              </div>

                              <div></div>
                            </div>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>

                <div
                  v-if="activeName == '历史测量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row>
                    <el-col style="">
                      <timeTime
                        id="abc"
                        @querfromdata="querfromdata"
                        tablename="tab0"
                        :interval="interval"
                      ></timeTime>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="8"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col
                              :span="4"
                              style="line-height: 35px; text-align: center"
                            >
                              <i
                                @click="handEcharts(2, dataItem.children)"
                                class="el-icon-data-line"
                                style="font-size: 20px; cursor: pointer"
                              ></i>
                            </el-col>
                          </el-row>
                        </div>
                        <div style="height: 28vh; overflow-y: auto">
                          <el-row>
                            <el-col
                              :span="12"
                              style="padding: 10px"
                              v-for="(it, index) in dataItem.children"
                              :key="index"
                            >
                              {{
                                (it.phase !== "M"
                                  ? it.phase !== "T"
                                    ? it.phase + "相"
                                    : "总"
                                  : "") + it.anotherName
                              }}
                              <div class="tag-group">
                                <el-tag size="mini" effect="dark" type="danger"
                                  >MAX</el-tag
                                >
                                <span class="text" style="margin-left: 50px">{{
                                  Number(it.maxValue).toFixed(3) +
                                  " " +
                                  (it.unit == null ? "" : it.unit)
                                }}</span>
                              </div>

                              <div class="tag-group">
                                <el-tag size="mini" effect="dark" type="warning"
                                  >MIN&nbsp;</el-tag
                                >
                                <span class="text" style="margin-left: 50px">{{
                                  Number(it.minValue).toFixed(3) +
                                  " " +
                                  (it.unit == null ? "" : it.unit)
                                }}</span>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  v-if="activeName == '历史电能量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row>
                    <el-col>
                      <timeTime
                        id="fg"
                        @querfromdata="querfromdata"
                        tablename="tab0"
                        :interval="interval"
                      ></timeTime>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col
                              :span="4"
                              style="line-height: 35px; text-align: center"
                            >
                              <i
                                @click="handEcharts(2, dataItem.children)"
                                class="el-icon-data-line"
                                style="font-size: 20px; cursor: pointer"
                              ></i>
                            </el-col>
                          </el-row>
                        </div>

                        <el-row
                          v-for="(it, index) in dataItem.children"
                          :key="index"
                        >
                          <el-col :span="24" style="padding: 10px">
                            {{
                              (it.phase !== "M"
                                ? it.phase !== "T"
                                  ? it.phase + "相"
                                  : "总"
                                : "") + it.anotherName
                            }}
                            <div class="tag-group">
                              <el-tag size="mini" effect="dark" type="danger"
                                >MAX</el-tag
                              >
                              <span class="text" style="margin-left: 50px">{{
                                Number(it.maxValue).toFixed(3) +
                                " " +
                                (it.unit == null ? "" : it.unit)
                              }}</span>
                            </div>

                            <div class="tag-group">
                              <el-tag size="mini" effect="dark" type="warning"
                                >MIN&nbsp;</el-tag
                              >
                              <span class="text" style="margin-left: 50px">{{
                                Number(it.minValue).toFixed(3) +
                                " " +
                                (it.unit == null ? "" : it.unit)
                              }}</span>
                            </div>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  v-if="activeName == '历史状态量数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row>
                    <el-col>
                      <timeTime
                        @querfromdata="querfromdata"
                        tablename="tab0"
                        :interval="interval"
                      ></timeTime>
                    </el-col>
                  </el-row>
                  <el-row :gutter="5">
                    <el-col
                      v-for="dataItem in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                            <el-col
                              :span="4"
                              style="line-height: 35px; text-align: center"
                            >
                              <i
                                @click="handEcharts(2, dataItem.children)"
                                class="el-icon-data-line"
                                style="font-size: 20px; cursor: pointer"
                              ></i>
                            </el-col>
                          </el-row>
                        </div>

                        <el-row
                          v-for="(it, index) in dataItem.children"
                          :key="index"
                        >
                          <el-col :span="24" style="padding: 10px">
                            {{
                              (it.phase !== "M"
                                ? it.phase !== "T"
                                  ? it.phase + "相"
                                  : "总"
                                : "") + it.anotherName
                            }}
                            <div class="tag-group">
                              <el-tag size="mini" effect="dark" type="danger"
                                >MAX</el-tag
                              >
                              <span class="text" style="margin-left: 50px">{{
                                Number(it.maxValue).toFixed(3) +
                                " " +
                                (it.unit == null ? "" : it.unit)
                              }}</span>
                            </div>

                            <div class="tag-group">
                              <el-tag size="mini" effect="dark" type="warning"
                                >MIN&nbsp;</el-tag
                              >
                              <span class="text" style="margin-left: 50px">{{
                                Number(it.minValue).toFixed(3) +
                                " " +
                                (it.unit == null ? "" : it.unit)
                              }}</span>
                            </div>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
                <div
                  v-if="activeName == '空调控制数据'"
                  :style="
                    'height:' +
                    (mainHeight - 250) +
                    'px;overflow-y:auto;overflow-x:hidden'
                  "
                >
                  <el-row :gutter="5">
                    <el-col
                      v-for="(dataItem, index) in listdata"
                      :key="dataItem.id"
                      :span="6"
                      style="margin-top: 5px"
                    >
                      <el-card
                        :body-style="{ padding: '0px' }"
                        style="
                          color: #fff;
                          background-image: linear-gradient(#2ca2b4, #064e60);
                          opacity: 0.8;
                        "
                      >
                        <div
                          class="clearfix"
                          style="height: 35px; background: #064e60"
                        >
                          <el-row>
                            <el-col :span="4">
                              <img
                                src="../../../assets/login/logo.png"
                                style="float: left; width: 30px; height: 30px"
                              />
                            </el-col>
                            <el-col :span="16">
                              <span
                                style="
                                  margin-left: 10px;
                                  font-size: large;
                                  line-height: 30px;
                                  color: rgb(7, 209, 245);
                                "
                                >{{ dataItem.name }}</span
                              >
                            </el-col>
                          </el-row>
                        </div>

                        <el-row>
                          <el-col :span="18">
                            <div class="text item">
                              <el-row
                                v-for="(temItem, index) in dataItem.children"
                                :key="index"
                                style="padding: 2px"
                              >
                                {{
                                  temItem.anotherName +
                                  " " +
                                  toChange(
                                    temItem.dataValue == null
                                      ? "null"
                                      : temItem.dataValue
                                  )
                                }}
                              </el-row>
                            </div>
                          </el-col>
                          <el-col :span="6">
                            <div class="item">
                              <div
                                v-if="
                                  dataItem.children[0].ctlValue === 'On,Off'
                                "
                              >
                                <span>
                                  <el-switch
                                    :disabled="buttonDisable"
                                    @change="
                                      switchChange(
                                        dataItem.children[0],
                                        switchList[index]
                                      )
                                    "
                                    active-value="On"
                                    inactive-value="Off"
                                    v-model="switchList[index]"
                                  >
                                  </el-switch>
                                </span>
                              </div>
                              <div
                                v-if="
                                  dataItem.children[0].maxNum !== null &&
                                  dataItem.children[0].minNum !== null
                                "
                              >
                                <span
                                  style="font-size: large; cursor: pointer"
                                  class="el-icon-edit text"
                                  @click="temperatureCtl(dataItem.children[0])"
                                >
                                </span>
                              </div>

                              <div
                                v-if="
                                  dataItem.children[0].ctlValue !== null &&
                                  dataItem.children[0].ctlValue !== 'On,Off'
                                "
                              >
                                <span
                                  style="font-size: large; cursor: pointer"
                                  class="el-icon-edit text"
                                  @click="temperatureCtl(dataItem.children[0])"
                                >
                                </span>
                              </div>

                              <div></div>
                            </div>
                          </el-col>
                        </el-row>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-tabs>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageData.pageNum"
                :page-sizes="[16, 32, 48, 64, 80]"
                :page-size="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData.total"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-dialog
      :close-on-click-modal="false"
      title=""
      :visible.sync="dialogVisible"
      width="80%"
      :destroy-on-close="true"
    >
      <timeTime
        id="abcd"
        @querfromdata="querfromdata"
        tablename="tab0"
        :interval="interval"
      ></timeTime>

      <div class="title">趋势曲线</div>

      <div
        id="newEcharts"
        :style="
          'width:100%;height:400px;margin-top:5px;zoom:' + device
        "
      ></div>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="ctrlDialogVisible"
      width="18%"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item
          v-if="modeFlag === 1"
          :label="ctrlTitle"
          prop="ctrlValueMod"
        >
          <el-select v-model="ruleForm.ctrlValueMod" style="width: 180px">
            <el-option
              :label="toChange(item)"
              :value="item"
              v-for="(item, index) in ctrlList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="modeFlag === 2"
          label="温度设定"
          prop="ctrlValueTem"
        >
          <el-input
            v-model="ruleForm.ctrlValueTem"
            placeholder="请输入温度"
          ></el-input>
        </el-form-item>


          <el-form-item style="margin-top: 30px">

            <el-button
              type="primary"
              :disabled="buttonDisable"
              @click="ctlOnSubmit('ruleForm')"
              >确认</el-button
            >

          </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import energyTree from "../../components/tree/energyTree";
import echarts from "@/views/energy-system/echarts";
import pagination from "@/views/components/pagination/index";
import timeTime from "@/views/components/TimePicker/TimeComponent";
import mqtt from "mqtt";
import {
  getDevDetailInfoById,
  getEnergyDevInfoById,
  getEnergyTree,
  getTabTemplateById,
  getHistoryTemplateById,
  getStatisTemplateById,
  getRealGroupTemplateById,
  getParseTemplate,
  getHisData,
} from "@/api/energy/logicDev";
import {
  getappheight,
  getheight,
  gettwoechartsheight,
} from "../../../assets/commjs/common";
import MqttWs from "@/components/Mqtt/mqttWs";
import el from "@/components/HighLevelSearchForm/components/transfer/locale/lang/el";

export default {
  name: "devicejk",
  components: { energyTree, pagination, timeTime },

  data() {
    return {
      tenheight: "",
      tableheight: "",
      fullHeight: document.documentElement.clientHeight,
      mainHeight: undefined,
      filterText: "",
      dialogVisible: false,

      switchList: [], //控制对象
      interval: 4,
      currentPage4: 4,

      devInfo: {
        name: "",
        did: "",
        netDevName: "",
        ndid: "",
        address: "",
        createTime: "",
        position: "",
        state: "",
      },
      pageData: {
        pageNum: 1,
        pageSize: 16,
        total: 0,
      },

      dataTree: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tabList: [],

      activeName: "",
      activeId: "",
      parseTemplate: [], //解析模板

      devId: "", //点击树的节点id

      lineId: "", //监测点id
      lineName: "",
      typeClick: 2, //点击树节点层级

      operationType: 0,

      ruleForm: {
        ctrlValueTem: "",
        ctrlValueMod: "",
      },
      ctrlTitle: "",
      ctrlDialogVisible: false,
      modeFlag: 1,

      ctrlList: [],
      arrName: "",
      buttonDisable: false,

      userIndex: "",
      mqttSendMsg: null, //mqtt记录最新发送的命令
      mqttSendCount: 0, //错误返回重发次数

      timeRange: [],
      timeFlag: 0, //标识是tab点击还是dialog点击

      boxData: [], //盒子
      monitorList: [],
      listdata: [],

      device: 1,
      value: "",
      yData: [],
      xData: [],
      yUnit: "",
      echartArr: [],

      backFlag: false,

      rules: {
        ctrlValueTem: [
          { required: true, message: "请输需要调节温度", trigger: "blur" },
          {
            pattern: /^[1-3][0-9]?$/,
            message: "请填写10到30之间的数字",
            trigger: "blur",
          },
        ],
        ctrlValueMod: [
          { required: true, message: "参数不可为空", trigger: "blur" },
        ],
      },
    };
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    },
  },
  mounted() {
    this.mainHeight = window.sessionStorage.getItem("mainHeight");
    this.tableheight = getheight();
    this.device = window.devicePixelRatio;
    if (this.device == 1) {
      this.tenheight = this.tableheight * 1.2;
    }
    if (this.device == 1.25) {
      this.tenheight = this.tableheight - 30;
    }
    this.get_bodyHeight();
    this.connectMqtt();

    this.globalMqtt.ws.on("connect", (e) => {
      this.$message.success("连接mqtt服务器成功!");
      console.log("mqtt客户端已连接....");
      this.globalMqtt.ws.subscribe("/platform/devack/#");
    });

    this.globalMqtt.ws.on("error", (error) => {
      console.log("mqtt连接失败...", error);
      this.mqtt.end();
    });

    this.globalMqtt.ws.on("close", function () {
      console.log("mqtt客户端已断开连接.....");
    });

    let index = 0;
    this.globalMqtt.ws.on("message", (topic, message) => {
      let that = this;
      if (message) {
        let json = JSON.parse(message);
        if (json.code === 200) {
          if (json.param.action === "ACInMode") {
            this.$message.success("内机模式调节成功!");
          } else if (json.param.action === "ACInSpeed") {
            this.$message.success("内机风速调节成功!");
          } else if (json.param.action === "ACInSetTmp") {
            this.$message.success("内机温度调节成功!");
          } else if (json.param.action === "ACInStat") {
            this.$message.success("内机开关机操作成功!");
          } else {
            this.$message.success("操作成功!");
          }

          window.setTimeout(function () {
            that.getStatisTemplateById();
          }, 10000);
        } else {
          this.$message.error(json.msg);
          if (this.userIndex === json.userId) {
            this.mqttSendCount++;
            if (this.mqttSendCount > 2) {
              return;
            } else {
              this.globalMqtt.ws.publish(
                "/platform/devcmd/v1/" + this.devInfo.ndid,
                JSON.stringify(this.mqttSendMsg)
              );
            }

            console.log("错误+++进行重发" + this.mqttSendCount);
          }
        }

        this.buttonDisable = false;
      }

      console.log("收到消息:" + topic + message);
    });

    //如果别的页面路由过来的进行路由参数处理
  },
  created() {
    this.getTree();

    this.userIndex = this.$store.state.user.userInfo.loginName;
  },

  destroyed() {
    if (this.globalMqtt.ws.connected) {
      try {
        this.globalMqtt.ws.end();
        this.globalMqtt.ws = {
          connected: false,
        };
        console.log("Successfully disconnected!");
      } catch (error) {
        console.log("Disconnect failed", error.toString());
      }
    }
  },
  methods: {
    connectMqtt() {
      this.globalMqtt.ws = {};
      let mqttWs = null;

      let userName = this.$store.state.user.userInfo.loginName;
      const options = {
        qos: 2,
        clean: true,
        connectTimeout: 30 * 1000,
        clientId: "mqttjs" + userName + Math.random(),
        username: "t_user",
        password: "njcnpqs",
      };
      const url = "wss://pqmcn.com:8087/mqtt";
      mqttWs = mqtt.connect(url, options);
      this.globalMqtt.setWs(mqttWs);
    },
    //子节点树点击事件
    getTreeText(data, level) {
      this.typeClick = level;
      if (level === 3) {
        this.lineId = data.lineId;
        this.devId = data.pid;
        this.lineName = data.name;
      } else if (level === 2) {
        this.devId = data.id;
      }

      this.pageData.pageNum = 1;
      this.pageData.pageSize = 16;
      this.pageData.total = 0;
      this.listdata = [];
      this.getDeviceInfo();
      this.getTabTemplateById();
    },
    //获取设备树
    getTree() {
      getEnergyTree().then((response) => {
        if (response.code == "A0000") {
          this.dataTree = response.data;
          if (this.dataTree.length !== 0) {
            let id = this.$route.query.id;

            if (id) {
              this.backFlag = true;
              let devId = "";
              let lineName = "";
              for (let i = 0; i < this.dataTree.length; i++) {
                for (let j = 0; j < this.dataTree[i].children.length; j++) {
                  for (
                    let g = 0;
                    g < this.dataTree[i].children[j].children.length;
                    g++
                  ) {
                    if (
                      this.dataTree[i].children[j].children[g].lineId === id
                    ) {
                      lineName = this.dataTree[i].children[j].children[g].name;
                      devId = this.dataTree[i].children[j].children[g].pid;
                      break;
                    }
                  }
                }
              }

              this.getTreeText({ lineId: id, pid: devId, name: lineName }, 3);
            } else {
              this.backFlag = false;
              if (this.dataTree[0].children.length !== 0) {
                let id = this.dataTree[0].children[0].id;
                this.devId = id;
                if (this.dataTree[0].children[0].children[0].length !== 0) {
                  this.lineId = this.dataTree[0].children[0].children[0].lineId;
                  this.lineName = this.dataTree[0].children[0].children[0].name;
                  this.typeClick = 3;
                }
                this.getDeviceInfo();
                this.getTabTemplateById();
              }
            }
          }
        }
      });
    },
    //获取点击的设备详情
    getDeviceInfo() {
      getEnergyDevInfoById(this.devId).then((response) => {
        this.devInfo = response.data;
      });
    },
    //获取点击的设备数据详情
    getDeviceDetailInfo() {
      getDevDetailInfoById(
        this.activeId,
        this.pageData.pageNum,
        this.pageData.pageSize
      ).then((response) => {
        this.listdata = response.data.records;
        this.pageData.pageNum = response.data.current;
        this.pageData.pageSize = response.data.size;
        this.pageData.total = response.data.total;

        //调用mqtt订阅主题

        if (this.typeClick === 3) {
          //点击监测点时候调用mqtt
          //this.globalMqtt.ws.subscribe("/test");
          // this.globalMqtt.ws.publish('/test', JSON.stringify({"lineId":this.lineId}))
        }
      });
    },
    //获取点击的设备数据详情
    getHistoryTemplateById() {
      let data = {
        id: this.activeId,
        pageNum: this.pageData.pageNum,
        pageSize: this.pageData.pageSize,
        startTime: this.timeRange[0],
        endTime: this.timeRange[1],
        lineId: this.lineId,
      };

      getHistoryTemplateById(data).then((response) => {
        if (response.code === "A0000") {
          this.listdata = response.data.records;
          this.pageData.pageNum = response.data.current;
          this.pageData.pageSize = response.data.size;
          this.pageData.total = response.data.total;
        } else {
          this.listdata = [];
        }
      });
    },

    //获取统计数据
    getStatisTemplateById() {
      getStatisTemplateById(
        this.activeId,
        this.pageData.pageNum,
        this.pageData.pageSize,
        this.lineId
      ).then((response) => {
        if (response.code === "A0000") {
          this.listdata = response.data.records;
          this.pageData.pageNum = response.data.current;
          this.pageData.pageSize = response.data.size;
          this.pageData.total = response.data.total;

          if (this.activeName === "空调控制数据") {
            this.switchList = [];
            this.listdata.forEach((item) => {
              this.switchList.push(item.children[0].dataValue);
            });
          }
        } else {
          this.listdata = [];
        }
      });
    },

    //获取tab模板
    getTabTemplateById() {
      getTabTemplateById(this.devId).then((response) => {
        if (response.data.length !== 0) {
          let arr = [];
          let res = response.data.find(function (item) {
            return item.anotherName === "空调控制数据";
          });

          if (!res) {
            let res = JSON.parse(JSON.stringify(response.data));
            arr = response.data;
            res.forEach((item) => {
              if (item.anotherName === "测量数据") {
                item.anotherName = "历史" + item.anotherName;
                arr.push(item);
              } else if (item.anotherName === "电能量数据") {
                item.anotherName = "历史" + item.anotherName;
                arr.push(item);
              }
            });
          } else {
            arr = response.data;
          }
          /* res.forEach((item) => {
             if (item.anotherName !== '空调控制数据') {
               item.anotherName = "准实时" + item.anotherName
               arr.push(item)
             }
           })


           let res = JSON.parse(JSON.stringify(response.data));
           let rescode = res.find(function (item) {
             return item.anotherName === '空调控制数据'
           })
           res.forEach((item) => {
             if (item.anotherName === '空调控制数据') {
               item.id = item.id;
               arr.push(item)

             } else {

               if (!rescode) {
                 item.anotherName = "历史" + item.anotherName
                 arr.push(item)
               }


             }
           })*/

          this.tabList = arr;

          if (this.tabList.length !== 0) {
            this.activeId = this.tabList[0].id;
            this.activeName = this.tabList[0].anotherName;
            if (this.activeName == "空调控制数据") {
              this.getStatisTemplateById();
            } else {
              this.getStatisTemplateById();
            }
          }
        } else {
          this.tabList = [];
          this.listdata = [];
        }
      });
    },
    editClick() {
      this.title = "编辑设备信息";
      this.dialogVisible = true;
      this.getNetDevList();
      this.form.name = this.devInfo.name;
      this.form.pid = this.devInfo.pid;
      this.form.did = this.devInfo.did;
    },

    handleClick(tab, event) {
      this.timeFlag = 0;
      this.listdata = [];
      this.activeId = tab.label;

      if (
        this.activeName === "实时测量数据" ||
        this.activeName === "实时电能量数据" ||
        this.activeName === "实时状态量数据"
      ) {
        this.getRealGroupTemplateById();
      } else if (this.activeName.indexOf("历史") !== -1) {
        this.$nextTick(() => {
          this.getHistoryTemplateById();
        });
      } else if (this.activeName === "空调控制数据") {
        this.getStatisTemplateById();
      } else {
        this.getStatisTemplateById();
      }
    },

    //获取分组实时数据
    getRealGroupTemplateById() {
      getRealGroupTemplateById(
        this.activeId,
        this.pageData.pageNum,
        this.pageData.pageSize
      ).then((response) => {
        this.listdata = response.data.records;
        this.pageData.pageNum = response.data.current;
        this.pageData.pageSize = response.data.size;
        this.pageData.total = response.data.total;
        // this.getParseTemplate()

        //数据渲染完mqtt实时赋值
        if (this.typeClick === 3) {
          //点击监测点时候调用mqtt
          // this.globalMqtt.ws.subscribe("/test");
          // this.globalMqtt.ws.publish('/test1', JSON.stringify({"devId": this.devId}))
        }
      });
    },

    querfromdata(data, timehbValue, type, interval) {
     
      this.interval = interval;
      this.timeRange = data;
      if (type == 1) {
        if (this.timeFlag === 0) {
          this.getHistoryTemplateById();
        } else {
          //dialog点击
          this.$nextTick(() => {
            let obj = {
              lineId: this.lineId,
              arrName: this.echartArr,
              startTime: this.timeRange[0],
              endTime: this.timeRange[1],
            };

            this.getHisData(obj);
          });
        }
      }
    },

    //获取解析模板
    getParseTemplate() {
      getParseTemplate(this.activeId).then((response) => {
        this.parseTemplate = response.data;

        this.globalMqtt.ws.on("message", (topic, message) => {
          let json = JSON.parse(message).param.data;
          console.log(json);
          //解码

          var view = new Int8Array(this.base64ToArrayBuffer(json));
          console.log(view);
          let o = 0;
          /*for(let i=0;i<view.length;i++){
            if(this.parseTemplate[])

          }*/
          let allArr = [];
          this.parseTemplate.forEach((item) => {
            let tem = [];
            if (item == "float") {
              let i = 4;
              let bytes = view.slice(o, o + i);
              bytes = bytes.reverse();
              console.log(bytes);
              //拼接为number对象
              var mfloat =
                ((bytes[0] & 0xff) << 24) |
                ((bytes[1] & 0xff) << 16) |
                ((bytes[2] & 0xff) << 8) |
                (bytes[3] & 0xff);

              allArr.push(this.hex2float(mfloat));
              o += i;
            } else if (item == "int") {
              let i = 4;
              let bytes = view.slice(o, o + i - 1);
            }
          });

          console.log(allArr);

          /* var bytes = new Array();
           bytes[0] = 63;
           bytes[1] = 127;
           bytes[2] = -66;
           bytes[3] = 119;
           //拼接为number对象
           var mfloat = ((bytes[0] & 0xFF) << 24) |
             ((bytes[1] & 0xFF) << 16) |
             ((bytes[2] & 0xFF) << 8) |
             (bytes[3] & 0xFF);

           console.log(this.hex2float(mfloat));*/

          // let json = JSON.parse(message).param.data

          // console.log(json)
          let arr = [];
          this.listdata.forEach((item) => {
            if (item.children.length != 0) {
              item.children.forEach((it) => {
                it.dataValue = allArr[it.sort - 1].toFixed(2);
              });
            }
            arr.push(item);
          });
          this.listdata = arr;
        });
      });
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    get_bodyHeight() {
      const that = this;
      window.onresize = () => {
        return () => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        };
      };
    },

    handleSizeChange(val) {
      this.pageData.pageSize = val;
      this.getRealGroupTemplateById();
    },
    handleCurrentChange(val) {
      this.pageData.pageNum = val;
      this.getRealGroupTemplateById();
    },

    back() {
      this.$nextTick(() => {
        this.initEcharts();
      });
    },

    str2ab(str) {
      var buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节
      var bufView = new Uint16Array(buf);
      for (var i = 0, strLen = str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i);
      }
      return buf;
    },

    base64ToArrayBuffer(base64) {
      undefined;

      var binary_string = window.atob(base64);

      var len = binary_string.length;

      var bytes = new Uint8Array(len);

      for (var i = 0; i < len; i++) {
        undefined;

        bytes[i] = binary_string.charCodeAt(i);
      }

      return bytes.buffer;
    },

    //IEEE754
    hex2float(num) {
      //符号位
      var sign = num & 0x80000000 ? -1 : 1;
      //指数位
      var exponent = ((num >> 23) & 0xff) - 127;
      //尾数位
      var mantissa = 1 + (num & 0x7fffff) / 0x7fffff;
      return sign * mantissa * Math.pow(2, exponent);
    },

    //点击统计小图标事件
    handEcharts(type, data) {
      this.timeFlag = 1;
      this.yUnit = data[0].unit;
      this.dialogVisible = true;

      if (data) {
        this.echartArr = [];

        data.forEach((item) => {
          this.echartArr.push(item.id);
        });

        this.$nextTick(() => {
          let obj = {
            lineId: this.lineId,
            arrName: this.echartArr,
            startTime: this.timeRange[0],
            endTime: this.timeRange[1],
          };

          this.getHisData(obj);
        });
      }
    },

    //获取一个组的趋势数据
    getHisData(data) {
      getHisData(data).then((response) => {
        if (response.code === "A0000") {
          let data = response.data;
          if (data.length > 1) {
            data[0].color = "#FFCC00";
            data[1].color = "#339933";
            data[2].color = "#FF0033";
          } else {
            data[0].color = "blue";
          }

          for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data[i].value.length; j++) {
              data[i].value[j][1] = Number(data[i].value[j][1]).toFixed(2);
            }
          }
          if (response.data.length !== 0) {
            this.yData = [];
            response.data.forEach((item) => {
              // let data = (item.value).toFixed(2)
              let it = {
                name: item.anotherName,
                type: "line",
                yAxisIndex: 0,
                symbolSize: 2,
                itemStyle: { color: item.color },
                smooth: true,
                data: item.value,
              };
              this.yData.push(it);
            });
            this.initEcharts();
          } else {
            this.$message.warning("数据为空");
          }
        }
      });
    },

    initEcharts() {
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("newEcharts"));

      var yData = this.yData;
      // 绘制图表
      const option = {
        title: {
          top: "0",
          left: "center",
          textStyle: {
            align: "center",
            color: "#7f0808",
            fontSize: 22,
          },
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          top: "10%",
        },

        grid: {
          right: "5%",
          bottom: "10%",
          left: "2%",
          top: "80px",
          containLabel: true,
        },
        xAxis: [
          {
            type: "time",
            name: "时间",
            symbol: "arrow",
            lineStyle: {
              type: "dashed",
              // ...
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#952727",
                fontSize: 12,
              },
              //interval:0,
              //rotate:30
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.yUnit,
            nameTextStyle: {
              color: "#0B4CA9",
            },
            position: "left",

            axisLabel: {
              color: "#5a0f27",
              fontSize: 12,
            },
          },
        ],
        series: yData,
      };
      myChart.setOption(option)
window.echartsArr.push(myChart);
      setInterval(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 100);
    },

    switchChange(item, type) {
      console.log(item);
      console.log(type);
      console.log(this.devInfo.ndid);

      let msg = {
        mid: 1,
        deviceId: this.devInfo.did,
        userId: this.userIndex,
        timestamp: new Date().getTime(),
        expire: -1,
        type: "CMD_DEV_CTRL",
        param: {
          lineId: this.lineId,
          action: item.name,
          parm: type,
        },
      };

      this.globalMqtt.ws.publish(
        "/platform/devcmd/v1/" + this.devInfo.ndid,
        JSON.stringify(msg)
      );

      this.mqttSendMsg = msg;
      this.mqttSendCount = 0;
      console.log(JSON.stringify(msg));
    },

    //点击空调控制按钮触发
    temperatureCtl(val) {
      this.ruleForm.ctrlValueTem = "";
      this.ruleForm.ctrlValueMod = "";

      if (val.maxNum !== null && val.minNum !== null) {
        this.modeFlag = 2;
      } else {
        this.ctrlTitle = val.anotherName;
        this.ctrlList = [];
        let modeArr = val.ctlValue.split(",");
        this.ctrlList = modeArr;

        this.modeFlag = 1;
      }
      this.arrName = val.name;

      this.ctrlDialogVisible = true;
      this.buttonDisable = false;
      this.$nextTick(() => {
        this.$refs["ruleForm"].resetFields();
      });
    },

    ctlOnSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let param;
          if (this.modeFlag == 1) {
            param = this.ruleForm.ctrlValueMod;
          } else if (this.modeFlag == 2) {
            param = this.ruleForm.ctrlValueTem;
          } else {
            return;
          }
          let msg = {
            mid: 1,
            deviceId: this.devInfo.did,
            userId: this.userIndex,
            timestamp: new Date().getTime(),
            expire: -1,
            type: "CMD_DEV_CTRL",
            param: {
              lineId: this.lineId,
              action: this.arrName,
              parm: param,
            },
          };
          console.log(JSON.stringify(this.devInfo.ndid));
          console.log(JSON.stringify(msg));
          this.globalMqtt.ws.publish(
            "/platform/devcmd/v1/" + this.devInfo.ndid,
            JSON.stringify(msg)
          );
          this.mqttSendMsg = msg;
          this.mqttSendCount = 0;
          this.buttonDisable = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //转换英文标识
    toChange(val) {
      switch (val) {
        case "On":
          return "打开";
        case "Off":
          return "关闭";
        case "SpeedNone":
          return "无风";
        case "SpeedAuto":
          return "自动";
        case "SpeedLow":
          return "低档";
        case "SpeedMidLow":
          return "中低档";
        case "SpeedMidHigh":
          return "中高档";
        case "SpeedHigh":
          return "高档";
        case "SpeedStrong":
          return "强劲";
        case "SpeedStop":
          return "风机停";
        case "SpeedMid":
          return "中档";
        case "ModeCool":
          return "制冷";
        case "ModeDry":
          return "抽湿";
        case "ModeHeat":
          return "制热";
        case "ModeAuto":
          return "自动";
        case "ModeSupplyAir":
          return "送风";
        case "ACOutModeHeat":
          return "制热";
        case "ACOutModeNone":
          return "无效";
        case "ACOutModeCool":
          return "单冷";
        case "ACOutModeCoolHeat":
          return "冷暖";
        case "ACOutModeSupplyAir":
          return "送风";
        case "ModeNone":
          return "无效";
        case "ModeUnderHeat":
          return "地暖";
        case "ModeQuickHeat":
          return "快暖";
        case "ModeSupplyHeat":
          return "供暖";

        case "Error":
          return "Error";
        case "null":
          return "";

        default:
          return Number(val).toFixed(3);
      }
    },

    backPage() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.ui-container {
  width: 100%;
  height: 100%;
  padding: 30px;
}

.gr-but1 {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.gr-but2 {
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  min-height: 36px;
  border-radius: 4px;
}

.right-top {
  color: rgb(7, 131, 161);
  border: 1.5px solid rgb(7, 131, 161);
  border-style: solid hidden hidden hidden;
}

.gr-img {
  float: left;
  width: 1.5vw;
  height: 3vh;
}

.text {
  font-size: 15px;
  font-weight: bold;
}

.item {
  height: 160px;
  padding-top: 10px;
  line-height: 25px;
  align-content: center;
}

.tag-group {
  margin-top: 10px;
}

.title {
  padding: 1px;
  margin-top: 50px;
  line-height: 1.6;
  text-align: left;
  background-color: #fafafa;
  border-left: 15px solid #5fb878;
  border-radius: 0 2px 2px 0;
}

::v-deep .el-dialog .el-dialog__body {
  max-height: 90vh;
}

::v-deep .el-tree-node__content:hover {
  color: #fff;
  background-color: #4ba6d0;
}

::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  font-weight: bold; // 字体加粗
  color: rgba(7, 234, 250, 0.991); // 节点的字体颜色
  // 设置颜色
  background-color: rgba(
    5,
    74,
    101,
    0.5
  ); // 透明度为0.2的skyblue，作者比较喜欢的颜色
}
</style>
