底层架构优化/电能质量-实时监测,谐波报表功能优化

src/assets/css/element.scss

@@ -39,7 +39,20 @@
     margin: 0 auto 20px;
 }
 
+// 标签页样式
+.el-tabs {
+    --el-tabs-header-height: 50px;
 
-.el-tabs__new-tab {
-    margin: 10px 10px 10px 10px
+    &__content {
+        padding: 15px !important;
+    }
+
+    &__new-tab {
+        margin: 10px 10
+    }
+}
+
+
+.el-upload-list {
+    margin: 0px !important
 }

src/assets/css/index.scss

@@ -97,6 +97,23 @@ div:focus {
     line-height: 1.5;
 }
 
+.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;
+}
+
 .app-container {
     padding: $vab-padding;
     width: calc(100%);
@@ -130,11 +147,17 @@ div:focus {
     .filter-item {
         display: flex;
         margin-right: 30px;
-        margin-bottom: 10px;
+        margin-bottom: 0px;
 
         >.title {
             margin: auto 0;
         }
+
+        >.image {
+            width: 15px;
+            height: 15px;
+            margin: auto 5px auto auto
+        }
     }
 }
 
@@ -569,72 +592,8 @@ div:focus {
 }
 
 // 实时评分 
-.descIcon {
-    cursor: pointer
-}
-
-.descIcon img {
-    position: relative;
-    top: 2px;
-}
-
-.smallSquare {
-    display: inline-block;
-    width: 7px;
-    position: relative;
-    top: -1px;
-    height: 7px;
-    background: #F80000;
-}
-
-.smallSquare.green {
-    background: #24BE00
-}
-
-.loopUnbanlancePanel,
-.loopHarmonicPanel {
-    height: 591px;
-    overflow: hidden;
-
-    .el-row {
-        margin-bottom: 0 !important;
-    }
-}
-
-.loopUnbanlanceCard {
-
-    // height: calc(100% - 100px);
-    ul {
-        padding: 0;
-        margin-bottom: 0;
-        font-size: 14px;
-        margin-top: 20px
-    }
-
-    li {
-        display: flex;
 
-        >div {
-            margin: 2px 4px;
-            line-height: 14px;
-        }
 
-        >div:first-child {
-            // min-width: 64px;
-        }
-    }
-}
-
-@media(min-width:1500px) {
-    .loopUnbanlanceCard {
-        li {
-            >div {
-                margin: 7px 20px;
-                line-height: 14px;
-            }
-        }
-    }
-}
 
 @media(max-width:1200px) {
     .bg-purple {

src/main.js

@@ -22,7 +22,6 @@ import './permissions.js'
 
 const app = createApp(App)
 
-
 app.config.globalProperties.$echarts = echarts
 
 app.use(router)

src/views/alarmManage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container alarmingManage" v-if="pageShow">
     <!-- 筛选start -->
-    <div class="filter-container mb-10" style="justify-content: left; white-space: nowrap;">
+    <div class="filter-container mb-20" style="justify-content: left; white-space: nowrap;">
       <div class="filter-item">
         <span class="title">站点：</span>
         <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px" clearable filterable

src/views/deviceManage/powerEquip/monitoring/index.vue

@@ -1,71 +1,69 @@
 <template>
-    <div class="first">
-        <div class="insertBox" v-if="!detailsBool">
-            <div class="firstTop">
-                <div class="firstTopLeft ">
-                    <!-- 选择站点:
+    <div class="insertBox" v-if="!detailsBool">
+        <div class="firstTop">
+            <div class="firstTopLeft ">
+                <!-- 选择站点:
                     <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 150px; margin-right: 20px">
                         <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName"
                             :value="site.id"></el-option>
                     </el-select> -->
-                    <div class="filter-item">
-                        <span class="firstTopLeftTitle">站点名称:</span>
-                        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"
-                            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                    </div>
-                    <div class="filter-item">
-                        <span class="firstTopLeftTitle">联系人:</span>
-                        <el-input v-model="userName" placeholder="请输入联系人" class="firstTopLeftInput"
-                            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                    </div>
-                    <div class="filter-item">
-                        <span class="firstTopLeftTitle">手机号:</span>
-                        <el-input v-model="phone" placeholder="请输入手机号码" class="firstTopLeftInput"
-                            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                    </div>
-
-                    <el-button type="primary" icon="Search" class="search-button" @click="monitorDeviceList()"
-                        :disabled="store.state.authorities.indexOf('查询') == -1">
-                        搜索
-                    </el-button>
-                    <el-button class="search-button" icon="Plus" type="success" @click="addItem()"
-                        :disabled="store.state.authorities.indexOf('新增') == -1">
-                        新增
-                    </el-button>
+                <div class="filter-item">
+                    <span class="firstTopLeftTitle">站点名称:</span>
+                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"
+                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
                 </div>
+                <div class="filter-item">
+                    <span class="firstTopLeftTitle">联系人:</span>
+                    <el-input v-model="userName" placeholder="请输入联系人" class="firstTopLeftInput"
+                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+                </div>
+                <div class="filter-item">
+                    <span class="firstTopLeftTitle">手机号:</span>
+                    <el-input v-model="phone" placeholder="请输入手机号码" class="firstTopLeftInput"
+                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+                </div>
+
+                <el-button type="primary" icon="Search" class="search-button" @click="monitorDeviceList()"
+                    :disabled="store.state.authorities.indexOf('查询') == -1">
+                    搜索
+                </el-button>
+                <el-button class="search-button" icon="Plus" type="success" @click="addItem()"
+                    :disabled="store.state.authorities.indexOf('新增') == -1">
+                    新增
+                </el-button>
             </div>
+        </div>
 
-            <div class="firstContent">
-                <el-table :data="tableData" border stripe
-                    :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 300px)">
-                    <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
-                    <el-table-column prop="siteAddress" label="站点地址" align="center"></el-table-column>
-                    <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
-                    <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
-                    <el-table-column prop="deviceCount" label="设备数量" align="center" width="">
-                        <template #default="scope">
-                            <div style="  margin-right: 15px; cursor: pointer; color: #409eff; " @click="
-                                deviceNumSelect({ id: scope.row.id, deviceCount: scope.row.deviceCount, })">
-                                {{ scope.row.deviceCount }}
-                            </div>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <div class="listPagination1">
-                    <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
-                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-                        @current-change="handleCurrentChange" background></el-pagination>
-                </div>
+        <div class="firstContent">
+            <el-table :data="tableData" border stripe
+                :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 300px)">
+                <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
+                <el-table-column prop="siteAddress" label="站点地址" align="center"></el-table-column>
+                <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
+                <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
+                <el-table-column prop="deviceCount" label="设备数量" align="center" width="">
+                    <template #default="scope">
+                        <div style="  margin-right: 15px; cursor: pointer; color: #409eff; " @click="
+                            deviceNumSelect({ id: scope.row.id, deviceCount: scope.row.deviceCount, })">
+                            {{ scope.row.deviceCount }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="listPagination1">
+                <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
+                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange" background></el-pagination>
             </div>
         </div>
+    </div>
 
-        <deviceDetails @updateRow="update" @func="detailsBool = false" v-else>
-        </deviceDetails>
+    <deviceDetails @updateRow="update" @func="detailsBool = false" v-else>
+    </deviceDetails>
 
-        <!-- 新增 -->
-        <insertDialog ref="insertDialogRef" @handleSelect="monitorDeviceList()">
-        </insertDialog>
-    </div>
+    <!-- 新增 -->
+    <insertDialog ref="insertDialogRef" @handleSelect="monitorDeviceList()">
+    </insertDialog>
 </template>
 <script setup>
 /*----------------------------------依赖引入-----------------------------------*/
@@ -176,52 +174,47 @@ onMounted(() => {
 })
 </script>
 <style lang="scss">
-//first样式
-.first {
-    margin: 15px;
-
-    //顶部左侧样式
-    .firstTop {
-        display: flex;
-        height: 32px;
-        line-height: 32px;
+//顶部左侧样式
+.firstTop {
+    display: flex;
+    height: 32px;
+    line-height: 32px;
 
-        .firstTopLeft {
-            width: 100%;
+    .firstTopLeft {
+        width: 100%;
 
-            .goBack {
-                margin-right: 15px;
-            }
+        .goBack {
+            margin-right: 15px;
+        }
 
-            .firstTopLeftTitle {
-                font-size: 14px;
-                margin-right: 10px;
-            }
+        .firstTopLeftTitle {
+            font-size: 14px;
+            margin-right: 10px;
+        }
 
-            .firstTopLeftInput {
-                width: 15rem;
-            }
+        .firstTopLeftInput {
+            width: 15rem;
+        }
 
-            .el-input__icon {
-                color: #409eff;
-            }
+        .el-input__icon {
+            color: #409eff;
+        }
 
-            .el-input__inner:hover {
-                border-color: #409eff;
-            }
+        .el-input__inner:hover {
+            border-color: #409eff;
+        }
 
-            .el-input__inner:focus {
-                border-color: #409eff;
-            }
+        .el-input__inner:focus {
+            border-color: #409eff;
+        }
 
-            .search-button {
-                margin-left: 1rem;
-            }
+        .search-button {
+            margin-left: 1rem;
         }
     }
+}
 
-    .firstContent {
-        margin-top: 15px;
-    }
+.firstContent {
+    margin-top: 15px;
 }
 </style>

src/views/planOutage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!-- 筛选start -->
-    <div class="filter-container mb-10">
+    <div class="filter-container mb-20">
       <div class="filter-item">
         <span class="title" style="margin-right: 30px">计划停电列表</span>
         <el-button icon="Plus" type="success" @click="addItem()" :disabled="store.state.authorities.indexOf('新增') == -1">
@@ -15,7 +15,7 @@
       </div>
     </div>
 
-    <div class="filter-container mb-10" style="justify-content: left; white-space: nowrap;">
+    <div class="filter-container mb-20" style="justify-content: left; white-space: nowrap;">
       <div class="filter-item">
         <span class="title">选择时间范围：</span>
         <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"

src/views/powerQuality/harmonicReport/curveCom.vue

@@ -6,180 +6,163 @@
     <div class="height300" ref="worksChartRef" />
   </div>
 </template>
-<script>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
-import { useStore } from 'vuex'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import * as echarts from 'echarts'
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  curveComList: Object,
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+const worksChartRef = ref(null)
 
-export default defineComponent({
-  name: 'CurveComB',
-  props: {
-    curveComList: Object,
-  },
-  setup(props, context) {
-    context
-    const store = useStore()
-    const worksChartRef = ref(null)
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
-    // 读取数据 func
-    const getData = async () => {
-    }
-
-    function ecahrts() {
-    
-      let myChart = echarts.init(worksChartRef.value)
+function ecahrts() {
+  let myChart = echarts.init(worksChartRef.value)
 
-      // 绘制图表
-      myChart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
+  // 绘制图表
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    legend: {
+      right: 60,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 35,
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: props.curveComList.dateList,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
         },
-        legend: {
-          right: 60,
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 35,
+        axisTick: {
+          show: false,
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
+        axisLabel: {
+          show: true,
+          color: '#444',
         },
-        xAxis: [
-          {
-            type: 'category',
-            data: props.curveComList.dateList,
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: true,
-              color: '#444',
-            },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: 'A',
+        nameTextStyle: {
+          color: '#444',
+        },
+        axisLabel: {
+          formatter: '{value} ',
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: 'A',
-            nameTextStyle: {
-              color: '#444',
-            },
-            axisLabel: {
-              formatter: '{value} ',
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#444',
-              },
-            },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#444',
           },
-        ],
-        series: [
-          {
-            name: props.curveComList.icontitle,
-            type: 'line',
-            data: props.curveComList.data,
-            barWidth: 10, //柱子宽度
-            barGap: '1', //柱子之间间距
-            itemStyle: {
-              normal: {
-                color: '#5b82ee',
-                opacity: 1,
-              },
-            },
+        },
+      },
+    ],
+    series: [
+      {
+        name: props.curveComList.icontitle,
+        type: 'line',
+        data: props.curveComList.data,
+        barWidth: 10, //柱子宽度
+        barGap: '1', //柱子之间间距
+        itemStyle: {
+          normal: {
+            color: '#5b82ee',
+            opacity: 1,
           },
-        ],
-      })
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-    }
-
-    onMounted(() => {
-      getData()
-      ecahrts()
-    })
+        },
+      },
+    ],
+  })
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
 
-    // 异步任务 用于给tree传值
-    const writeValue = (val) => {
-      val
-      
-      ecahrts()
-      setTimeout(()=>{
-        getData()
-      },200)
-      
+onMounted(() => {
+  ecahrts()
+})
 
-    }
-    // 定义 watch 监听
-    watch(
-      props.curveComList,
-      (newCount, old, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        let id = writeValue(newCount, old)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      // watch 刚被创建的时候不执行
-      { lazy: true }
-    )
+// 异步任务 用于给tree传值
+const writeValue = (val) => {
+  ecahrts()
+}
 
-    return {
-      worksChartRef,
-      total,
-      num,
-    }
+// 定义 watch 监听
+watch(
+  props.curveComList,
+  (newCount, old, clear) => {
+    // 执行异步任务，并得到关闭异步任务的 id
+    let id = writeValue(newCount, old)
+    // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+    clear(() => clearTimeout(id))
   },
-})
+  // watch 刚被创建的时候不执行
+  { lazy: true }
+)
 </script>
 <style lang="scss" scoped>
 .homeBoxCard {
   margin-bottom: 24px;
+
   ::v-deep(.el-card__header) {
     padding-left: 12px;
     padding-right: 12px;
   }
+
   ::v-deep(.el-card__body) {
     padding: 12px;
     font-size: 14px;
     line-height: 1.5715;
   }
+
   ::v-deep(.el-divider) {
     margin: 8px 0;
   }
+
   .num {
     font-size: 30px;
     color: #515a6e;
   }
+
   .height300 {
     height: 300px;
   }

src/views/powerQuality/harmonicReport/curveComA.vue

@@ -4,190 +4,182 @@
     <div class="height300" id="worksChartRef" ref="worksChartRef" />
   </div>
 </template>
-<script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import * as echarts from 'echarts'
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  curveComList: Object,
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+// 读取数据 func
+const loading = ref(true)
+const worksChartRef = ref(null)
 
-export default defineComponent({
-  name: 'CurveComB',
-  setup() {
-    const store = useStore()
-
-    const worksChartRef = ref(null)
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true
-      // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false
-    }
+onMounted(() => {
+  loading.value = false
+  let myChart = echarts.init(worksChartRef.value)
+  // 绘制图表
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    legend: {
 
-    onMounted(() => {
-      getData()
-      let myChart = echarts.init(worksChartRef.value)
-      // 绘制图表
-      myChart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
+      right: 60,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 35,
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: [
+          '1次',
+          '3次',
+          '5次',
+          '7次',
+          '9次',
+          '11次',
+          '13次',
+          '15次',
+          '17次',
+          '19次 ',
+        ],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
         },
-        legend: {
-          
-          right: 60,
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 35,
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: true,
+          color: '#444',
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: 'A',
+        nameTextStyle: {
+          color: '#444',
         },
-        xAxis: [
-          {
-            type: 'category',
-            data: [
-              '1次',
-              '3次',
-              '5次',
-              '7次',
-              '9次',
-              '11次',
-              '13次',
-              '15次',
-              '17次',
-              '19次 ',
-            ],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: true,
-              color: '#444',
-            },
+        axisLabel: {
+          formatter: '{value} ',
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: 'A',
-            nameTextStyle: {
-              color: '#444',
-            },
-            axisLabel: {
-              formatter: '{value} ',
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#444',
-              },
-            },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#444',
           },
-        ],
-        series: [
-          {
-            name: '平均值',
-            type: 'bar',
-            data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
-            barWidth: 10, //柱子宽度
-            barGap: '1', //柱子之间间距
-            itemStyle: {
-              normal: {
-                color: '#5b82ee',
-                opacity: 1,
-              },
-            },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '平均值',
+        type: 'bar',
+        data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
+        barWidth: 10, //柱子宽度
+        barGap: '1', //柱子之间间距
+        itemStyle: {
+          normal: {
+            color: '#5b82ee',
+            opacity: 1,
           },
-          {
-            name: '95%',
-            type: 'bar',
-            data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
-            barWidth: 10,
-            barGap: '1',
-            itemStyle: {
-              normal: {
-                color: '#f2e251',
-                opacity: 1,
-              },
-            },
+        },
+      },
+      {
+        name: '95%',
+        type: 'bar',
+        data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
+        barWidth: 10,
+        barGap: '1',
+        itemStyle: {
+          normal: {
+            color: '#f2e251',
+            opacity: 1,
           },
-          {
-            name: '最大值',
-            type: 'bar',
-            data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
-            barWidth: 10,
-            barGap: '1',
-            itemStyle: {
-              normal: {
-                color: '#fe8161',
-                opacity: 1,
-              },
-            },
+        },
+      },
+      {
+        name: '最大值',
+        type: 'bar',
+        data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
+        barWidth: 10,
+        barGap: '1',
+        itemStyle: {
+          normal: {
+            color: '#fe8161',
+            opacity: 1,
           },
-        ],
-      })
-      window.onresize = function () {
-        // 自适应大小
-        myChart.resize()
-      }
-    })
-
-    return {
-      worksChartRef,
-      loading,
-      total,
-      num,
-    }
-  },
+        },
+      },
+    ],
+  })
+  window.onresize = function () {
+    // 自适应大小
+    myChart.resize()
+  }
 })
 </script>
 <style lang="scss" scoped>
 .homeBoxCard {
   margin-bottom: 24px;
+
   ::v-deep(.el-card__header) {
     padding-left: 12px;
     padding-right: 12px;
   }
+
   ::v-deep(.el-card__body) {
     padding: 12px;
     font-size: 14px;
     line-height: 1.5715;
   }
+
   ::v-deep(.el-divider) {
     margin: 8px 0;
   }
+
   .num {
     font-size: 30px;
     color: #515a6e;
   }
+
   .height300 {
     height: 300px;
   }

src/views/powerQuality/harmonicReport/curveComB.vue

@@ -4,190 +4,183 @@
     <div class="height300" id="curveComB" ref="curveComB" />
   </div>
 </template>
-<script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import * as echarts from 'echarts'
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  curveComList: Object,
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+// 读取数据 func
+const loading = ref(true)
 
-export default defineComponent({
-  name: 'CurveComA',
-  setup() {
-    const store = useStore()
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true
-      // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false;
-    }
-
-    onMounted(() => {
-      getData()
-      let myChart = echarts.init(document.getElementById('curveComB'))
-      // 绘制图表
-      myChart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
+onMounted(() => {
+  loading.value = false;
+  let myChart = echarts.init(document.getElementById('curveComB'))
+  // 绘制图表
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    legend: {
+      show: false,
+      data: ['平均值', '95%', '最大值'],
+      // align: 'right',
+      right: 60,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 35,
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: [
+          '1次',
+          '3次',
+          '5次',
+          '7次',
+          '9次',
+          '11次',
+          '13次',
+          '15次',
+          '17次',
+          '19次 ',
+        ],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
         },
-        legend: {
-          show:false,
-          data: ['平均值', '95%', '最大值'],
-          // align: 'right',
-          right: 60,
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 35,
+        axisTick: {
+          show: false,
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
+        axisLabel: {
+          show: true,
+          color: '#444',
         },
-        xAxis: [
-          {
-            type: 'category',
-            data: [
-              '1次',
-              '3次',
-              '5次',
-              '7次',
-              '9次',
-              '11次',
-              '13次',
-              '15次',
-              '17次',
-              '19次 ',
-            ],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: true,
-              color: '#444',
-            },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: 'A',
+        nameTextStyle: {
+          color: '#444',
+        },
+        axisLabel: {
+          formatter: '{value} ',
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: 'A',
-            nameTextStyle: {
-              color: '#444',
-            },
-            axisLabel: {
-              formatter: '{value} ',
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#444',
-              },
-            },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#444',
           },
-        ],
-        series: [
-          {
-            name: '平均值',
-            type: 'bar',
-            data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
-            barWidth: 10, //柱子宽度
-            barGap: '1', //柱子之间间距
-            itemStyle: {
-              normal: {
-                color: '#5b82ee',
-                opacity: 1,
-              },
-            },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '平均值',
+        type: 'bar',
+        data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
+        barWidth: 10, //柱子宽度
+        barGap: '1', //柱子之间间距
+        itemStyle: {
+          normal: {
+            color: '#5b82ee',
+            opacity: 1,
           },
-          {
-            name: '95%',
-            type: 'bar',
-            data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
-            barWidth: 10,
-            barGap: '1',
-            itemStyle: {
-              normal: {
-                color: '#f2e251',
-                opacity: 1,
-              },
-            },
+        },
+      },
+      {
+        name: '95%',
+        type: 'bar',
+        data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
+        barWidth: 10,
+        barGap: '1',
+        itemStyle: {
+          normal: {
+            color: '#f2e251',
+            opacity: 1,
           },
-          {
-            name: '最大值',
-            type: 'bar',
-            data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
-            barWidth: 10,
-            barGap: '1',
-            itemStyle: {
-              normal: {
-                color: '#fe8161',
-                opacity: 1,
-              },
-            },
+        },
+      },
+      {
+        name: '最大值',
+        type: 'bar',
+        data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
+        barWidth: 10,
+        barGap: '1',
+        itemStyle: {
+          normal: {
+            color: '#fe8161',
+            opacity: 1,
           },
-        ],
-      })
-      window.onresize = function () {
-        // 自适应大小
-        myChart.resize()
-      }
-    })
-
-    return {
-      loading,
-      total,
-      num,
-    }
-  },
+        },
+      },
+    ],
+  })
+  window.onresize = function () {
+    // 自适应大小
+    myChart.resize()
+  }
 })
 </script>
 <style lang="scss" scoped>
 .homeBoxCard {
   margin-bottom: 24px;
+
   ::v-deep(.el-card__header) {
     padding-left: 12px;
     padding-right: 12px;
   }
+
   ::v-deep(.el-card__body) {
     padding: 12px;
     font-size: 14px;
     line-height: 1.5715;
   }
+
   ::v-deep(.el-divider) {
     margin: 8px 0;
   }
+
   .num {
     font-size: 30px;
     color: #515a6e;
   }
+
   .height300 {
     height: 300px;
   }

src/views/powerQuality/harmonicReport/curveComC.vue

@@ -4,190 +4,183 @@
     <div class="height300" id="curveComC" ref="curveComC" />
   </div>
 </template>
-<script>
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import * as echarts from 'echarts'
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  curveComList: Object,
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+// 读取数据 func
+const loading = ref(true)
 
-export default defineComponent({
-  name: 'CurveComC',
-  setup() {
-    const store = useStore()
-
-    // 总数
-    const total = computed(() => store.state.Home.worksChartData.total)
-    // num
-    const num = computed(() => store.state.Home.worksChartData.num)
-
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-      // loading.value = true
-      // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false;
-    }
-
-    onMounted(() => {
-      getData()
-      let myChart = echarts.init(document.getElementById('curveComC'))
-      // 绘制图表
-      myChart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
+onMounted(() => {
+  loading.value = false;
+  let myChart = echarts.init(document.getElementById('curveComC'))
+  // 绘制图表
+  myChart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    legend: {
+      show: false,
+      data: ['平均值', '95%', '最大值'],
+      // align: 'right',
+      right: 60,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 35,
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: [
+          '1次',
+          '3次',
+          '5次',
+          '7次',
+          '9次',
+          '11次',
+          '13次',
+          '15次',
+          '17次',
+          '19次 ',
+        ],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
         },
-        legend: {
-          show:false,
-          data: ['平均值', '95%', '最大值'],
-          // align: 'right',
-          right: 60,
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 35,
+        axisTick: {
+          show: false,
         },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
+        axisLabel: {
+          show: true,
+          color: '#444',
         },
-        xAxis: [
-          {
-            type: 'category',
-            data: [
-              '1次',
-              '3次',
-              '5次',
-              '7次',
-              '9次',
-              '11次',
-              '13次',
-              '15次',
-              '17次',
-              '19次 ',
-            ],
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              show: true,
-              color: '#444',
-            },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: 'A',
+        nameTextStyle: {
+          color: '#444',
+        },
+        axisLabel: {
+          formatter: '{value} ',
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#444',
+            width: 1,
+            type: 'solid',
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: 'A',
-            nameTextStyle: {
-              color: '#444',
-            },
-            axisLabel: {
-              formatter: '{value} ',
-            },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#444',
-                width: 1,
-                type: 'solid',
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                color: '#444',
-              },
-            },
+        },
+        splitLine: {
+          lineStyle: {
+            color: '#444',
           },
-        ],
-        series: [
-          {
-            name: '平均值',
-            type: 'bar',
-            data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
-            barWidth: 10, //柱子宽度
-            barGap: '1', //柱子之间间距
-            itemStyle: {
-              normal: {
-                color: '#5b82ee',
-                opacity: 1,
-              },
-            },
+        },
+      },
+    ],
+    series: [
+      {
+        name: '平均值',
+        type: 'bar',
+        data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
+        barWidth: 10, //柱子宽度
+        barGap: '1', //柱子之间间距
+        itemStyle: {
+          normal: {
+            color: '#5b82ee',
+            opacity: 1,
           },
-          {
-            name: '95%',
-            type: 'bar',
-            data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
-            barWidth: 10,
-            barGap: '1',
-            itemStyle: {
-              normal: {
-                color: '#f2e251',
-                opacity: 1,
-              },
-            },
+        },
+      },
+      {
+        name: '95%',
+        type: 'bar',
+        data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
+        barWidth: 10,
+        barGap: '1',
+        itemStyle: {
+          normal: {
+            color: '#f2e251',
+            opacity: 1,
           },
-          {
-            name: '最大值',
-            type: 'bar',
-            data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
-            barWidth: 10,
-            barGap: '1',
-            itemStyle: {
-              normal: {
-                color: '#fe8161',
-                opacity: 1,
-              },
-            },
+        },
+      },
+      {
+        name: '最大值',
+        type: 'bar',
+        data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
+        barWidth: 10,
+        barGap: '1',
+        itemStyle: {
+          normal: {
+            color: '#fe8161',
+            opacity: 1,
           },
-        ],
-      })
-      window.onresize = function () {
-        // 自适应大小
-        myChart.resize()
-      }
-    })
-
-    return {
-      loading,
-      total,
-      num,
-    }
-  },
+        },
+      },
+    ],
+  })
+  window.onresize = function () {
+    // 自适应大小
+    myChart.resize()
+  }
 })
 </script>
 <style lang="scss" scoped>
 .homeBoxCard {
   margin-bottom: 24px;
+
   ::v-deep(.el-card__header) {
     padding-left: 12px;
     padding-right: 12px;
   }
+
   ::v-deep(.el-card__body) {
     padding: 12px;
     font-size: 14px;
     line-height: 1.5715;
   }
+
   ::v-deep(.el-divider) {
     margin: 8px 0;
   }
+
   .num {
     font-size: 30px;
     color: #515a6e;
   }
+
   .height300 {
     height: 300px;
   }

src/views/powerQuality/harmonicReport/index.vue

@@ -1,120 +1,56 @@
 <template>
   <div class="app-container harmonicReport">
     <!-- 筛选start -->
-    <div class="filter-container">
-      <div class="left">
-        <div>
-          <div class="filter-item">
-            选择站点:
-            <el-select
-              v-model="store.state.siteId"
-              placeholder="请选择"
-              style="width: 220px"
-              clearable
-              filterable
-              @change="linkDevice()"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <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">
-            选择设备:
-            <el-select
-              v-model="deviceCode"
-              placeholder="请选择"
-              style="width: 150px"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option
-                v-for="device in deviceList"
-                :key="device"
-                :label="device.deviceName"
-                :value="device.deviceCode"
-              ></el-option>
-              <!-- <el-option label="设备1" value="DA00021026"></el-option> -->
-            </el-select>
-          </div>
-
-          <div class="filter-item">
-            时间：
-            <el-date-picker
-              v-model="dateTime"
-              :type="dateType"
-              placeholder="请选择"
-              style="width: 150px"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            
-              :clearable="false"
-              :editable="false"
-            ></el-date-picker>
+    <div class="filter-container mb-20" style="justify-content: left; white-space: nowrap;">
+
+      <div class="filter-item">
+        <div class="title">选择站点：</div>
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
+          @change="linkDevice()" :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
+        </el-select>
+      </div>
 
-            <el-radio-group
-              v-model="listTabPosition"
-              @change="listTabsChange(listTabPosition)"
-              style="display: inline-block; position: relative; top: -3px"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-radio-button label="dayValue">按日</el-radio-button>
-              <el-radio-button label="monthValue">按月</el-radio-button>
-            </el-radio-group>
+      <div class="filter-item">
+        <div class="title">选择设备：</div>
+        <el-select v-model="deviceCode" placeholder="请选择" style="width: 150px"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="device in deviceList" :key="device" :label="device.deviceName"
+            :value="device.deviceCode"></el-option>
+          <!-- <el-option label="设备1" value="DA00021026"></el-option> -->
+        </el-select>
+      </div>
 
-            <!-- <el-button
-              class="search-button timeTab"
-              @click="num = 0"
-              :type="num == 0 ? 'primary' : ''"
-            >
-              按日
-            </el-button>
-            <el-button
-              class="search-button timeTab"
-              @click="num = 1"
-              :type="num == 1 ? 'primary' : ''"
-              style="margin-left: 0 !important"
-            >
-              按月
-            </el-button> -->
-          </div>
+      <div class="filter-item">
+        <div class="title">时间：</div>
+        <el-date-picker v-model="dateTime" :type="dateType" placeholder="请选择" style="width: 150px;margin-right: 30px;"
+          :disabled="store.state.authorities.indexOf('查询') == -1" :clearable="false" :editable="false"></el-date-picker>
 
-          <el-button type="primary" class="search-button" @click="listSelect()" :disabled="store.state.authorities.indexOf('查询')==-1">
-            搜索
-          </el-button>
-        </div>
+        <el-radio-group v-model="listTabPosition" @change="listTabsChange(listTabPosition)"
+          style="display: inline-block; " :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-radio-button label="dayValue">按日</el-radio-button>
+          <el-radio-button label="monthValue">按月</el-radio-button>
+        </el-radio-group>
       </div>
+
+      <el-button type="primary" class="search-button" @click="listSelect()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
     </div>
     <!-- 筛选end -->
 
-    <el-button
-      class="search-button timeTab"
-      @click="num2 = 0"
-      :type="num2 == 0 ? 'primary' : ''"
-      :disabled="store.state.authorities.indexOf('查询')==-1"
-    >
+    <el-button class="search-button timeTab" @click="num2 = 0" :type="num2 == 0 ? 'primary' : ''"
+      :disabled="store.state.authorities.indexOf('查询') == -1">
       曲线
     </el-button>
-    <el-button
-      class="search-button timeTab"
-      @click="num2 = 1"
-      :type="num2 == 1 ? 'primary' : ''"
-      style="margin-left: 0 !important"
-      :disabled="store.state.authorities.indexOf('查询')==-1"
-    >
+    <el-button class="search-button timeTab" @click="num2 = 1" :type="num2 == 1 ? 'primary' : ''"
+      style="margin-left: 0 !important" :disabled="store.state.authorities.indexOf('查询') == -1">
       表格
     </el-button>
-    <div v-if="num2 == 0">
-      <div v-for="curve in curveComList" :key="curve">
-        <curve-com :curveComList="curve" v-loading="loading"></curve-com>
-      </div>
 
-      <!-- <curve-comA></curve-comA>
-      <curve-comB></curve-comB>
-      <curve-comC></curve-comC> -->
+    <div v-for="curve in curveComList" :key="curve">
+      <curve-com :curveComList="curve" v-loading="loading" v-if="num2 == 0"></curve-com>
     </div>
 
     <table-com v-if="num2 == 1" :tableList="tableList"></table-com>
@@ -144,7 +80,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
-    const loading=ref(false)
+    const loading = ref(false)
     const dateType = ref('date')
     const listTabPosition = ref('dayValue')
     // const deviceCode = ref('')
@@ -196,7 +132,7 @@ export default defineComponent({
     }
 
     function listSelect() {
-      
+
       let list = {}
 
       if (listTabPosition.value == 'dayValue') {
@@ -214,51 +150,51 @@ export default defineComponent({
           endTime: store.state.monthList[1] + ' ' + '23:59:59',
         }
       }
-      if(!deviceCode.value){
-         loading.value=false
-          ElNotification({
+      if (!deviceCode.value) {
+        loading.value = false
+        ElNotification({
           title: '提示',
           message: '请选择左侧设备信息',
           type: 'warning',
         })
 
-      }else{
-         loading.value=true
+      } else {
+        loading.value = true
         api.rtRealScore(list).then((requset) => {
-         loading.value=false
-        if (requset.status === 'SUCCESS') {
-          
-          tableList.value = requset.data
-      
-          if (tableList.value.length==0) {
-            ElMessage.warning('暂无结果')
-          }
-          curveComList.value[0].data = []
-          curveComList.value[0].dateList = []
-          curveComList.value[1].data = []
-          curveComList.value[1].dateList = []
-          curveComList.value[2].data = []
-          curveComList.value[2].dateList = []
-          requset.data.map((val) => {
-            curveComList.value[0].data.push(val.ia)
-            curveComList.value[0].dateList.push(val.dataTime)
-            curveComList.value[1].data.push(val.ib)
-            curveComList.value[1].dateList.push(val.dataTime)
-            curveComList.value[2].data.push(val.ic)
-            curveComList.value[2].dateList.push(val.dataTime)
-          })
-        } else {
-          
-          ElMessage.error(requset.msg)
-         
+          loading.value = false
+          if (requset.status === 'SUCCESS') {
+
+            tableList.value = requset.data
+
+            if (tableList.value.length == 0) {
+              ElMessage.warning('暂无结果')
+            }
+            curveComList.value[0].data = []
+            curveComList.value[0].dateList = []
+            curveComList.value[1].data = []
+            curveComList.value[1].dateList = []
+            curveComList.value[2].data = []
+            curveComList.value[2].dateList = []
+            requset.data.map((val) => {
+              curveComList.value[0].data.push(val.ia)
+              curveComList.value[0].dateList.push(val.dataTime)
+              curveComList.value[1].data.push(val.ib)
+              curveComList.value[1].dateList.push(val.dataTime)
+              curveComList.value[2].data.push(val.ic)
+              curveComList.value[2].dateList.push(val.dataTime)
+            })
+          } else {
+
+            ElMessage.error(requset.msg)
+
 
-          
-        }
-      })
+
+          }
+        })
 
       }
 
-      
+
     }
 
     onMounted(() => {
@@ -294,5 +230,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/powerQuality/harmonicReport/tableCom.vue

@@ -1,36 +1,7 @@
 <template>
   <div>
     <!-- 表格start -->
-    <el-table
-      :data="tableList"
-      style="width: 100%"
-      :header-cell-style="headCellStyle"
-    >
-      <!-- <el-table-column
-        prop="date"
-        label="描述(单位A)"
-        width=""
-      ></el-table-column>
-
-      <el-table-column label="A相">
-        <el-table-column prop="name" label="最小值" width=""></el-table-column>
-        <el-table-column prop="province" label="平均值"></el-table-column>
-        <el-table-column prop="city" label="最大值"></el-table-column>
-        <el-table-column prop="address" label="95%"></el-table-column>
-      </el-table-column>
-
-      <el-table-column label="B相">
-        <el-table-column prop="name" label="最小值" width=""></el-table-column>
-        <el-table-column prop="province" label="平均值"></el-table-column>
-        <el-table-column prop="city" label="最大值"></el-table-column>
-        <el-table-column prop="address" label="95%"></el-table-column>
-      </el-table-column>
-      <el-table-column label="C相">
-        <el-table-column prop="name" label="最小值" width=""></el-table-column>
-        <el-table-column prop="province" label="平均值"></el-table-column>
-        <el-table-column prop="city" label="最大值"></el-table-column>
-        <el-table-column prop="address" label="95%"></el-table-column>
-      </el-table-column> -->
+    <el-table :data="tableList" style="width: 100%">
       <el-table-column prop="dataTime" label="时间" width="" />
       <el-table-column label="A相(A)" prop="ia" />
       <el-table-column label="B相(A)" prop="ib" />
@@ -50,106 +21,34 @@
         :total="400"
       ></el-pagination>
     </div> -->
-
     <!-- 分页end -->
   </div>
 </template>
-<script>
-export default {
-  name: 'tableCom',
-  props: {
-    tableList: Object,
-  },
-  data() {
-    return {
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-04',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-01',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-08',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-06',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-        {
-          date: '2016-05-07',
-          name: '王小虎',
-          province: '上海',
-          city: '普陀区',
-          address: '上海市普陀区金沙江路 1518 弄',
-          zip: 200333,
-        },
-      ],
-    }
-  },
-  methods: {
-    // 表头行的 style 的回调方法
-    headCellStyle({ row, column, rowIndex, columnIndex }) {
-      row, column
-      if (columnIndex !== 0 && rowIndex === 0) {
-        // return `text-align:center;`
-      } else {
-        return ''
-      }
-    },
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  tableList: Object,
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
 
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-    },
-
-    // 表头样式设置
-    goVariableList() {
-      // 跳转至订单列表页面传参
-      this.$router.push({
-        path: '../siteManage/variableList/index.vue',
-      })
-    },
-    headClass() {
-      return 'background:#FAFAFA;'
-    },
-  },
+function handleSizeChange(val) {
+  console.log(`每页 ${val} 条`)
+}
+function handleCurrentChange(val) {
+  console.log(`当前页: ${val}`)
+}
+// 表头样式设置
+function goVariableList() {
+  // 跳转至订单列表页面传参
+  this.$router.push({
+    path: '../siteManage/variableList/index.vue',
+  })
 }
 </script>

src/views/powerQuality/realTimeMonitoring/component/descripDialog.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="descripDialog">
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px" @close="closeDialog(0)">
+      <div style="width: 100%; ">
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="配置内容" name="first">
+            <div class="desBlock">
+              <h3>【设备级配置】 <a @click="goSiteWatchDog">立即前往</a></h3>
+              <p>请在 站点管理->监控设备中配置 或 联系运维管理员：</p>
+              <span>额定电压、额定电流、电流负载率门限、电能质量分析</span>
+              <span>如果设备没有配置额定电压，电压/谐波畸变率分析项可能没有数据</span>
+              <span>如果设备不勾选电能质量分析，该设备不参与电能质量分析</span>
+            </div>
+            <div class="desBlock">
+              <h3>【变量级配置】<a @click="goSiteVariableList">立即前往</a></h3>
+              <p>请在 站点管理->变量列表中配置 或 联系运维管理员：配置下列变量，且需要指定变量的变量属性</p>
+              <span>A/B/C相电压</span>
+              <span>A/B/C相电流</span>
+              <span>频率</span>
+              <span>有功/无功功率</span>
+              <span>有功/无功电度</span>
+              <span>电压三相不平衡度</span>
+              <span>电流三相不平衡度</span>
+              <span>A/B/C相电压相角</span>
+              <span>A/B/C相电流相角</span>
+              <span>A/B/C相电压总谐波畸变率</span>
+              <span>A/B/C相电流总谐波畸变率</span>
+              <span>2~31次A/B/C相电压谐波含量或有效值 (可二选一)</span>
+              <span>2~31次A/B/C相电流谐波含量或有效值 (可二选一)</span>
+              <span>如果变量没有指定变量属性 或 变量没有数据，分析项可能没有数据</span>
+            </div>
+
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const router = useRouter();
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref("")
+const dialogVisible = ref(false)
+const activeName = ref('first')
+
+
+// open(): Dialog弹窗打开之前做的事
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+  dialogVisible.value = true
+}
+
+// 关闭弹框
+function closeDialog() {
+  dialogVisible.value = false
+}
+
+function goSiteWatchDog() {
+  store.state.goUrl = 2
+  router.push({
+    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
+    path: '/siteManage',
+    query: {
+      activeName: 'second',
+      siteId: store.state.siteId
+    }
+  })
+}
+
+function goSiteVariableList() {
+  store.state.goUrl = 3
+  router.push({
+    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
+    path: '/siteManage',
+    query: {
+      activeName: 'third',
+      siteId: store.state.siteId
+    }
+  })
+}
+
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+ 
+<style scoped lang="scss">
+.desBlock {
+  padding: 15px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+
+  h3 {
+    margin: 0 0 10px 0;
+    position: relative;
+
+    a {
+      position: absolute;
+      right: 0
+    }
+
+    span {
+      position: absolute;
+      right: 0;
+      font-size: 14px;
+      color: #409eff;
+      cursor: pointer
+    }
+  }
+
+  p {
+    // margin-bottom:0px;
+  }
+
+  span {
+    display: block;
+    color: #7e93a6
+  }
+}
+</style>

src/views/powerQuality/realTimeMonitoring/index.vue

@@ -1,92 +1,126 @@
 <template>
-  <div class="app-container assePage" style="padding-top: 0">
-    <!-- tab切换 start -->
-
-    <el-tabs 
-        v-model="activeName"
-        type="card"
-      >
-        <el-tab-pane label="实时评分" name="first">
-          <br>
-          <real-score :activeName="activeName"></real-score>
-       
-        </el-tab-pane>
-        <el-tab-pane label="单回路监测" name="second"  :key='activeName'>
-          <br>
-           <loop-monitor v-if="key='activeName'" :activeName="activeName"></loop-monitor >
-        </el-tab-pane>
-      </el-tabs>
-      <br>
-
-    <!-- tab切换 end -->
-
-   
+  <div class="app-container assePage realTimeMonitoring" style="padding: 0">
+    <el-tabs v-model="activeName" type="card" class="realTimeMonitoring">
+      <el-tab-pane label="实时评分" name="first">
+        <real-score :activeName="activeName"></real-score>
+      </el-tab-pane>
+      <el-tab-pane label="单回路监测" name="second" :key='activeName'>
+        <loop-monitor v-if="key = 'activeName'" :activeName="activeName"></loop-monitor>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
-<script>
-import loopMonitor from "./loopMonitor";
-import realScore from "./realScore";
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+import loopMonitor from "./loopMonitor/index.vue";
+import realScore from "./realScore/index.vue";
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  activeName: "first",
+})
+const { activeName } = toRefs(state)
 
-
-
-
-export default {
-  name: "VariableList",
-  components: {
-    loopMonitor,
-    realScore,
-
-
-  },
-
-  data() {
-    return {
-      activeName: "first",
-
-      value4: "请选择",
-      number: 1,
-      measurType: 1,
-      select: 1,
-      currentPage4: 4,
-      showDialog: false,
-      tabPosition: "one",
-      input: "",
-      region: "",
-    };
-  },
-  methods: {},
-};
 </script>
 
 <style lang="scss" scoped>
-
-
-
-
+:deep() {
+  .realTimeMonitoring {
+
+    >.el-tabs {
+      &__content {
+        height: calc(100vh - 205px);
+        overflow-y: auto;
+      }
+    }
+  }
+
+  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+    border-bottom: 2px solid #409eff;
+    color: #409eff;
+  }
+
+  .el-tabs--card .el-tabs__header:hover,
+  .el-tabs__item:hover {
+    color: #409eff !important;
+  }
+
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+
+  .el-tabs--card>.el-tabs__header .el-tabs__item,
+  .el-tabs--card>.el-tabs__header .el-tabs__nav {
+    border: none;
+  }
+}
 </style>
 <style lang="scss">
-// tab重置样式
-.el-tabs--card > .el-tabs__header .el-tabs__item {
-  line-height: 50px;
-  height: 50px;
-  font-size: 16px;
-}
-.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
-  border-bottom: 2px solid #409eff;
-  color: #409eff;
+.smallSquare {
+  display: inline-block;
+  width: 7px;
+  position: relative;
+  top: -1px;
+  height: 7px;
+  background: #F80000;
 }
-.el-tabs--card
-.el-tabs__header:hover,
-.el-tabs__item:hover
-{
-  color: #409eff !important;
+
+.smallSquare.green {
+  background: #24BE00
 }
-.el-tabs__header {
-  margin-bottom: 0;
+
+.loopUnbanlancePanel,
+.loopHarmonicPanel {
+  height: 591px;
+  overflow: hidden;
+
+  .el-row {
+    margin-bottom: 0 !important;
+  }
 }
-.el-tabs--card > .el-tabs__header .el-tabs__item,
-.el-tabs--card > .el-tabs__header .el-tabs__nav {
-  border: none;
+
+.loopUnbanlanceCard {
+  .header {
+    width: 90%;
+    background: #1187ff;
+    margin: 0px auto;
+    text-align: center;
+    color: #fff;
+    padding: 10px 0px;
+  }
+
+  >ul {
+    padding: 0 10px;
+    margin-bottom: 0;
+    font-size: 14px;
+    margin-top: 20px;
+
+    >li {
+      display: flex;
+
+      >div {
+        width: 50%;
+        padding: 2px 4px;
+        line-height: 14px;
+
+        &:first-child {
+          margin: auto 0;
+          text-align: center;
+        }
+
+        &:last-child {}
+      }
+    }
+  }
 }
 </style>

src/views/powerQuality/realTimeMonitoring/loopMonitor.vue

@@ -1,341 +0,0 @@
-<template>
-  <div>
-    <!-- 筛选start -->
-    <div class="filter-container">
-      <div class="left">
-        <div>
-          <div class="filter-item">
-            选择站点:
-            <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
-              @change="linkDevice()" :disabled="store.state.authorities.indexOf('查询') == -1">
-              <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"
-              :disabled="store.state.authorities.indexOf('查询') == -1">
-              <el-option v-for="device in deviceList" :key="device" :label="device.deviceName"
-                :value="device.deviceCode"></el-option>
-            </el-select>
-          </div>
-          <el-button type="primary" class="search-button" @click="realScoreOne()"
-            :disabled="store.state.authorities.indexOf('查询') == -1">
-            搜索
-          </el-button>
-        </div>
-      </div>
-      <div class="right descIcon" @click="descripDialog()">
-        <img src="@/assets/images/descIcon.png" alt="" />
-        指标说明
-      </div>
-    </div>
-    <!-- 筛选end -->
-
-    <el-row :gutter="20" class="mt-20">
-      <!-- 三项不平衡度 -->
-      <el-col :md="24" :lg="8">
-        <div class="grid-content bg-purple loopUnbanlancePanel">
-          <div class="blanceChartTit">
-            <span>三项不平衡度</span>
-          </div>
-          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6">
-            <el-col :span="12" class="loopUnbanlanceCard">
-              <div class="grid-content" style="text-align: center">
-                <loop-radarChart :getData="getData" v-loading="loading"></loop-radarChart>
-              </div>
-            </el-col>
-            <el-col :span="12" class="loopUnbanlanceCard">
-              <div style="
-                  width: 90%;
-                  background: #1187ff;
-                  margin: 0px auto;
-                  text-align: center;
-                  color: #fff;
-                  padding: 10px 0px;
-                ">
-                <div class="mb-10">电压不平衡度</div>
-                <div>{{ getData.vtBalun ? getData.vtBalun * 100 : 0 }}%</div>
-              </div>
-              <ul>
-                <li>
-                  <div>A相电压</div>
-                  <div>
-                    <div class="mb-5">
-                      幅值:{{ getData.ua ? getData.ua + ' V' : 0 }}
-                    </div>
-                    <div>相角:-</div>
-                  </div>
-                </li>
-                <li>
-                  <div>B相电压</div>
-                  <div>
-                    <div class="mb-5">
-                      幅值:{{ getData.ub ? getData.ub + ' V' : 0 }}
-                    </div>
-                    <div>相角:-</div>
-                  </div>
-                </li>
-                <li>
-                  <div>C相电压</div>
-                  <div>
-                    <div class="mb-5">
-                      幅值:{{ getData.uc ? getData.uc + ' V' : 0 }}
-                    </div>
-                    <div>相角:-</div>
-                  </div>
-                </li>
-              </ul>
-            </el-col>
-          </el-row>
-
-          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6">
-            <el-col :span="12" class="loopUnbanlanceCard">
-              <div class="grid-content" style="text-align: center">
-                <loop-radarChart2 :getData="getData" v-loading="loading"></loop-radarChart2>
-              </div>
-            </el-col>
-            <el-col :span="12" class="loopUnbanlanceCard">
-              <div style="
-                  width: 90%;
-                  background: #1187ff;
-                  margin: 0px auto;
-                  text-align: center;
-                  color: #fff;
-                  padding: 10px 0px;
-                ">
-                <div class="mb-10">电流不平衡度</div>
-                <div>{{ getData.elBalun ? getData.elBalun * 100 : 0 }}%</div>
-              </div>
-              <ul>
-                <li>
-                  <div>A相电流</div>
-                  <div>
-                    <div class="mb-5">
-                      幅值:{{ getData.ua ? getData.ia + ' A' : 0 }}
-                    </div>
-                    <div>相角:-</div>
-                  </div>
-                </li>
-                <li>
-                  <div>B相电流</div>
-                  <div>
-                    <div class="mb-5">
-                      幅值:{{ getData.ua ? getData.ib + ' A' : 0 }}
-                    </div>
-                    <div>相角:-</div>
-                  </div>
-                </li>
-                <li>
-                  <div>C相电流</div>
-                  <div>
-                    <div class="mb-5">
-                      幅值:{{ getData.ua ? getData.ic + ' A' : 0 }}
-                    </div>
-                    <div>相角:-</div>
-                  </div>
-                </li>
-              </ul>
-            </el-col>
-          </el-row>
-        </div>
-      </el-col>
-      <!-- 三项不平衡度 end -->
-
-      <!-- 谐波 -->
-      <el-col :md="24" :lg="16">
-        <harmonic-panel v-loading="loading"></harmonic-panel>
-      </el-col>
-      <!-- 谐波 end -->
-    </el-row>
-
-    <el-row :gutter="20" class="mt-20">
-      <!-- 电压start -->
-      <el-col :md="24" :lg="8" class="mb-20">
-        <voltage-panel :getData="getData" v-loading="loading"></voltage-panel>
-      </el-col>
-      <!-- 电压end -->
-
-      <!-- 频率 start-->
-      <el-col :md="24" :lg="8" class="mb-20">
-        <frequency-panel :getData="getData" v-loading="loading"></frequency-panel>
-      </el-col>
-      <!-- 频率 end -->
-
-      <!-- 有功功率 -->
-      <el-col :md="24" :lg="8">
-        <power-panel :getData="getData" v-loading="loading"></power-panel>
-      </el-col>
-      <!-- 有功功率 end -->
-    </el-row>
-
-    <!--指标说明弹框组件开始-----------------------start-->
-    <descrip-dialog :dialogTitle="dialogTitle" @closeDialog="closeDialog" :flag="showDialog" :siteId="siteId"
-      class="descripDialog"></descrip-dialog>
-    <!--指标说明弹框组件结束-----------------------end-->
-  </div>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref } from 'vue'
-import loopRadarChart from './loopMonitorComponent/loopRadarChart'
-import loopRadarChart2 from './loopMonitorComponent/loopRadarChart2'
-import harmonicPanel from './loopMonitorComponent/harmonicPanel'
-import voltagePanel from './loopMonitorComponent/voltagePanel'
-import frequencyPanel from './loopMonitorComponent/frequencyPanel'
-import powerPanel from './loopMonitorComponent/powerPanel'
-import descripDialog from './loopMonitorComponent/descripDialog'
-
-import * as api from '@/api/powerQuality/loopMonitor.js'
-import { ElMessage } from 'element-plus'
-import { ElNotification } from 'element-plus'
-
-
-export default defineComponent({
-  name: 'LoopMonitor',
-  components: {
-    loopRadarChart,
-    loopRadarChart2,
-    harmonicPanel,
-    voltagePanel,
-    frequencyPanel,
-    powerPanel,
-    descripDialog,
-  },
-  props: {
-    activeName: String,
-  },
-  setup(props) {
-    const store = useStore()
-    const loading = ref(false)
-    const getData = ref({})
-    const deviceList = ref([])
-    const deviceCode = ref('')
-    const showDialog = ref(false)
-    const dialogTitle = ref('')
-    const siteId = ref(0)
-
-    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 realScoreOne() {
-      if (!deviceCode.value) {
-
-        ElNotification({
-          title: '提示',
-          message: '请选择左侧设备信息',
-          type: 'warning',
-        })
-        return
-      }
-      loading.value = true
-      api.realScoreOne({ deviceCode: deviceCode.value }).then((requset) => {
-        loading.value = false
-        if (requset.status === 'SUCCESS') {
-          getData.value = requset.data
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-      // nowTime.value = parseTime(new Date())
-    }
-
-    // 查看指标说明
-    const descripDialog = () => {
-      siteId.value = store.state.siteId
-      dialogTitle.value = '指标说明'
-      showDialog.value = true
-    }
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
-    }
-
-
-    onMounted(() => {
-      deviceSelect()
-
-      if (props.activeName == 'second') {
-        setTimeout(function () {
-          realScoreOne()
-
-        }, 1000)
-      }
-
-    })
-    return {
-      store,
-      getData,
-      deviceList,
-      deviceCode,
-      linkDevice,
-      deviceSelect,
-      realScoreOne,
-      descripDialog,
-      showDialog,
-      dialogTitle,
-      closeDialog,
-      siteId,
-      loading
-    }
-  },
-})
-</script>
- 
-<style lang="scss" scoped>
-.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;
-}
-
-ul li {
-  padding: 0;
-  margin: 0;
-  list-style: none
-}
-</style>

src/views/powerQuality/realTimeMonitoring/loopMonitor/component/frequencyPanel.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="grid-content bg-purple frequencyPanel">
+    <div class="blanceChartTit">
+      <span>频率</span>
+    </div>
+    <div style="padding: 30px">
+      <div class="frequencyTit">当前频率 {{ props.getData.f ? props.getData.f : 50.03 }}hZ</div>
+      <div class="frequencyTit2">
+        频率偏差
+        <span> {{ props.getData.fdeviation ? props.getData.fdeviation : 0.06 }}%</span>
+      </div>
+      <el-row class="mt-40 frequencyBox">
+        <el-col :span="2">
+          <div class="grid-content bg-purple"></div>
+        </el-col>
+        <el-col :span="5">
+          <div class="grid-content bg-purple-light"></div>
+        </el-col>
+        <el-col class="rightSplitRed" :span="5">
+          <div class="grid-content bg-purple">
+            <el-tooltip class="item" effect="dark" content="50.02 Hz" placement="right">
+              <div class="rightSplitRedInner"></div>
+            </el-tooltip>
+          </div>
+          <i class="el-icon-caret-top"></i>
+          <div class="greenShadow"></div>
+        </el-col>
+        <el-col :span="5">
+          <div class="grid-content bg-purple-light"></div>
+        </el-col>
+        <el-col :span="5">
+          <div class="grid-content bg-purple-light"></div>
+        </el-col>
+        <el-col :span="2">
+          <div class="grid-content bg-purple"></div>
+        </el-col>
+      </el-row>
+      <el-row class="mt-20" style="text-align: right">
+        <el-col :span="2">49</el-col>
+        <el-col :span="5">49.5</el-col>
+        <el-col :span="5">50</el-col>
+        <el-col :span="5">50.5</el-col>
+        <el-col :span="5">51</el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  getData: Object,
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+</script>
+<style scoped lang="scss">
+.el-row {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.el-col {
+  border-radius: 4px;
+}
+</style>

src/views/powerQuality/realTimeMonitoring/loopMonitor/component/harmonicPanel.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="grid-content bg-purple loopHarmonicPanel">
+    <div class="blanceChartTit">
+      <span>谐波</span>
+    </div>
+
+    <div style="text-align: center; margin-top: 20px">
+      <el-button class="search-button timeTab" @click="num = 0" :type="num == 0 ? 'primary' : ''">含量</el-button>
+      <el-button class="search-button timeTab" @click="num = 1" :type="num == 1 ? 'primary' : ''"
+        style="margin-left: 0 !important; margin-right: 20px">有效值</el-button>
+    </div>
+    <div class="harmonicCard" style="border-bottom: 1px solid #d3dce6">
+      <div style="text-align: center; margin-top:20px">电压谐波 / %</div>
+      <loopLine-Chart :num="num" :unit="' V'"></loopLine-Chart>
+    </div>
+    <div class="harmonicCard">
+      <div style="text-align: center; margin-top:20px">电流谐波 / %</div>
+      <loopLine-Chart :num="num" :unit="' A'"></loopLine-Chart>
+    </div>
+  </div>
+</template>
+<script  setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+import loopLineChart from "./loopLineChart";
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const num = ref(0)
+</script>
+<style scoped lang="scss"></style>

src/views/powerQuality/realTimeMonitoring/loopMonitor/component/powerPanel.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="grid-content bg-purple powerPanel">
+    <div class="blanceChartTit">
+      <span>有功功率和无功功率</span>
+    </div>
+    <div style="padding: 70px 20px">
+      <div style="display: flex">
+        <div class="uList">
+          <p>有功功率</p>
+          <p>无功功率</p>
+        </div>
+        <el-table :data="tableData" :show-header="false" border style="width: 80%">
+          <el-table-column prop="name" label="进度条">
+            <template #default="scope">
+              <div class="demo-progress">
+                <el-tooltip class="item" effect="dark" :content="scope.row.name + ' ' + scope.row.date" placement="top">
+                  <el-progress :text-inside="true" :stroke-width="14" :percentage="scope.row.pointNum"
+                    :status="scope.row.status" />
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="date" label="日期" width="100"></el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  getData: Object,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+
+const tableData = ref([
+  {
+    date: (props.getData.p ? props.getData.p : 0) + '(kV)',
+    name: '有功功率',
+    pointNum: (props.getData.percentage ? props.getData.percentage : 0) * 100,
+    status: 'warning',
+  },
+  {
+    date: (props.getData.q ? props.getData.q : 0) + '(kV)',
+    name: '无功功率',
+    pointNum: (props.getData.qercentage ? props.getData.qercentage : 0) * 100,
+    status: 'exception',
+  },
+])
+const getData = async () => {
+  tableData.value = [
+    {
+      date: (props.getData.p ? props.getData.p : 0) + '(kV)',
+      name: '有功功率',
+      pointNum: (props.getData.ppercentage ? props.getData.ppercentage : 0) * 100,
+      status: 'warning',
+    },
+    {
+      date: (props.getData.q ? props.getData.q : 0) + '(kV)',
+      name: '无功功率',
+      pointNum: (props.getData.qpercentage ? props.getData.qpercentage : 0) * 100,
+      status: 'exception',
+    },
+  ]
+}
+
+//监听变化
+watch(
+  () => props.getData,
+  (newVal, oldVal, clear) => {
+    // 执行异步任务，并得到关闭异步任务的 id
+    getData()
+  },
+  { lazy: true }
+)
+</script>
+<style scoped lang="scss"></style>

src/views/powerQuality/realTimeMonitoring/loopMonitor/component/voltagePanel.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="grid-content bg-purple voltagePanel">
+    <div class="blanceChartTit">
+      <span>电压</span>
+      <span class="subs">额定电压：10kV</span>
+    </div>
+    <div>
+      <div class="shangXian" style="">
+        <div>下限5.37kV</div>
+        <div>上限6.18kV</div>
+      </div>
+      <div style="padding: 20px; display: flex">
+        <div class="uList">
+          <p>Ua</p>
+          <p>Ub</p>
+          <p>Uc</p>
+        </div>
+        <el-table :data="tableData" :show-header="false" border style="width: 100%">
+          <el-table-column prop="name" label="进度条">
+            <template #default="scope">
+              <div class="demo-progress" style="width: 100%">
+                <el-tooltip class="item" effect="dark" :content="scope.row.name + ' ' + scope.row.date" placement="top">
+                  <el-progress style="width: 100%" :text-inside="true" :stroke-width="14" :percentage="scope.row.pointNum"
+                    :status="scope.row.status" />
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="date" label="日期" width="100px"></el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  getData: Object,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const tableData = ref([
+  {
+    date: '0(kV)',
+    name: 'Ua',
+    pointNum: 0,
+    status: 'warning',
+  },
+  {
+    date: '0(kV)',
+    name: 'Ub',
+    pointNum: 0,
+    status: 'exception',
+  },
+  {
+    date: '0(kV)',
+    name: 'Uc',
+    pointNum: 0,
+  },
+])
+
+const getData = async () => {
+  tableData.value = [
+    {
+      date: (props.getData.ua ? props.getData.ua : 0) + 'kV',
+      name: 'Ua',
+      pointNum: props.getData.uaPercentage * 100,
+      status: 'warning',
+    },
+    {
+      date: (props.getData.ub ? props.getData.ub : 0) + 'kV',
+      name: 'Ub',
+      pointNum: props.getData.ubPercentage * 100,
+      status: 'exception',
+    },
+    {
+      date: (props.getData.uc ? props.getData.uc : 0) + 'kV',
+      name: 'Uc',
+      pointNum: props.getData.ucPercentage * 100,
+    },
+  ]
+
+}
+
+//监听变化
+watch(
+  () => props.getData,
+  (newVal, oldVal, clear) => {
+    getData()
+  },
+  { lazy: true }
+)
+
+</script>
+<style scoped lang="scss"></style>

src/views/powerQuality/realTimeMonitoring/loopMonitor/index.vue

@@ -0,0 +1,256 @@
+<template>
+    <!-- 筛选start -->
+    <div class="filter-container" style="justify-content: left; white-space: nowrap;">
+        <div class="filter-item">
+            <div class="title">选择站点：</div>
+            <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
+                @change="linkDevice()" :disabled="store.state.authorities.indexOf('查询') == -1">
+                <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">
+            <div class="title">选择设备：</div>
+            <el-select v-model="deviceCode" placeholder="请选择" style="width: 150px"
+                :disabled="store.state.authorities.indexOf('查询') == -1">
+                <el-option v-for="device in deviceList" :key="device" :label="device.deviceName"
+                    :value="device.deviceCode"></el-option>
+            </el-select>
+        </div>
+        <el-button type="primary" class="search-button" @click="realScoreOne()"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
+            搜索
+        </el-button>
+
+        <div class="filter-item cursor-pointer" @click="openDescripDialog()" style="margin:auto 0 auto auto;">
+            <img class="image" src="@/assets/images/descIcon.png" alt="" />
+            <div class="title">指标说明</div>
+        </div>
+    </div>
+    <!-- 筛选end -->
+
+    <el-row :gutter="20" class="mt-20">
+        <!-- 三项不平衡度 -->
+        <el-col :md="24" :lg="8">
+            <div class="grid-content bg-purple loopUnbanlancePanel">
+                <div class="blanceChartTit"> 三项不平衡度 </div>
+                <el-row style="padding: 15px; border-bottom: 1px solid #d3dce6">
+                    <el-col :span="12">
+                        <loop-radarChart :getData="getData" v-loading="loading"></loop-radarChart>
+                    </el-col>
+                    <el-col :span="12" class="loopUnbanlanceCard">
+                        <div class="header">
+                            <div class="mb-10">电压不平衡度</div>
+                            <div>{{ getData.vtBalun ? getData.vtBalun * 100 : 0 }}%</div>
+                        </div>
+
+                        <ul>
+                            <li>
+                                <div>A相电压</div>
+                                <div>
+                                    <div class="mb-5">
+                                        幅值:{{ getData.ua ? getData.ua + ' V' : 0 }}
+                                    </div>
+                                    <div>相角:-</div>
+                                </div>
+                            </li>
+                            <li>
+                                <div>B相电压</div>
+                                <div>
+                                    <div class="mb-5">
+                                        幅值:{{ getData.ub ? getData.ub + ' V' : 0 }}
+                                    </div>
+                                    <div>相角:-</div>
+                                </div>
+                            </li>
+                            <li>
+                                <div>C相电压</div>
+                                <div>
+                                    <div class="mb-5">
+                                        幅值:{{ getData.uc ? getData.uc + ' V' : 0 }}
+                                    </div>
+                                    <div>相角:-</div>
+                                </div>
+                            </li>
+                        </ul>
+                    </el-col>
+                </el-row>
+
+                <el-row :gutter="20" style="padding: 15px; border-bottom: 1px solid #d3dce6">
+                    <el-col :span="12">
+                        <loop-radarChart2 :getData="getData" v-loading="loading"></loop-radarChart2>
+                    </el-col>
+                    <el-col :span="12" class="loopUnbanlanceCard">
+                        <div class="header">
+                            <div class="mb-10">电流不平衡度</div>
+                            <div>{{ getData.elBalun ? getData.elBalun * 100 : 0 }}%</div>
+                        </div>
+                        <ul>
+                            <li>
+                                <div>A相电流</div>
+                                <div>
+                                    <div class="mb-5">
+                                        幅值:{{ getData.ua ? getData.ia + ' A' : 0 }}
+                                    </div>
+                                    <div>相角:-</div>
+                                </div>
+                            </li>
+                            <li>
+                                <div>B相电流</div>
+                                <div>
+                                    <div class="mb-5">
+                                        幅值:{{ getData.ua ? getData.ib + ' A' : 0 }}
+                                    </div>
+                                    <div>相角:-</div>
+                                </div>
+                            </li>
+                            <li>
+                                <div>C相电流</div>
+                                <div>
+                                    <div class="mb-5">
+                                        幅值:{{ getData.ua ? getData.ic + ' A' : 0 }}
+                                    </div>
+                                    <div>相角:-</div>
+                                </div>
+                            </li>
+                        </ul>
+                    </el-col>
+                </el-row>
+            </div>
+        </el-col>
+        <!-- 三项不平衡度 end -->
+
+        <!-- 谐波 -->
+        <el-col :md="24" :lg="16">
+            <harmonic-panel v-loading="loading"></harmonic-panel>
+        </el-col>
+        <!-- 谐波 end -->
+    </el-row>
+
+    <el-row :gutter="20" class="mt-20">
+        <!-- 电压start -->
+        <el-col :md="24" :lg="8" class="mb-20">
+            <voltage-panel :getData="getData" v-loading="loading"></voltage-panel>
+        </el-col>
+        <!-- 电压end -->
+
+        <!-- 频率 start-->
+        <el-col :md="24" :lg="8" class="mb-20">
+            <frequency-panel :getData="getData" v-loading="loading"></frequency-panel>
+        </el-col>
+        <!-- 频率 end -->
+
+        <!-- 有功功率 -->
+        <el-col :md="24" :lg="8">
+            <power-panel :getData="getData" v-loading="loading"></power-panel>
+        </el-col>
+        <!-- 有功功率 end -->
+    </el-row>
+
+    <!--指标说明弹框组件开始-----------------------start-->
+    <descrip-dialog ref="descripDialogRef"></descrip-dialog>
+    <!--指标说明弹框组件结束-----------------------end-->
+</template>
+  
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/powerQuality/loopMonitor.js'
+/*----------------------------------组件引入-----------------------------------*/
+import loopRadarChart from './component/loopRadarChart'
+import loopRadarChart2 from './component/loopRadarChart2'
+import harmonicPanel from './component/harmonicPanel'
+import voltagePanel from './component/voltagePanel'
+import frequencyPanel from './component/frequencyPanel'
+import powerPanel from './component/powerPanel'
+import descripDialog from '../component/descripDialog.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+    activeName: String,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const loading = ref(false)
+const getData = ref({})
+const deviceList = ref([])
+const deviceCode = ref('')
+const siteId = ref(0)
+
+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 realScoreOne() {
+    if (!deviceCode.value) {
+
+        ElNotification({
+            title: '提示',
+            message: '请选择左侧设备信息',
+            type: 'warning',
+        })
+        return
+    }
+    loading.value = true
+    api.realScoreOne({ deviceCode: deviceCode.value }).then((requset) => {
+        loading.value = false
+        if (requset.status === 'SUCCESS') {
+            getData.value = requset.data
+        } else {
+            ElMessage.error(requset.msg)
+        }
+    })
+    // nowTime.value = parseTime(new Date())
+}
+
+// 查看指标说明
+function openDescripDialog() {
+    proxy.$refs["descripDialogRef"].openDialog({
+        dialogTitle: "指标说明",
+    })
+}
+
+
+onMounted(() => {
+    deviceSelect()
+
+    if (props.activeName == 'second') {
+        setTimeout(function () {
+            realScoreOne()
+        }, 1000)
+    }
+})
+</script>
+   
+<style lang="scss" scoped>
+.el-row {
+    margin-bottom: 20px;
+
+    .el-col {
+        border-radius: 4px;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+</style>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/descripDialog.vue

@@ -1,186 +0,0 @@
-<template>
-  <div class="descripDialog">
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="600px"
-      @close="closeDialog(0)"
-      @open="open"
-    >
-      <div style="width: 100%; ">
-        <el-tabs v-model="activeName" @tab-click="handleClick">
-           <el-tab-pane label="配置内容" name="first">
-            <div class="desBlock">
-              <h3>【设备级配置】 <a @click="goSiteWatchDog">立即前往</a></h3>
-              <p>请在 站点管理->监控设备中配置 或 联系运维管理员：</p>
-              <span>额定电压、额定电流、电流负载率门限、电能质量分析</span>
-              <span>如果设备没有配置额定电压，电压/谐波畸变率分析项可能没有数据</span>
-              <span>如果设备不勾选电能质量分析，该设备不参与电能质量分析</span>
-            </div>
-            <div class="desBlock">
-              <h3>【变量级配置】<a @click="goSiteVariableList">立即前往</a></h3>
-              <p>请在 站点管理->变量列表中配置 或 联系运维管理员：配置下列变量，且需要指定变量的变量属性</p>
-              <span>A/B/C相电压</span>
-              <span>A/B/C相电流</span>
-              <span>频率</span>
-              <span>有功/无功功率</span>
-              <span>有功/无功电度</span>
-              <span>电压三相不平衡度</span>
-              <span>电流三相不平衡度</span>
-              <span>A/B/C相电压相角</span>
-              <span>A/B/C相电流相角</span>
-              <span>A/B/C相电压总谐波畸变率</span>
-              <span>A/B/C相电流总谐波畸变率</span>
-              <span>2~31次A/B/C相电压谐波含量或有效值 (可二选一)</span>
-              <span>2~31次A/B/C相电流谐波含量或有效值 (可二选一)</span>
-              <span>如果变量没有指定变量属性 或 变量没有数据，分析项可能没有数据</span>
-            </div>
-          
-          </el-tab-pane>
-       
-         
-         
-        </el-tabs>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect } from 'vue'
-import {useRouter} from 'vue-router'
-// import * as api from '@/api/siteManage/watchDog.js'
-// import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DescripDialog',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-    siteId:Number
-  },
-  setup(props, context) {
-    context
-    const store = useStore()
-    let router = useRouter();
-    const dialogVisible = ref(false)
-
-    const activeName=ref('first')
-
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      // console.log('siteList.value')
-    
-    }
-
-   
-
-    // 关闭弹框
-    const closeDialog = () => {
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
-
-
-    function handleClick(tab, event) {
-      console.log(tab, event)
-    }
-    function goSiteWatchDog(){
-      store.state.goUrl=2
-      router.push({
-    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
-        path:'/siteManage',
-        query:{
-        activeName:'second',
-        siteId:store.state.siteId
-        }
-      })
-    }
-    function goSiteVariableList(){
-      store.state.goUrl=3
-      router.push({
-    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
-        path:'/siteManage',
-        query:{
-        activeName:'third',
-        siteId:store.state.siteId
-        }
-      })
-
-    }
-   
-
-    return {
-      store,
-      closeDialog,
-      dialogVisible,
-    
-      open,
-
-      handleClick,
-      activeName,
-      goSiteWatchDog,
-      goSiteVariableList
-    }
-  },
-})
-</script>
- 
-<style scoped lang="scss">
-.el-input,
-.el-select {
-  width: 240px;
-}
-
-// label样式
-.el-form-item__label {
-  width: 150px;
-}
-.el-form-item__content {
-  margin-left: 150px;
-}
-.desBlock {
-  padding:15px 0;
-  border-bottom:1px solid rgba(0,0,0,0.06);
-  h3{
-    margin:0 0 10px  0;
-    position:relative;
-    a{
-      position:absolute;
-      right:0
-    }
-    span{
-      position:absolute;
-      right:0;
-      font-size:14px;
-      color:#409eff;
-      cursor:pointer
-    }
-  }
-  p{
-    // margin-bottom:0px;
-  }
-  span{
-    display:block;
-    color:#7e93a6
-  }
-}
-</style>
-<style>
-.descripDialog .el-dialog__body{
-  padding-top:0
-}
-.descripDialog .el-overlay-dialog {
-  /* left: auto !important; */
-  /* bottom: auto !important; */
-}
-</style>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/frequencyPanel.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="">
-    <div class="grid-content bg-purple frequencyPanel">
-      <div class="blanceChartTit">
-        <span>频率</span>
-      </div>
-      <div style="padding: 30px">
-        <div class="frequencyTit">当前频率  {{watchData.f?watchData.f:50.03}}hZ</div>
-        <div class="frequencyTit2">
-          频率偏差
-          <span> {{watchData.fdeviation?watchData.fdeviation:0.06}}%</span>
-        </div>
-        <el-row class="mt-40 frequencyBox">
-          <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
-          <el-col :span="5">
-            <div class="grid-content bg-purple-light"></div>
-          </el-col>
-          <el-col class="rightSplitRed" :span="5">
-            <div class="grid-content bg-purple">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="50.02 Hz"
-                placement="right"
-              >
-                <div class="rightSplitRedInner"></div>
-              </el-tooltip>
-            </div>
-            <i class="el-icon-caret-top"></i>
-            <div class="greenShadow"></div>
-          </el-col>
-          <el-col :span="5">
-            <div class="grid-content bg-purple-light"></div>
-          </el-col>
-          <el-col :span="5">
-            <div class="grid-content bg-purple-light"></div>
-          </el-col>
-          <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
-        </el-row>
-        <el-row class="mt-20" style="text-align: right">
-          <el-col :span="2">49</el-col>
-          <el-col :span="5">49.5</el-col>
-          <el-col :span="5">50</el-col>
-          <el-col :span="5">50.5</el-col>
-          <el-col :span="5">51</el-col>
-        </el-row>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { ref, watch } from 'vue'
-export default {
-  name: 'FrenquencyPanel',
-  props: {
-    getData: Object,
-  },
-  setup(props) {
-    props
-    const watchData = ref({})
-    const getData = async () => {
-      watchData.value = props.getData
-    }
-
-    const writeValue = (val) => {
-      val
-      getData()
-    }
-
-    //监听变化
-    watch(
-      () => props.getData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        newVal
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
-
-    return {
-      watchData,
-    }
-  },
-}
-</script>
-<style scoped lang="scss">
-.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>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/harmonicPanel.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="">
-    <div class="grid-content bg-purple loopHarmonicPanel">
-      <div class="blanceChartTit">
-        <span>谐波</span>
-      </div>
-
-      <div style="text-align: center; margin-top: 20px">
-        <el-button
-          class="search-button timeTab"
-          @click="num = 0"
-          :type="num == 0 ? 'primary' : ''"
-          >含量</el-button
-        >
-        <el-button
-          class="search-button timeTab"
-          @click="num = 1"
-          :type="num == 1 ? 'primary' : ''"
-          style="margin-left: 0 !important; margin-right: 20px"
-          >有效值</el-button
-        >
-      </div>
-      <div class="harmonicCard" style="border-bottom: 1px solid #d3dce6">
-        <div style="text-align: center; margin-top:20px">电压谐波 / %</div>
-        <loopLine-Chart :num="num" :unit="' V'"></loopLine-Chart>
-      </div>
-      <div class="harmonicCard">
-        <div style="text-align: center; margin-top:20px">电流谐波 / %</div>
-        <loopLine-Chart :num="num" :unit="' A'"></loopLine-Chart>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import loopLineChart from "./loopLineChart";
-export default {
-  components: { loopLineChart },
-  name: "HarmonicPanel",
-  data() {
-    return {
-      num: 0,
-      tableData: [
-        {
-          date: "10.31(kV)",
-          name: "Tom",
-          pointNum: 60,
-          status: "warning",
-        },
-        {
-          date: "0(kV)",
-          name: "Tom2",
-          pointNum: 0,
-          status: "exception",
-        },
-      ],
-    };
-  },
-};
-</script>
-<style scoped lang="scss">
-.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>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/powerPanel.vue

@@ -1,141 +0,0 @@
-<template>
-  <div class="">
-    <div class="grid-content bg-purple powerPanel">
-      <div class="blanceChartTit">
-        <span>有功功率和无功功率</span>
-      </div>
-      <div style="padding: 70px 20px">
-        <div style="display: flex">
-          <div class="uList">
-            <p>有功功率</p>
-            <p>无功功率</p>
-          </div>
-          <el-table
-            :data="tableData"
-            :show-header="false"
-            border
-            style="width: 80%"
-          >
-            <el-table-column prop="name" label="进度条">
-              <template #default="scope">
-                <div class="demo-progress">
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    :content="scope.row.name + ' ' + scope.row.date"
-                    placement="top"
-                  >
-                    <el-progress
-                      :text-inside="true"
-                      :stroke-width="14"
-                      :percentage="scope.row.pointNum"
-                      :status="scope.row.status"
-                    />
-                  </el-tooltip>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="date"
-              label="日期"
-              width="100"
-            ></el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { ref, watch } from 'vue'
-export default {
-  name: 'PowerPanel',
-  props: {
-    getData: Object,
-  },
-
-  setup(props) {
-    props
-    const tableData = ref([
-      {
-        date: (props.getData.p? props.getData.p:0) + '(kV)',
-        name: '有功功率',
-        pointNum: (props.getData.percentage?props.getData.percentage:0) * 100,
-        status: 'warning',
-      },
-      {
-        date: (props.getData.q?props.getData.q:0) + '(kV)',
-        name: '无功功率',
-        pointNum: (props.getData.qercentage?props.getData.qercentage:0) * 100,
-        status: 'exception',
-      },
-    ])
-    const getData = async () => {
-      tableData.value = [
-       {
-        date: (props.getData.p? props.getData.p:0) + '(kV)',
-        name: '有功功率',
-        pointNum: (props.getData.ppercentage?props.getData.ppercentage:0) * 100,
-        status: 'warning',
-      },
-      {
-        date: (props.getData.q?props.getData.q:0) + '(kV)',
-        name: '无功功率',
-        pointNum: (props.getData.qpercentage?props.getData.qpercentage:0) * 100,
-        status: 'exception',
-      },
-      ]
-    }
-
-    const writeValue = (val) => {
-      val
-      getData()
-    }
-
-    //监听变化
-    watch(
-      () => props.getData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        newVal
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
-
-    return {
-      tableData,
-    }
-  },
-}
-</script>
-<style scoped lang="scss">
-.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>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/voltagePanel.vue

@@ -1,160 +0,0 @@
-<template>
-  <div class="">
-    <div class="grid-content bg-purple voltagePanel">
-      <div class="blanceChartTit">
-        <span>电压</span>
-        <span class="subs">额定电压：10kV</span>
-      </div>
-      <div>
-        <div class="shangXian" style="">
-          <div>下限5.37kV</div>
-          <div>上限6.18kV</div>
-        </div>
-        <div style="padding: 20px; display: flex">
-          <div class="uList">
-            <p>Ua</p>
-            <p>Ub</p>
-            <p>Uc</p>
-          </div>
-          <el-table
-            :data="tableData"
-            :show-header="false"
-            border
-            style="width: 100%"
-          >
-            <el-table-column prop="name" label="进度条">
-              <template #default="scope">
-                <div class="demo-progress" style="width: 100%">
-                  <el-tooltip
-                    class="item"
-                    effect="dark"
-                    :content="scope.row.name + ' ' + scope.row.date"
-                    placement="top"
-                  >
-                    <el-progress
-                      style="width: 100%"
-                      :text-inside="true"
-                      :stroke-width="14"
-                      :percentage="scope.row.pointNum"
-                      :status="scope.row.status"
-                    />
-                  </el-tooltip>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="date"
-              label="日期"
-              width="100px"
-            ></el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import {  ref, watch } from 'vue'
-export default {
-  name: 'VoltagePanel',
-  props: {
-    getData: Object,
-  },
-  setup(props) {
-    props
-   const tableData = ref([
-      {
-        date: '0(kV)',
-        name: 'Ua',
-        pointNum: 0,
-        status: 'warning',
-      },
-      {
-        date: '0(kV)',
-        name: 'Ub',
-        pointNum: 0,
-        status: 'exception',
-      },
-      {
-        date: '0(kV)',
-        name: 'Uc',
-        pointNum: 0,
-      },
-    ])
-    const getData = async () => {
-      tableData.value=[
-      {
-        date: (props.getData.ua?props.getData.ua:0)+'kV',
-        name: 'Ua',
-        pointNum:props.getData.uaPercentage*100,
-        status: 'warning',
-      },
-      {
-        date: (props.getData.ub?props.getData.ub:0)+'kV',
-        name: 'Ub',
-        pointNum: props.getData.ubPercentage*100,
-        status: 'exception',
-      },
-      {
-        date: (props.getData.uc?props.getData.uc:0)+'kV',
-        name: 'Uc',
-        pointNum:  props.getData.ucPercentage*100,
-      },
-    ]
-     
-    }
-
-    const writeValue = (val) => {
-      val
-      getData()
-  
-    }
-
-    //监听变化
-    watch(
-      () => props.getData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        newVal
-    
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
-
-    return {
-      tableData,
-    }
-  },
-}
-</script>
-<style scoped lang="scss">
-.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>

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -1,627 +0,0 @@
-<template>
-  <div>
-    <!-- 筛选start -->
-    <div class="filter-container">
-      <div class="left">
-        <div>
-           <div class="filter-item">
-            选择站点:
-            <el-select
-              v-model="store.state.siteId"
-              placeholder="请选择"
-              style="width: 220px"
-              clearable
-              filterable
-               @change="linkDevice()"
-               :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <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"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option
-                v-for="device in deviceList"
-                :key="device"
-                :label="device.deviceName"
-                :value="device.deviceCode"
-              ></el-option>
-            </el-select>
-          </div>
-          数据刷新时间：{{ nowTime }}
-
-          <el-button
-            type="primary"
-            class="search-button"
-            style="margin-left: 30px;cursor:pointer!important"
-            @click="realScore()"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
-            刷新
-          </el-button>
-        </div>
-      </div>
-      <div class="right descIcon " @click="descripDialog()">
-        <img src="@/assets/images/descIcon.png" alt="" />
-        指标说明
-      </div>
-    </div>
-    <!-- 筛选end -->
-
-    <el-row :gutter="20" class="mt-20">
-      <el-col :md="24" :lg="7">
-        <!-- 评分 -->
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>评分</span>
-          </div>
-          <radar-chart :getTableData="getData[0]" v-loading="loading"></radar-chart>
-          <div class="totalScore">
-            总评分：{{ getData[0].score }}
-            <el-button :type=" getData[0].score > 80
-                  ? 'success'
-                  : getData[0].score >= 60
-                  ? 'warning'
-                  : 'danger'">
-              {{
-                getData[0].score > 80
-                  ? '优秀'
-                  : getData[0].score >= 60
-                  ? '合格'
-                  : '不合格'
-              }}
-            </el-button>
-          </div>
-        </div>
-        <!-- 评分 end -->
-
-        <br />
-
-        <!-- 回路统计 -->
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>回路统计</span>
-          </div>
-          <div>
-            <pie-chart :getTableData="getData[0]" v-loading="loading"></pie-chart>
-          </div>
-        </div>
-        <!-- 回路统计 end -->
-      </el-col>
-
-      <el-col :md="24" :lg="17">
-        <!-- 表格start -->
-        <el-table
-          :data="getData"
-          style="width: 100%"
-          :header-cell-style="headCellStyle"
-           :cell-style="cellStyle"
-           v-loading="loading"
-        >
-          <el-table-column label="回路" width="" align="center">
-            <template #default="scope">
-              {{ scope.row.loop ? scope.row.loop : '-' }}
-            </template>
-          </el-table-column>
-
-          <el-table-column label="功率因数" width="" align="center">
-            <template #default="scope">
-              <div @click="oneClick('cos')">
-                <i
-                  class="smallSquare"
-                  :style="{ background: scope.row.cosQ ? 'green' : 'red' }"
-                ></i>
-                {{ scope.row.cos }}
-              </div>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="不平衡度">
-            <el-table-column label="电流" width="" align="center">
-              <template #default="scope">
-                <div @click="oneClick('elBalun')">
-                  <i
-                    class="smallSquare"
-                    :style="{
-                      background: scope.row.elBalunQ ? 'green' : 'red',
-                    }"
-                  ></i>
-                  {{ scope.row.elBalun }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column label="电压" align="center">
-              <template #default="scope">
-                <div @click="oneClick('vtBalun')">
-                  <i
-                    class="smallSquare"
-                    :style="{
-                      background: scope.row.vtBalunQ ? 'green' : 'red',
-                    }"
-                  ></i>
-                  {{ scope.row.vtBalun }}
-                </div>
-              </template>
-            </el-table-column>
-          </el-table-column>
-
-          <el-table-column label="电压">
-            <el-table-column prop="name" label="A相" width="" align="center">
-              <template #default="scope">
-                <div @click="oneClick('ua')">
-                  <i
-                    class="smallSquare"
-                    :style="{ background: scope.row.uaQ ? 'green' : 'red' }"
-                  ></i>
-                  {{ scope.row.ua }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('ub')">
-                  <i
-                    class="smallSquare"
-                    :style="{ background: scope.row.ubQ ? 'green' : 'red' }"
-                  ></i>
-                  {{ scope.row.ub }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('uc')">
-                  <i
-                    class="smallSquare"
-                    :style="{ background: scope.row.ucQ ? 'green' : 'red' }"
-                  ></i>
-                  {{ scope.row.uc }}
-                </div>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column label="电流负载率">
-            <el-table-column prop="name" label="A相" width="" align="center">
-              <template #default="scope">
-                <div @click="oneClick('iaLoad')">
-                  <i
-                    class="smallSquare"
-                    :style="{ background: scope.row.iaLoadQ ? 'green' : 'red' }"
-                  ></i>
-                  {{ scope.row.iaLoad }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('ibLoad')">
-                  <i
-                    class="smallSquare"
-                    :style="{ background: scope.row.ibLoadQ ? 'green' : 'red' }"
-                  ></i>
-                  {{ scope.row.ibLoad }}
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('icLoad')">
-                  <i
-                    class="smallSquare"
-                    :style="{ background: scope.row.icLoadQ ? 'green' : 'red' }"
-                  ></i>
-                  {{ scope.row.icLoad }}
-                </div>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column label="评分" width="" align="center">
-            <template #default="scope">
-              <el-button size="mini" :type=" scope.row.score > 80
-                  ? 'success'
-                  : getData[0].score >= 60
-                  ? 'warning'
-                  : 'danger'" style="cursor:defalut">
-                {{ scope.row.score }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 表格end -->
-      </el-col>
-    </el-row>
-
-    <!--弹框组件开始-----------------------start-->
-    <dialog-chartOne
-      :dialogTitle="dialogTitle"
-      @closeDialog="closeDialog"
-      :flag="showDialog"
-      :echartsAllData="echartsAllData"
-      :echartsTitle="echartsTitle"
-    ></dialog-chartOne>
-    <!--弹框组件结束-----------------------end-->
-
-
-    <!--指标说明弹框组件开始-----------------------start-->
-    <descrip-dialog
-      :dialogTitle="dialogTitle"
-      @closeDialog="closeDialog"
-      :flag="showDialog2"
-      class="descripDialog"
-    ></descrip-dialog>
-    <!--指标说明弹框组件结束-----------------------end-->
-
-
-  </div>
-</template>
-
-<script>
-import radarChart from './realScoreComponent/radarChart.vue'
-import pieChart from './realScoreComponent/pieChart.vue'
-import dialogChartOne from './realScoreComponent/dialogChartOne'
-import descripDialog from './realScoreComponent/descripDialog'
-import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref,watch } from 'vue'
-import * as api from '@/api/powerQuality/realScore.js'
-import { ElMessage } from 'element-plus'
-import { parseTime } from '@/utils'
-import { ElNotification } from 'element-plus'
-
-export default defineComponent({
-  name: 'RealScore',
-  components: {
-    radarChart,
-    pieChart,
-    dialogChartOne,
-    descripDialog
-  },
-   props: {
-    activeName: String,
-  },
-  setup(props) {
-    const store = useStore()
-    const loading=ref(false)
-    const num = ref(1)
-    const nowTime = ref(parseTime(new Date()))
-    const value4 = ref('')
-    const getData = ref([
-      {
-        loop: '',
-        cos: '0%',
-        elBalun: '100%',
-        vtBalun: '0%',
-        name: '0%',
-        city: '0%',
-        score: '0',
-      },
-    ])
-    const deviceList = ref([])
-    const deviceCode = ref('')
-
-    const dialogTitle = ref('')
-    const showDialog = ref(false)
-    const showDialog2 = ref(false)
-
-    const echartsAllData = ref([])
-    const echartsTitle = ref('')
-
-    //自定义表头列样式
-    function headCellStyle({ row, column, rowIndex, columnIndex }) {
-      row, column
-      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
-        return `text-align:center`
-      } else {
-        return ''
-      }
-    }
-     //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex,columnIndex
-      // console.log(row, column, rowIndex)
-      if (rowIndex === 0&&columnIndex!=0) {
-        return `cursor:pointer`
-      }
-    }
-
-    function linkDevice(){
-      deviceSelect()
-    }
-
-    //设备下拉请求
-    async function deviceSelect() {
-     await api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          deviceList.value = requset.data
-          // deviceCode.value = requset.data[0].deviceCode
-          deviceCode.value = requset.data[0]?requset.data[0].deviceCode:''
-          // realScore()
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-
-    //主页面数据请求
-    function realScore() {
-
-      if(!deviceCode.value){
-        
-          ElNotification({
-          title: '提示',
-          message: '请选择左侧设备信息',
-          type: 'warning',
-        })
-        return
-      }
-       loading.value=true
-      api.realScore({ deviceCode: deviceCode.value }).then((requset) => {
-        loading.value=false
-        
-        if (requset.status === 'SUCCESS') {
-          getData.value[0] = requset.data
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-      nowTime.value = parseTime(new Date())
-    }
-
-    // 折线图详情总数据请求
-    function rtRealScore(params) {
-
-      var start = parseTime(new Date().setHours(0, 0, 0, 0))
-      var end=nowTime.value
-
-      // var start = '2021-12-01 00:00:00'
-      // var end = '2021-12-01 09:07:31'
-
-      store.state.chartType=params
-      // alert(store.state.chartType)
-      api
-        .rtRealScore({
-          deviceCode: 'DA00021026',
-          startTime: start,
-          endTime: end,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            echartsAllData.value = requset.data
-
-            // 处理数据
-            var arrOld = requset.data
-            let dataTime = arrOld.map((item) => {
-              return item.dataTime
-            })
-            //功率因数
-            let cos = arrOld.map((item) => {
-              return item.cos
-            })
-
-            //电压
-            let ua = arrOld.map((item) => {
-              return item.ua
-            })
-            let ub = arrOld.map((item) => {
-              return item.ub
-            })
-            let uc = arrOld.map((item) => {
-              return item.uc
-            })
-
-            //电流
-            let ia = arrOld.map((item) => {
-              return item.ia
-            })
-            let ib = arrOld.map((item) => {
-              return item.ib
-            })
-            let ic = arrOld.map((item) => {
-              return item.ic
-            })
-
-            // 电流不平衡度
-            let elBalun = arrOld.map((item) => {
-              return item.elBalun*100
-            })
-            // 电压不平衡度
-            let vtBalun = arrOld.map((item) => {
-              return item.vtBalun*100
-            })
-            //电流负载率
-            let iaLoad = arrOld.map((item) => {
-              return item.iaLoad
-            })
-            let ibLoad = arrOld.map((item) => {
-              return item.ibLoad
-            })
-            let icLoad = arrOld.map((item) => {
-              return item.icLoad
-            })
-
-            var echartsObj=[]
-            var echartsObj2=[]
-            var lineName
-            var lineName2
-
-            ia; ib; ic
-
-            switch (params) {
-              case 'cos':
-                echartsObj = [{ name: '功率因数 ( 实时数据 )', data: cos }]
-                lineName=''
-                break
-              case 'ua':
-                echartsObj = [{ name: 'A相电压 ( 实时数据 )', data: ua }]
-                lineName='kV'
-                break
-              case 'ub':
-                echartsObj = [{ name: 'B相电压 ( 实时数据 )', data: ub }]
-                lineName='kV'
-                break
-              case 'uc':
-                echartsObj = [{ name: 'c相电压 ( 实时数据 )', data: uc }]
-                lineName='kV'
-                break
-              case 'elBalun':
-                echartsObj = [{ name: '电流不平衡度 ( 实时数据 )', data: elBalun }]                
-                lineName='%'
-                echartsObj2 = [{ name: 'A相电流', data: ia },{ name: 'B相电流', data: ib },{ name: 'C相电流', data: ic }]
-                lineName2='A'
-                break
-              case 'vtBalun':
-                echartsObj = [{ name: '电压不平衡度 ( 实时数据 )', data: vtBalun }]
-                lineName='%'
-
-                echartsObj2 = [{ name: 'A相电压', data: ua },{ name: 'B相电压', data: ub },{ name: 'C相电压', data: uc }]
-                lineName2='V'
-                break
-              case 'iaLoad':
-                echartsObj = [{ name: 'A相电流负载率 ( 实时数据 )', data: iaLoad }]
-                lineName='%'
-                echartsObj2 = [{ name: 'A相电流', data: ia }]
-                lineName2='A'
-                break
-              case 'ibLoad':
-                echartsObj = [{ name: 'B相电流负载率 ( 实时数据 )', data: ibLoad }]
-                lineName='%'
-                echartsObj2 = [{ name: 'B相电流', data: ib }]
-                lineName2='A'
-                break
-              case 'icLoad':
-                echartsObj = [{ name: 'C相电流负载率 ( 实时数据 )', data: icLoad }]
-                lineName='%'
-                echartsObj2 = [{ name: 'C相电流', data: ic }]
-                lineName2='A'
-                break
-              default:
-            }
-
-            dataTime.value = dataTime
-
-            store.state.realScoreLineDataTime = dataTime
-            store.state.realScoreLineObj = echartsObj
-            store.state.realScoreLineObj2 = echartsObj2
-            store.state.realScoreLineName = lineName
-            store.state.realScoreLineName2 = lineName2
-
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    // 点击表格弹框图表
-    function oneClick(params) {
-      dialogTitle.value = deviceCode.value
-      showDialog.value = true
-      rtRealScore(params)
-    }
-
-     // 查看指标说明
-    const descripDialog = () => {
-      dialogTitle.value = '指标说明'
-      showDialog2.value = true
-    }
-
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
-      showDialog2.value = false
-      
-    }
-
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        if (newVal == 'first') {
-         setTimeout(function(){
-        realScore()
-      },400)
-        }
-      }
-    )
-
-    onMounted(() => {
-      deviceSelect()
-      setTimeout(function(){
-        realScore()
-      },500)
-      
-    })
-    return {
-      store,
-      num,
-      oneClick,
-      value4,
-      getData,
-      headCellStyle,
-      cellStyle,
-      deviceSelect,
-      deviceList,
-      realScore,
-      nowTime,
-      deviceCode,
-      closeDialog,
-      showDialog,
-      showDialog2,
-      dialogTitle,
-      echartsAllData,
-      echartsTitle,
-      rtRealScore,
-      linkDevice,
-      loading,
-
-      descripDialog
-    }
-  },
-})
-</script>
- 
-<style scoped lang="scss">
-
-.descripDialog{
-  
-}
-
-.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;
-}
-.el-button{
-  cursor:default!important
-}
-</style>

src/views/powerQuality/realTimeMonitoring/realScore/component/dialogChartOne.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="800px" @close="closeDialog()">
+    <div style="width: 100%">
+      <inner-line-chart2
+        v-if="type == 'elBalun' || type == 'vtBalun' || type == 'iaLoad' || type == 'ibLoad' || type == 'icLoad'"></inner-line-chart2>
+      <inner-line-chart></inner-line-chart>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+import innerLineChart from './innerLineChart'
+import innerLineChart2 from './innerLineChart2'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const router = useRouter();
+const props = defineProps({
+  echartsAllData: Array,
+  echartsTitle: String,
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref("")
+const dialogVisible = ref(false)
+const type = ref('')
+
+// 打开弹窗
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+
+  dialogVisible.value = true
+}
+
+// 关闭弹框
+function closeDialog() {
+  dialogVisible.value = false
+}
+
+//监听变化
+watch(
+  () => store.state.chartType,
+  (newVal, oldVal, clear) => {
+    type.value = newVal
+  },
+  { lazy: true }
+)
+
+onMounted(() => { })
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+ 
+<style scoped lang="scss"></style>

src/views/powerQuality/realTimeMonitoring/realScoreComponent/innerLineChart.vue → src/views/powerQuality/realTimeMonitoring/realScore/component/innerLineChart.vue

@@ -38,12 +38,9 @@ export default defineComponent({
 
       loading.value = false
     }
- 
+
     function echarts2() {
       let myChart = echarts.init(lineChartBanlance.value)
-
-      
-
       // 绘制图表
       myChart.setOption({
         color: ['#1187FF', '#48C964', '#fe8161'],
@@ -105,30 +102,6 @@ export default defineComponent({
             },
           },
         },
-
-        // series: [
-        //   {
-        //     name: 'A相电流',
-        //     type: 'line',
-        //     symbolSize: 7,
-        //     smooth: false,
-        //     data: [1, 2, 6, 4, 5, 58, 6, 7, 8],
-        //   },
-        //   {
-        //     name: 'B相电流',
-        //     type: 'line',
-        //     symbolSize: 7,
-        //     smooth: false,
-        //     data: [1, 2, 3, 4, 9, 5, 6, 7, 8],
-        //   },
-        //   {
-        //     name: 'C相电流',
-        //     type: 'line',
-        //     symbolSize: 7,
-        //     smooth: false,
-        //     data: [1, 2, 3, 4, 5, 6, 6, 7, 3],
-        //   },
-        // ],
         series: lineChartArr.value,
       })
       window.addEventListener('resize', () => {
@@ -173,22 +146,27 @@ export default defineComponent({
 <style lang="scss" scoped>
 .homeBoxCard {
   margin-bottom: 24px;
+
   ::v-deep(.el-card__header) {
     padding-left: 12px;
     padding-right: 12px;
   }
+
   ::v-deep(.el-card__body) {
     padding: 12px;
     font-size: 14px;
     line-height: 1.5715;
   }
+
   ::v-deep(.el-divider) {
     margin: 8px 0;
   }
+
   .num {
     font-size: 30px;
     color: #515a6e;
   }
+
   .height400 {
     height: 400px;
   }

src/views/powerQuality/realTimeMonitoring/realScore/component/table.vue

@@ -0,0 +1,243 @@
+<template>
+    <div>
+        <el-table :data="props.getData" style="width: 100%" :header-cell-style="headCellStyle" :cell-style="cellStyle">
+            <el-table-column label="回路" width="" align="center">
+                <template #default="scope">
+                    {{ scope.row.loop ? scope.row.loop : '-' }}
+                </template>
+            </el-table-column>
+            <el-table-column label="功率因数" width="" align="center">
+                <template #default="scope">
+                    <div @click="oneClick('cos')">
+                        <i class="smallSquare" :style="{ background: scope.row.cosQ ? 'green' : 'red' }"></i>
+                        {{ scope.row.cos }}
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="不平衡度">
+                <el-table-column label="电流" width="" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('elBalun')">
+                            <i class="smallSquare" :style="{
+                                background: scope.row.elBalunQ ? 'green' : 'red',
+                            }"></i>
+                            {{ scope.row.elBalun }}
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="电压" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('vtBalun')">
+                            <i class="smallSquare" :style="{
+                                background: scope.row.vtBalunQ ? 'green' : 'red',
+                            }"></i>
+                            {{ scope.row.vtBalun }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table-column>
+            <el-table-column label="电压">
+                <el-table-column prop="name" label="A相" width="" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('ua')">
+                            <i class="smallSquare" :style="{ background: scope.row.uaQ ? 'green' : 'red' }"></i>
+                            {{ scope.row.ua }}
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="B相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('ub')">
+                            <i class="smallSquare" :style="{ background: scope.row.ubQ ? 'green' : 'red' }"></i>
+                            {{ scope.row.ub }}
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="C相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('uc')">
+                            <i class="smallSquare" :style="{ background: scope.row.ucQ ? 'green' : 'red' }"></i>
+                            {{ scope.row.uc }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table-column>
+            <el-table-column label="电流负载率">
+                <el-table-column prop="name" label="A相" width="" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('iaLoad')">
+                            <i class="smallSquare" :style="{ background: scope.row.iaLoadQ ? 'green' : 'red' }"></i>
+                            {{ scope.row.iaLoad }}
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="B相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('ibLoad')">
+                            <i class="smallSquare" :style="{ background: scope.row.ibLoadQ ? 'green' : 'red' }"></i>
+                            {{ scope.row.ibLoad }}
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="C相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('icLoad')">
+                            <i class="smallSquare" :style="{ background: scope.row.icLoadQ ? 'green' : 'red' }"></i>
+                            {{ scope.row.icLoad }}
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table-column>
+            <el-table-column label="评分" width="" align="center">
+                <template #default="scope">
+                    <el-button size="small" :type="scope.row.score > 80
+                        ? 'success'
+                        : props.getData[0].score >= 60
+                            ? 'warning'
+                            : 'danger'" style="cursor:defalut">
+                        {{ scope.row.score }}
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <dialogChartOne ref="dialogChartOneRef" :echartsAllData="echartsAllData" :echartsTitle="echartsTitle">
+        </dialogChartOne>
+    </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { parseTime } from '@/utils'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/powerQuality/realScore.js'
+/*----------------------------------组件引入-----------------------------------*/
+import dialogChartOne from './dialogChartOne'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+    getData: Object,
+    deviceCode: String,
+    nowTime: String,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const echartsAllData = ref([])
+const echartsTitle = ref('')
+
+// 折线图详情总数据请求
+function rtRealScore(params) {
+    const startTime = parseTime(new Date().setHours(0, 0, 0, 0))
+    const endTime = props.nowTime
+
+    store.state.chartType = params // 更新状态管理中的图表类型
+
+    api
+        .rtRealScore({
+            deviceCode: 'DA00021026',
+            startTime: startTime,
+            endTime: endTime,
+        })
+        .then((requset) => {
+            if (requset.status === 'SUCCESS') {
+                echartsAllData.value = requset.data
+
+                // 处理数据
+                var rawData = requset.data
+                var echartsObj = []
+                var echartsObj2 = []
+                var lineName
+                var lineName2
+
+                switch (params) {
+                    case 'cos':
+                        echartsObj = [{ name: '功率因数 ( 实时数据 )', data: rawData.map(item => item.cos) }]
+                        lineName = ''
+                        break
+                    case 'ua':
+                        echartsObj = [{ name: 'A相电压 ( 实时数据 )', data: rawData.map(item => item.ua) }]
+                        lineName = 'kV'
+                        break
+                    case 'ub':
+                        echartsObj = [{ name: 'B相电压 ( 实时数据 )', data: rawData.map(item => item.ub) }]
+                        lineName = 'kV'
+                        break
+                    case 'uc':
+                        echartsObj = [{ name: 'c相电压 ( 实时数据 )', data: rawData.map(item => item.uc) }]
+                        lineName = 'kV'
+                        break
+                    case 'elBalun':
+                        echartsObj = [{ name: '电流不平衡度 ( 实时数据 )', data: rawData.map(item => item.elBalun * 100) }]
+                        lineName = '%'
+                        echartsObj2 = [{ name: 'A相电流', data: rawData.map(item => item.ia) }, { name: 'B相电流', data: rawData.map(item => item.ib) }, { name: 'C相电流', data: rawData.map(item => item.ic) }]
+                        lineName2 = 'A'
+                        break
+                    case 'vtBalun':
+                        echartsObj = [{ name: '电压不平衡度 ( 实时数据 )', data: rawData.map(item => item.vtBalun * 100) }]
+                        lineName = '%'
+
+                        echartsObj2 = [{ name: 'A相电压', data: rawData.map(item => item.ua) }, { name: 'B相电压', data: rawData.map(item => item.ub) }, { name: 'C相电压', data: rawData.map(item => item.uc) }]
+                        lineName2 = 'V'
+                        break
+                    case 'iaLoad':
+                        echartsObj = [{ name: 'A相电流负载率 ( 实时数据 )', data: rawData.map(item => item.iaLoad) }]
+                        lineName = '%'
+                        echartsObj2 = [{ name: 'A相电流', data: rawData.map(item => item.ia) }]
+                        lineName2 = 'A'
+                        break
+                    case 'ibLoad':
+                        echartsObj = [{ name: 'B相电流负载率 ( 实时数据 )', data: rawData.map(item => item.iaLoad) }]
+                        lineName = '%'
+                        echartsObj2 = [{ name: 'B相电流', data: rawData.map(item => item.ib) }]
+                        lineName2 = 'A'
+                        break
+                    case 'icLoad':
+                        echartsObj = [{ name: 'C相电流负载率 ( 实时数据 )', data: rawData.map(item => item.iaLoad) }]
+                        lineName = '%'
+                        echartsObj2 = [{ name: 'C相电流', data: rawData.map(item => item.ic) }]
+                        lineName2 = 'A'
+                        break
+                    default:
+                }
+
+                store.state.realScoreLineDataTime = rawData.map(item => item.dataTime)
+                store.state.realScoreLineObj = echartsObj
+                store.state.realScoreLineObj2 = echartsObj2
+                store.state.realScoreLineName = lineName
+                store.state.realScoreLineName2 = lineName2
+
+            } else {
+                ElMessage.error(requset.msg)
+            }
+        })
+}
+
+// 点击表格弹框图表
+function oneClick(params) {
+    proxy.$refs["dialogChartOneRef"].openDialog({
+        dialogTitle: props.deviceCode
+    })
+
+    rtRealScore(params)
+}
+
+//自定义表头列样式
+function headCellStyle({ row, column, rowIndex, columnIndex }) {
+    if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
+        return { textAlign: 'center' }
+    } else {
+        return {}
+    }
+}
+//自定义列样式
+const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
+    if (rowIndex === 0 && columnIndex != 0) {
+        return { cursor: 'pointer' }
+    }
+}
+</script>

src/views/powerQuality/realTimeMonitoring/realScore/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <!-- 筛选start -->
+    <div class="filter-container" style="justify-content: left; white-space: nowrap;">
+      <div class="filter-item">
+        <div class="title">选择站点：</div>
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
+          @change="deviceSelect()" :disabled="store.state.authorities.indexOf('查询') == -1">
+          <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">
+        <div class="title">选择设备：</div>
+        <el-select v-model="deviceCode" placeholder="请选择" style="width: 150px"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="device in deviceList" :key="device" :label="device.deviceName"
+            :value="device.deviceCode"></el-option>
+        </el-select>
+      </div>
+      <div class="filter-item">
+        <div class="title"> 数据刷新时间：{{ nowTime }}</div>
+      </div>
+
+      <el-button type="primary" class="search-button" @click="realScore()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        刷新
+      </el-button>
+
+      <div class="filter-item cursor-pointer" @click="openDescripDialog()" style="margin:auto 0 auto auto;">
+        <img class="image" src="@/assets/images/descIcon.png" alt="" />
+        <div class="title">指标说明</div>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <el-row :gutter="20" class="mt-20">
+      <el-col :md="24" :lg="7">
+        <!-- 评分 -->
+        <div class="grid-content bg-purple mb-20">
+          <div class="blanceChartTit">
+            <span>评分</span>
+          </div>
+          <radar-chart :getTableData="getData[0]" v-loading="loading"></radar-chart>
+          <div class="totalScore">
+            总评分：{{ getData[0].score }}
+            <el-button :type="getData[0].score > 80
+              ? 'success'
+              : getData[0].score >= 60
+                ? 'warning'
+                : 'danger'">
+              {{
+                getData[0].score > 80
+                ? '优秀'
+                : getData[0].score >= 60
+                  ? '合格'
+                  : '不合格'
+              }}
+            </el-button>
+          </div>
+        </div>
+        <!-- 评分 end -->
+
+        <!-- 回路统计 -->
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>回路统计</span>
+          </div>
+          <div>
+            <pie-chart :getTableData="getData[0]" v-loading="loading"></pie-chart>
+          </div>
+        </div>
+        <!-- 回路统计 end -->
+      </el-col>
+
+      <el-col :md="24" :lg="17">
+        <!-- 表格start -->
+        <tableDom :getData="getData" :deviceCode="deviceCode" :nowTime="nowTime" v-loading="loading"></tableDom>
+        <!-- 表格end -->
+      </el-col>
+    </el-row>
+
+    <!--指标说明弹框组件开始-----------------------start-->
+    <descrip-dialog ref="descripDialogRef"></descrip-dialog>
+    <!--指标说明弹框组件结束-----------------------end-->
+  </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { parseTime } from '@/utils'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/powerQuality/realScore.js'
+/*----------------------------------组件引入-----------------------------------*/
+import radarChart from './component/radarChart.vue'
+import pieChart from './component/pieChart.vue'
+import descripDialog from '../component/descripDialog.vue'
+import tableDom from './component/table.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  activeName: String,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const loading = ref(false)
+const nowTime = ref(parseTime(new Date()))
+const getData = ref([
+  {
+    loop: '',
+    cos: '0%',
+    elBalun: '100%',
+    vtBalun: '0%',
+    name: '0%',
+    city: '0%',
+    score: '0',
+  },
+])
+const deviceList = ref([])
+const deviceCode = ref('')
+
+
+//设备下拉请求
+async function deviceSelect() {
+  await 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 realScore() {
+  if (!deviceCode.value) {
+    ElNotification({
+      title: '提示',
+      message: '请选择左侧设备信息',
+      type: 'warning',
+    })
+    return
+  }
+
+  loading.value = true
+  api.realScore({ deviceCode: deviceCode.value }).then((requset) => {
+    loading.value = false
+
+    if (requset.status === 'SUCCESS') {
+      getData.value[0] = requset.data
+    } else {
+      ElMessage.error(requset.msg)
+    }
+  })
+  nowTime.value = parseTime(new Date())
+}
+
+
+
+// 查看指标说明
+function openDescripDialog() {
+  proxy.$refs["descripDialogRef"].openDialog({
+    dialogTitle: "指标说明",
+  })
+}
+
+watch(
+  () => props.activeName,
+  (newVal) => {
+    if (newVal == 'first') {
+      setTimeout(function () {
+        realScore()
+      }, 400)
+    }
+  }
+)
+
+onMounted(() => {
+  deviceSelect()
+  setTimeout(function () {
+    realScore()
+  }, 500)
+})
+</script>
+ 
+<style scoped lang="scss">
+.descripDialog {}
+
+.el-row {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.el-col {
+  border-radius: 4px;
+}
+</style>

src/views/powerQuality/realTimeMonitoring/realScoreComponent/descripDialog.vue

@@ -1,239 +0,0 @@
-<template>
-  <div class="descripDialog">
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="600px"
-      @close="closeDialog(0)"
-      @open="open"
-    >
-      <div style="width: 100%; ">
-        <el-tabs v-model="activeName" @tab-click="handleClick">
-          <el-tab-pane label="判定标准" name="first">
-            <div class="desBlock">
-              <h3>【电压】</h3>
-              <span>电压偏差国标：</span>
-              <span>35KV及以上正、负偏差的绝对值之和不超过标称电压的10%；</span>
-              <span>20kv及以下电压偏差为标称电压的±7%；</span>
-              <span>400V及以下电压偏差为标称电压的+7%、-10%；</span>
-              <span>标称电压=额定电压，其数值为线电压</span>
-              <span>比如：额定电压为380V，电压偏差的上限 和 下限分别为235.4V 和 198V</span>
-            </div>
-            <div class="desBlock">
-              <h3>【频率】</h3>
-              <span>频率超限范围：50±0.2（Hz）</span>
-            </div>
-            <div class="desBlock">
-              <h3>【功率因数】</h3>
-              <span>功率因数超限范围：用户可配置功率因数标准值</span>
-            </div>
-            <div class="desBlock">
-              <h3>【三相不平衡】</h3>
-              <span>三相不平衡度超限范围：15%</span>
-            </div>
-            <div class="desBlock">
-              <h3>【电流负载率】</h3>
-              <span>电流负载率超限范围：用户可配置电流负载率门限值</span>
-              <span>电流负载率=电流/额定电流</span>
-            </div>
-             <div class="desBlock">
-              <h3>【单项结论】</h3>
-              <span>合格率：(测点数-超限数)/测点数×100%</span>
-              <span>合格率>=95% 「合格」</span>
-              <span>合格率95% 「不合格」</span>
-            </div>
-            
-          </el-tab-pane>
-          <el-tab-pane label="配置内容" name="second">
-            <div class="desBlock">
-              <h3>【站点级配置】<a @click="goSitePowerScore">立即前往</a></h3>
-              <p>请在 站点管理->电能质量评分配置中配置 或 联系运维管理员：</p>
-              <span>电能质量各要素权重、功率因数标准值</span>
-            </div>
-            <div class="desBlock">
-              <h3>【设备级配置】<a @click="goSiteWatchDog">立即前往</a></h3>
-              <p>请在 站点管理->监控设备中配置 或 联系运维管理员：</p>
-              <span>额定电压、额定电流、电流负载率门限、电能质量分析</span>
-              <span>如果设备没有配置额定电压，电压/谐波畸变率分析项可能没有数据</span>
-              <span>如果设备不勾选电能质量分析，该设备不参与电能质量分析</span>
-            </div>
-            <div class="desBlock">
-              <h3>【变量级配置】<a @click="goSiteVariableList">立即前往</a></h3>
-              <p>请在 站点管理->变量列表中配置 或 联系运维管理员：配置下列变量，且需要指定变量的变量属性</p>
-              <span>A/B/C相电压</span>
-              <span>A/B/C相电流</span>
-              <span>功率因数</span>
-              <span>频率</span>
-              <span>有功/无功功率</span>
-              <span>有功/无功电度</span>
-              <span>电压三相不平衡度</span>
-              <span>电流三相不平衡度</span>
-              <span>A/B/C相电压相角</span>
-              <span>A/B/C相电流相角</span>
-              <span>A/B/C相电压总谐波畸变率</span>
-              <span>A/B/C相电流总谐波畸变率</span>
-              <span>2~31次A/B/C相电压谐波含量或有效值 (可二选一)</span>
-              <span>2~31次A/B/C相电流谐波含量或有效值 (可二选一)</span>
-              <span>如果变量没有指定变量属性 或 变量没有数据，分析项可能没有数据</span>
-            </div>
-          </el-tab-pane>
-         
-        </el-tabs>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import {useRouter} from 'vue-router'
-
-import { defineComponent, ref, watchEffect } from 'vue'
-// import * as api from '@/api/siteManage/watchDog.js'
-// import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DescripDialog',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-  },
-  setup(props, context) {
-    context
-     let router = useRouter();
-    const store = useStore()
-    const dialogVisible = ref(false)
-
-    const activeName=ref('first')
-
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-
-    
-    }
-
-   
-
-    // 关闭弹框
-    const closeDialog = () => {
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
-
-
-    function handleClick(tab, event) {
-      console.log(tab, event)
-    }
-
-     function goSiteWatchDog(){
-      store.state.goUrl=2
-      router.push({
-    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
-        path:'/siteManage',
-        query:{
-        activeName:'second',
-        siteId:store.state.siteId
-        }
-      })
-    }
-    function goSiteVariableList(){
-      store.state.goUrl=3
-      router.push({
-    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
-        path:'/siteManage',
-        query:{
-        activeName:'six',
-        siteId:store.state.siteId
-        }
-      })
-
-    }
-    function goSitePowerScore(){
-      store.state.goUrl=6
-      router.push({
-    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定 
-        path:'/siteManage',
-        query:{
-        activeName:'six',
-        siteId:store.state.siteId
-        }
-      })
-
-    }
-   
-
-    return {
-       store,
-      closeDialog,
-      dialogVisible,
-    
-      open,
-
-      handleClick,
-      activeName,
-
-      goSitePowerScore,
-      goSiteWatchDog,
-      goSiteVariableList
-    }
-  },
-})
-</script>
- 
-<style scoped lang="scss">
-.el-input,
-.el-select {
-  width: 240px;
-}
-
-// label样式
-.el-form-item__label {
-  width: 150px;
-}
-.el-form-item__content {
-  margin-left: 150px;
-}
-.desBlock {
-  padding:15px 0;
-  border-bottom:1px solid rgba(0,0,0,0.06);
-  h3{
-    margin:0 0 10px  0;
-    position:relative;
-    a{
-      position:absolute;
-      right:0
-    }
-    span{
-      position:absolute;
-      right:0;
-      font-size:14px;
-      color:#409eff;
-      cursor:pointer
-    }
-  }
-  p{
-    // margin-bottom:0px;
-  }
-  span{
-    display:block;
-    color:#7e93a6
-  }
-}
-</style>
-<style>
-.descripDialog .el-dialog__body{
-  padding-top:0
-}
-.descripDialog .el-overlay-dialog {
-  /* left: auto !important; */
-  /* bottom: auto !important; */
-}
-</style>

src/views/powerQuality/realTimeMonitoring/realScoreComponent/dialogChartOne-old.vue

@@ -1,232 +0,0 @@
-<template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="800px"
-    @close="closeDialog()"
-    @open="open"
-  >
-    <div style="width: 100%; height: 400px">
-      <div shadow="never" class="homeBoxCard" v-loading="loading">
-        <div
-          style="height: 400px"
-          ref="lineChartBanlance"
-          id="lineChartBanlance"
-        />
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
-import * as echarts from 'echarts'
-
-export default defineComponent({
-  name: 'DialogChartOne',
-  components: {
-  },
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-    echartsAllData: Array,
-    echartsTitle: String,
-  },
-  setup(props, context) {
-    context
-    const dialogVisible = ref(false)
-    const dataList = ref([])
-    const dataTimes = ref([])
-
-    const getData = async () => {
-      var arrOld = props.echartsAllData
-      let dataTime = arrOld.map((item) => {
-        return item.dataTime
-      })
-      let cos = arrOld.map((item) => {
-        return item.cos
-      })
-      let ua = arrOld.map((item) => {
-        return item.ua
-      })
-      let ub = arrOld.map((item) => {
-        return item.ub
-      })
-      let uc = arrOld.map((item) => {
-        return item.uc
-      })
-      dataTimes.value = dataTime;
-      switch (props.echartsTitle) {
-        case '功率因数':
-          dataList.value = cos
-          break
-        case 'A相电压':
-          dataList.value = ua
-          break
-        case 'B相电压':
-          dataList.value = ub
-          break
-        case 'C相电压':
-          dataList.value = uc
-          break
-        default:
-      }
-    }
-
-    function echarts2() {
-      // 新建一个promise对象
-      let newPromise = new Promise((resolve) => {
-        resolve()
-      })
-      //然后异步执行echarts的初始化函数
-      newPromise.then(() => {
-        //	此dom为echarts图标展示dom
-        let myChart = echarts.init(document.getElementById('lineChartBanlance'))
-        myChart.setOption({
-          color: ['#1187FF'],
-          legend: {
-            top: '0',
-            // data: ['电流不平衡度'],
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: { type: 'cross' },
-          },
-          grid: {
-            left: '20',
-            right: '40',
-            top: '40',
-            bottom: '30',
-            containLabel: true,
-          },
-          xAxis: {
-            axisLabel: {
-              color: '#444',
-              fontSize: 14,
-            },
-            /*改变xy轴颜色*/
-            axisLine: {
-              lineStyle: {
-                color: '#444',
-                width: 1, //这里是为了突出显示加上的
-              },
-            },
-            boundaryGap: false,
-            data: dataTimes.value,
-          },
-          yAxis: {
-            name: '%',
-            nameTextStyle: {
-              color: 'black',
-              fontSize: 10,
-            },
-            type: 'value',
-            axisTick: {
-              show: true, //去除刻度线
-            },
-            axisLabel: {
-              color: 'black', // 文本颜色
-            },
-            axisLine: {
-              show: true, // 去除轴线
-              lineStyle: {
-                color: 'black',
-              },
-            },
-            splitNumber: 5,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: '#9d9d9d',
-              },
-            },
-          },
-
-          series: [
-            {
-              name: props.echartsTitle + '实时数据',
-              type: 'line',
-              symbolSize: 7,
-              smooth: false,
-              data: dataList.value,
-              markLine: {
-                //最大值和最小值
-                // data: [
-                //   {
-                //     yAxis: 30,
-                //     label: {
-                //       position: 'middle',
-                //       formatter: '严重三项不平衡',
-                //     },
-                //     lineStyle: {
-                //       width: 2,
-                //       color: '#FF5D1D',
-                //     },
-                //   },
-                //   {
-                //     yAxis: 14,
-                //     label: {
-                //       position: 'middle',
-                //       formatter: '不平衡度',
-                //     },
-                //     lineStyle: {
-                //       width: 2,
-                //       color: '#f2e251',
-                //     },
-                //   },
-                // ],
-              },
-            },
-          ],
-        })
-        window.addEventListener('resize', () => {
-          myChart.resize()
-        })
-      })
-    }
-
-    // 关闭弹框
-    const closeDialog = () => {
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
-
-    watchEffect((fn) => {
-      fn
-      dialogVisible.value = props.flag
-    })
-
-    const writeValue = (val) => {
-      val
-      getData()
-      echarts2()
-    }
-
-    //监听变化
-    watch(
-      () => props.echartsAllData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        // console.log(newVal)
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
-
-    onMounted(() => {})
-
-    return {
-      closeDialog,
-      dialogVisible,
-      echarts2,
-    }
-  },
-})
-</script>
- 
-<style scoped lang="scss">
-</style>

src/views/powerQuality/realTimeMonitoring/realScoreComponent/dialogChartOne.vue

@@ -1,87 +0,0 @@
-<template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="800px"
-    @close="closeDialog()"
-  >
-    <div style="width: 100%">
-       <inner-line-chart2 v-if="type=='elBalun'||type=='vtBalun'||type=='iaLoad'||type=='ibLoad'||type=='icLoad'"></inner-line-chart2>
-      <inner-line-chart></inner-line-chart>
-     
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
-import innerLineChart from './innerLineChart'
-import innerLineChart2 from './innerLineChart2'
-
-export default defineComponent({
-  name: 'DialogChartOne',
-  components: {
-    innerLineChart,
-    innerLineChart2
-  },
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-    echartsAllData: Array,
-    echartsTitle: String,
-  },
-  setup(props, context) {
-    context
-    const store = useStore()
-    const dialogVisible = ref(false)
-    const type = ref('')
-
-    const getData = async () => {
-      type.value = store.state.chartType
-    }
-
-    // 关闭弹框
-    const closeDialog = () => {
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
-
-    watchEffect((fn) => {
-      fn
-      dialogVisible.value = props.flag
-    })
-
-    const writeValue = (val) => {
-      val
-      getData()
-    }
-
-    //监听变化
-    watch(
-      () => store.state.chartType,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      { lazy: true }
-    )
-
-    onMounted(() => {})
-
-    return {
-      closeDialog,
-      dialogVisible,
-      type
-    }
-  },
-})
-</script>
- 
-<style scoped lang="scss">
-</style>

src/views/stationManage/index.vue

@@ -3,7 +3,7 @@
     <div class="app-container" v-if="!pageShow">
       <!-- 筛选start -->
       <div class="mb-20">所有台区</div>
-      <div class="filter-container mb-10" style="justify-content: left;">
+      <div class="filter-container mb-20" style="justify-content: left;">
         <div class="filter-item">
           <div class="title"> 台区：</div>
           <el-input v-model="platformAreaName" placeholder="请输入台区名称" style="width: 200px"

src/views/systemManage/userManage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <!-- 筛选start -->
-    <div class="filter-container mb-10">
+    <div class="filter-container mb-20">
 
       <div class="filter-item">
         <span class="title" style="margin-right: 30px">用户管理列表</span>
@@ -14,7 +14,7 @@
       </div> -->
     </div>
 
-    <div class="filter-container mb-10" style="justify-content: left; white-space: nowrap;">
+    <div class="filter-container mb-20" style="justify-content: left; white-space: nowrap;">
       <div class="filter-item ">
         <span class="title">账号：</span>
         <el-input v-model="userName" placeholder="请输入内容" style="width: 180px"