<template>
  <div>
    <!-- 筛选start -->
    <div class="filter-container mb-10">
      <div class="left">
        <div>
          <div class="filter-item">
            选择站点:
            <el-select
              v-model="store.state.siteId"
              placeholder="请选择"
              style="width: 220px"
              clearable
              filterable
              @change="linkDevice()"
            >
              <el-option
                v-for="site in store.state.siteList"
                :key="site"
                :label="site.siteName"
                :value="site.id"
              ></el-option>
            </el-select>
          </div>
          <div class="filter-item" style="margin-right: 20px">
            选择设备:
            <el-select
              v-model="deviceCode"
              placeholder="请选择"
              style="width: 150px"
            >
              <el-option
                v-for="device in deviceList"
                :key="device"
                :label="device.deviceName"
                :value="device.deviceCode"
              ></el-option>
            </el-select>
          </div>

          <div class="filter-item">
            日期：
            <!-- <el-date-picker
              v-model="dateTime"
              type="dates"
              placeholder="请选择"
              style="width: 200px"
            ></el-date-picker> -->

            <el-date-picker
              v-model="dateTime"
              placeholder="请选择"
              style="width: 150px; margin-left: 20px"
              :clearable="false"
              :editable="false"
            ></el-date-picker>
          </div>

          <el-button
            type="primary"
            class="search-button"
            @click="SingleLoopReportData()"
          >
            搜索
          </el-button>
        </div>
      </div>
      <div class="right descIcon" @click="descripDialog()">
        <img src="@/assets/images/descIcon.png" alt="" />
        指标说明
      </div>
    </div>
    <!-- 筛选end -->

    <el-row :gutter="20" >
      <el-col :md="24" :lg="14">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>电压质量</span>
            <span class="subs">
              标称电压：
              {{ getData.voltageLevel ? getData.voltageLevel : '-' }}V
            </span>
          </div>

          <el-row :gutter="20" style="padding: 20px" >
            <el-col :md="24" :lg="8" v-loading="loading" >
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">A相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionUa ? getData.proportionUa : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrUa==null ? '-' :getData.qrUa  }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button
                  class="banlanceBtn"
                  round
                  :type="
                    getData.uaStatus == true
                      ? 'primary'
                      : getData.uaStatus == false
                      ? 'danger'
                      : 'warning'
                  "
                >
                  {{
                    getData.uaStatus == true
                      ? '合格'
                      : getData.uaStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxUa ? getData.maxUa : '-' }}</div>
                    <span :class="getData.maxUaStatus ? '' : 'overLimit'">
                      {{
                        getData.maxUaStatus == true
                          ? '未超限'
                          : getData.maxUaStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minUa ? getData.minUa : '-' }}</div>
                    <span :class="getData.minUaStatus ? '' : 'overLimit'">
                      {{
                        getData.minUaStatus == true
                          ? '未超限'
                          : getData.minUaStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgUa ? getData.avgUa : '-' }}</div>
                    <span :class="getData.avgUaStatus ? '' : 'overLimit'">
                      {{
                        getData.avgUaStatus == true
                          ? '未超限'
                          : getData.avgUaStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :md="24" :lg="8" v-loading="loading">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">B相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionUb ? getData.proportionUb : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrUb==null ? '-' :getData.qrUb  }}%
                       
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button
                  class="banlanceBtn"
                  round
                  :type="
                    getData.ubStatus == true
                      ? 'primary'
                      : getData.ubStatus == false
                      ? 'danger'
                      : 'warning'
                  "
                >
                  {{
                    getData.ubStatus == true
                      ? '合格'
                      : getData.ubStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxUb ? getData.maxUb : '-' }}</div>
                    <span :class="getData.maxUbStatus ? '' : 'overLimit'">
                      {{
                        getData.maxUbStatus == true
                          ? '未超限'
                          : getData.maxUbStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minUb ? getData.minUb : '-' }}</div>
                    <span :class="getData.minUbStatus ? '' : 'overLimit'">
                      {{
                        getData.minUbStatus == true
                          ? '未超限'
                          : getData.minUbStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgUb ? getData.avgUb : '-' }}</div>
                    <span :class="getData.avgUbStatus ? '' : 'overLimit'">
                      {{
                        getData.avgUbStatus == true
                          ? '未超限'
                          : getData.avgUbStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :md="24" :lg="8" v-loading="loading">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">C相电压</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionUc ? getData.proportionUc : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrUc==null ? '-' :getData.qrUc  }}%
                      
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button
                  class="banlanceBtn"
                  round
                  :type="
                    getData.ucStatus == true
                      ? 'primary'
                      : getData.ucStatus == false
                      ? 'danger'
                      : 'warning'
                  "
                >
                  {{
                    getData.ucStatus == true
                      ? '合格'
                      : getData.ucStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxUc ? getData.maxUc : '-' }}</div>
                    <span :class="getData.maxUcStatus ? '' : 'overLimit'">
                      {{
                        getData.maxUcStatus == true
                          ? '未超限'
                          : getData.maxUcStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minUc ? getData.minUc : '-' }}</div>
                    <span :class="getData.minUcStatus ? '' : 'overLimit'">
                      {{
                        getData.minUcStatus == true
                          ? '未超限'
                          : getData.minUcStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgUc ? getData.avgUc : '-' }}</div>
                    <span :class="getData.avgUcStatus ? '' : 'overLimit'">
                      {{
                        getData.avgUcStatus == true
                          ? '未超限'
                          : getData.avgUcStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="12" :lg="5" v-loading="loading">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>频率质量</span>
            <span class="subs">
              标称频率：{{ getData.mhz ? getData.mhz : 0 }}Hz
            </span>
          </div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="24">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">频率</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.proportionF ? getData.proportionF : '-' }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        <!-- {{ getData.qrF ? getData.qrF : '-' }}% -->
                        {{ getData.qrF==null ? '-' :getData.qrF  }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button
                  class="banlanceBtn"
                  round
                  :type="
                    getData.fstatus == true
                      ? 'primary'
                      : getData.fstatus == false
                      ? 'danger'
                      : 'warning'
                  "
                >
                  {{
                    getData.fstatus == true
                      ? '合格'
                      : getData.fstatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>最大值：{{ getData.maxF ? getData.maxF : '-' }}</div>
                    <span :class="getData.maxFStatus ? '' : 'overLimit'">
                      {{
                        getData.maxFStatus == true
                          ? '未超限'
                          : getData.maxFStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>最小值：{{ getData.minF ? getData.minF : '-' }}</div>
                    <span :class="getData.minFStatus ? '' : 'overLimit'">
                      {{
                        getData.minFStatus == true
                          ? '未超限'
                          : getData.minFStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>平均值：{{ getData.avgF ? getData.avgF : '-' }}</div>
                    <span :class="getData.avgFStatus ? '' : 'overLimit'">
                      {{
                        getData.avgFStatus == true
                          ? '未超限'
                          : getData.avgFStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="12" :lg="5" v-loading="loading">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">功率因数分析</div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="24">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">功率因数</div>
                <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="24" style="margin-bottom: 20px">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{ getData.appraise!=null ? getData.appraise : '-' }}
                      </div>
                      <div class="assTxt">考核限值</div>
                    </div>
                  </el-col>
                  <el-col :span="24" style="margin-bottom: 20px">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.cos!=null ? getData.cos : '-' }}
                      </div>
                      <div class="assTxt">数值</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button
                  class="banlanceBtn"
                  round
                  :type="
                    getData.cosStatus == true
                      ? 'primary'
                      : getData.cosStatus == false
                      ? 'danger'
                      : 'warning'
                  "
                >
                  {{
                    getData.cosStatus == true
                      ? '合格'
                      : getData.cosStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :md="24" :lg="14" v-loading="loading">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>谐波畸变率</span>
            <span class="subs">数值标准</span>
          </div>

          <el-row :gutter="20" style="padding: 20px">
            <el-col :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">A相电流谐波畸变率</div>
                <img
                  class="noDataImg"
                  src="@/assets/images/noDataImg.png"
                  alt=""
                />
              </div>
            </el-col>
            <el-col :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">B相电流谐波畸变率</div>
                <img
                  class="noDataImg"
                  src="@/assets/images/noDataImg.png"
                  alt=""
                />
                <!-- <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="danger">
                  不合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span class="overLimit">超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul> -->
              </div>
            </el-col>
            <el-col :md="24" :lg="8">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">C相电流谐波畸变率</div>
                <img
                  class="noDataImg"
                  src="@/assets/images/noDataImg.png"
                  alt=""
                />
                <!-- <el-row :gutter="20" style="padding: 0 20px">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">0/128</div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">100%</div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button class="banlanceBtn" round type="primary">
                  合格
                </el-button>
                <ul>
                  <li>
                    <div>最大值：234.87V(6.76%)</div>
                    <span class="overLimit">超限</span>
                  </li>
                  <li>
                    <div>最小值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                  <li>
                    <div>平均值：234.87V(6.76%)</div>
                    <span>未超限</span>
                  </li>
                </ul> -->
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :md="24" :lg="10">
        <div class="grid-content bg-purple">
          <div class="blanceChartTit">
            <span>不平衡度</span>
            <span class="subs">数值标准</span>
          </div>
          <el-row :gutter="20" style="padding: 20px">
            <el-col :span="12">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">电流不平衡度</div>
                <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
                  <el-col :span="12" >
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{
                          getData.proportionElBalun
                            ? getData.proportionElBalun
                            : '-'
                        }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrElBalun==null ? '-' :getData.qrElBalun  }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button
                  class="banlanceBtn"
                  round
                  :type="
                    getData.elBalunStatus == true
                      ? 'primary'
                      : getData.elBalunStatus == false
                      ? 'danger'
                      : 'warning'
                  "
                >
                  {{
                    getData.elBalunStatus == true
                      ? '合格'
                      : getData.elBalunStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>
                <ul>
                  <li>
                    <div>
                      最大值：{{
                        getData.maxElBalun!=null? getData.maxElBalun : '-'
                      }}
                    </div>
                    <span :class="getData.maxElBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.maxElBalunStatus == true
                          ? '未超限'
                          : getData.maxElBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      最小值：{{
                        getData.minElBalun!=null ? getData.minElBalun : '-'
                      }}
                    </div>
                    <span :class="getData.minElBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.minElBalunStatus == true
                          ? '未超限'
                          : getData.minElBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      平均值：{{
                        getData.avgElBalun!=null ? getData.avgElBalun : '-'
                      }}
                    </div>
                    <span :class="getData.avgElBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.avgElBalunStatus == true
                          ? '未超限'
                          : getData.avgElBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>

            <el-col :span="12">
              <div
                class="grid-content bg-purple assCard"
                style="text-align: center"
              >
                <div class="subTits">电压不平衡度</div>
                <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum">
                        {{
                          getData.proportionVtBalun
                            ? getData.proportionVtBalun
                            : '-'
                        }}
                      </div>
                      <div class="assTxt">超限数/测点数</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple assSmallbox">
                      <div class="assNum greenRate">
                        {{ getData.qrVtBalun==null ? '-' :getData.qrVtBalun  }}%
                      </div>
                      <div class="assTxt">合格率</div>
                    </div>
                  </el-col>
                </el-row>
                <el-button
                  class="banlanceBtn"
                  round
                  :type="
                    getData.vtBalunStatus == true
                      ? 'primary'
                      : getData.vtBalunStatus == false
                      ? 'danger'
                      : 'warning'
                  "
                >
                  {{
                    getData.vtBalunStatus == true
                      ? '合格'
                      : getData.vtBalunStatus == false
                      ? '不合格'
                      : '暂无结论'
                  }}
                </el-button>

                <ul>
                  <li>
                    <div>
                      最大值：{{
                        getData.maxVtBalun!=null ? getData.maxVtBalun : '-'
                      }}
                    </div>
                    <span :class="getData.maxVtBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.maxVtBalunStatus == true
                          ? '未超限'
                          : getData.maxVtBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      最小值：{{
                        getData.minVtBalun!=null ? getData.minVtBalun : '-'
                      }}
                    </div>
                    <span :class="getData.minVtBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.minVtBalunStatus == true
                          ? '未超限'
                          : getData.minVtBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                  <li>
                    <div>
                      平均值：{{
                        getData.avgVtBalun!=null ? getData.avgVtBalun : '-'
                      }}
                    </div>
                    <span :class="getData.avgVtBalunStatus ? '' : 'overLimit'">
                      {{
                        getData.avgVtBalunStatus == true
                          ? '未超限'
                          : getData.avgVtBalunStatus == false
                          ? '超限'
                          : '-'
                      }}
                    </span>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!--指标说明弹框组件开始-----------------------start-->
    <descrip-dialog
      @closeDialog="closeDialog"
      :flag="showDialog2"
      class="descripDialog"
    ></descrip-dialog>
    <!--指标说明弹框组件结束-----------------------end-->
  </div>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, onMounted, ref, watch } from 'vue'
import * as api from '@/api/powerQuality/loopReport.js'
import descripDialog from './scoreReportComponent/descripDialog'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'LoopReport',
  components: {
    descripDialog,
  },
  props: {
    activeName: String,
  },
  setup(props) {
    const store = useStore()
    const loading=ref(false)
    const getData = ref({})
    const showDialog2 = ref(false)

    const deviceList = ref([])
    const deviceCode = ref('')
    const dateTime = ref(new Date())
    const dialogTitle = ref('')

    function linkDevice() {
      deviceSelect()
    }

    //设备下拉请求
    function deviceSelect() {
      api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
        if (requset.status === 'SUCCESS') {
          deviceList.value = requset.data
          deviceCode.value = requset.data[0] ? requset.data[0].deviceCode : ''
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    //单回路主页面请求
    function SingleLoopReportData() {
        loading.value=true
      store.commit('getNowFormatDate', dateTime.value)
      //  time:store.state.dateList,
      // time:'2021-11-01'
      api
        .SingleLoopReportData({
          deviceCode: deviceCode.value,
          time: store.state.dateList,
          type: 1,
        })
        .then((requset) => {
           setTimeout(()=>{
          loading.value=false
        },200)
          if (requset.status === 'SUCCESS') {
            // console.log('requset.data.uaStatus')
            // console.log(requset.data.uaStatus)
            
            if(requset.data==null){
               ElMessage.warning('暂无数据')
            }else{
              getData.value = requset.data

            }
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }
    // 查看指标说明
    const descripDialog = () => {
      dialogTitle.value = '指标说明'
      showDialog2.value = true
    }
    // 关闭操作
    const closeDialog = () => {
      showDialog2.value = false
    }

    watch(
      () => props.activeName,
      (newVal) => {
        if (newVal == 'second') {
          // getData.value={}
          deviceSelect()
          setTimeout(function () {
            SingleLoopReportData()
          }, 1000)
        }
      }
    )

    onMounted(() => {
      deviceSelect()
    })
    return {
      store,
      deviceList,
      deviceCode,
      linkDevice,
      deviceSelect,
      SingleLoopReportData,
      dateTime,
      region: '',
      getData,
      closeDialog,
      showDialog2,
      descripDialog,
      dialogTitle,
      loading
    }
  },
})
</script>
 
<style scoped lang="scss">
.el-button {
  cursor: default !important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  border: 1px solid #99a9bf;
}
.bg-purple {
  border: 1px solid #d3dce6;
}
.bg-purple-light {
  border: 1px solid #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  border: 1px solid #f9fafc;
}
</style>