新页面

src/assets/css/index.scss

@@ -324,6 +324,24 @@
                             top: 5px;
                         }
                         
+                        // 告警管理渐变背景色
+                        .alarmingTable {
+                            a {
+                                margin-right: 0!important;
+                            }
+                        }
+                        
+                        .gradualBg {
+                            padding: 0 5px;
+                            color: #444;
+                            display: inline-block;
+                            width: 100%;
+                            // margin-left: 10px;
+                            background-color: #409eff;
+                            /* 不支持线性的时候显示 */
+                            background-image: linear-gradient(to right, #409eff, #eaf5ff);
+                        }
+                        
                         //告警详情弹框组件
                         .alarmStatusDialog {
                             .el-form-item:not(.user-layout .el-form-item) {
@@ -679,7 +697,7 @@
                                 background-image: gradient(linear, 0 0, 100% 100%, color-stop(.25, hsla(0, 0%, 100%, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, hsla(0, 0%, 100%, .2)), color-stop(.75, hsla(0, 0%, 100%, .2)), color-stop(.75, transparent), to(transparent));
                                 background-size: 8px 8px
                             }
-                            .rightSplitRed .grid-content:after {
+                            .rightSplitRed .rightSplitRedInner {
                                 position: absolute;
                                 bottom: -3px;
                                 z-index: 4;

src/views/alarmManage/index.vue

@@ -23,17 +23,14 @@
               range-separator="至"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
-              style="width:auto"
+              style="width: auto"
             >
             </el-date-picker>
           </div>
-          <el-button  class="search-button"
-            >重置</el-button>
-          <el-button type="primary" class="search-button"
-            >搜索</el-button>
+          <el-button class="search-button">重置</el-button>
+          <el-button type="primary" class="search-button">搜索</el-button>
         </div>
       </div>
-
     </div>
     <!-- 筛选end -->
 
@@ -43,32 +40,40 @@
       border
       stripe
       :header-cell-style="headClass"
-       :cell-style="cellStyle"
+      :cell-style="cellStyle"
+      class="alarmingTable"
     >
       <el-table-column prop="siteName" label="站点名称" width="">
-         <template #default="scope">
-           <div @click='handleClick(scope.row)' >  {{ scope.row.siteName }}</div>
-          
+        <template #default="scope">
+          <div @click="handleClick(scope.row)">{{ scope.row.siteName }}</div>
         </template>
       </el-table-column>
       <el-table-column prop="totalNum" label="总数" width="">
-         <template #default="scope">  
-            <router-link style="margin-right:15px;" :to="{ path:'alarmTotal',query:{id:scope.row.totalNum}}">
-              {{ scope.row.totalNum }}
-            </router-link>
-          </template>
+        <template #default="scope">
+          <router-link
+            style="margin-right: 15px"
+            :to="{ path: 'alarmTotal', query: { id: scope.row.totalNum } }"
+          >
+            <span class="gradualBg"> {{ scope.row.totalNum }}</span>
+          </router-link>
+        </template>
       </el-table-column>
       <el-table-column prop="oneAlarming" label="一级告警" width="">
-         <template #default="scope">  
-            <router-link style="margin-right:15px;" :to="{ path:'alarmTotal',query:{id:scope.row.oneAlarming,type:1}}">
-              {{ scope.row.oneAlarming }}
-            </router-link>
-          </template>
+        <template #default="scope">
+          <router-link
+            style="margin-right: 15px"
+            :to="{
+              path: 'alarmTotal',
+              query: { id: scope.row.oneAlarming, type: 1 },
+            }"
+          >
+            {{ scope.row.oneAlarming }}
+          </router-link>
+        </template>
       </el-table-column>
       <el-table-column prop="twoAlarming" label="二级告警" width="">
       </el-table-column>
-       <el-table-column prop="other" label="其他" width="">
-      </el-table-column>
+      <el-table-column prop="other" label="其他" width=""> </el-table-column>
     </el-table>
     <!-- 表格end -->
 
@@ -88,18 +93,13 @@
 
     <!-- 分页end -->
 
-   
-
-  
+    <div>{{ this.maxData }}   {{this.maxData2}}</div>
   </div>
 </template>
 
 <script>
-
-
 export default {
   name: "VariableList",
-   
 
   data() {
     return {
@@ -114,62 +114,74 @@ export default {
       region: "",
       tableData: [
         {
-           other: "10",
+          other: "10",
           siteName: "测试站点1",
           totalNum: "626",
           oneAlarming: "10",
           twoAlarming: "10",
         },
         {
-           other: "10",
+          other: "10",
           siteName: "测试站点1",
           totalNum: "66",
           oneAlarming: "10",
           twoAlarming: "10",
         },
         {
-           other: "0",
+          other: "0",
           siteName: "测试站点1",
           totalNum: "6",
           oneAlarming: "3",
           twoAlarming: "10",
         },
         {
-           other: "0",
+          other: "0",
           siteName: "测试站点1",
           totalNum: "3",
           oneAlarming: "3",
           twoAlarming: "3",
         },
         {
-           other: "0",
+          other: "0",
           siteName: "测试站点1",
           totalNum: "0",
           oneAlarming: "2",
           twoAlarming: "0",
         },
-       
       ],
     };
   },
-  methods: {
-
-     
+  computed: {
+    maxData() {
+      return Math.max.apply( Math, this.tableData.map(function (o) {   // 一组数组对象中取某个属性最大值
+          return o.totalNum;
+        })
+      );
+    },
+    maxData2() {
+      return parseInt(parseInt('615'.substr(0, 1)) + 1 + "00");    // 对数值向上取整百  eg 615取700
+    },
+  },
 
+  onload: {},
+  methods: {
     //查看
-     handleClick(row) {
-         alert('查看对应站点（页面跳转）')
-        console.log(row);
-      },
+    handleClick(row) {
+      alert("查看对应站点（页面跳转）");
+      console.log(row);
+    },
     //自定义列样式
     cellStyle({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {
         return `color:#0284E8;cursor:pointer`;
+      }
+      if (columnIndex === 1) {
+        //  return `background:pink;cursor:pointer`;
       } else {
         return "";
       }
     },
-    
+
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
@@ -193,5 +205,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 </style>

src/views/operManage/siteAchives/checkVideo.vue

@@ -0,0 +1,153 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      v-model="showDialog"
+      width="600px"
+  
+      @close="closeDialog(0)"
+    >
+    <div style="width:100%;
+    height:400px;background:#aaa   "></div>
+     
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "CheckVideo",
+  props: {
+    dialogTitle: {
+      type: String,
+  
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+       checked: true,
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      options: [
+        {
+          value: "选项1",
+          label: "站点一",
+        },
+        {
+          value: "选项2",
+          label: "站点二",
+        },
+        {
+          value: "选项3",
+          label: "站点三",
+        },
+        {
+          value: "选项4",
+          label: "站点四",
+        },
+        {
+          value: "选项5",
+          label: "站点五",
+        },
+      ],
+
+      rules: {
+        watchName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: "请输入设备名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        watchCode: [
+          { required: true, message: "请输入设备编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        routeAddress: [
+          { required: true, message: "请选则回路表记地址", trigger: "change" },
+         
+        ],
+        ratedVoltage: [
+          { required: true, message: '请选择站点列表', trigger: 'change'}
+        
+        ],
+        ratedCurrent: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        fzlMx: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("角色不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // onSelectedDrug(event) {
+    //   this.routeAddress = event;
+    //   console.log(this.routeAddress);
+    // },
+    // 保存操作
+    submitForm(formName) {
+      const params = Object.assign(this.formInfo, {});
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          this.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          this.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+    //   this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</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
+}
+</style>

src/views/operManage/siteAchives/dialogComponent.vue

@@ -0,0 +1,194 @@
+<template>
+  <transition name="dialog-fade">
+    <el-dialog
+      v-if="showDialog"
+      :title="dialogTitle"
+      class="dialog-component"
+      v-model="showDialog"
+      width="640px"
+      @close="closeDialog(0)"
+    >
+      <el-form
+        ref="formInfo"
+        :model="formInfo"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="站点名称：" prop="siteName">
+          <el-input v-model="formInfo.siteName"></el-input>
+        </el-form-item>
+        <el-form-item label="站点线路：" prop="siteRoute">
+          <el-input v-model="formInfo.siteRoute"></el-input>
+        </el-form-item>
+        <el-form-item label="编号：" prop="siteCode">
+          <el-input v-model="formInfo.siteCode"></el-input>
+        </el-form-item>
+        <el-form-item label="线路:" prop="siteList">
+          <el-select
+            v-model="formInfo.siteList"
+            multiple
+            filterable
+            collapse-tags
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+       
+        <br />
+        <br />
+        <br />
+        <div style="text-align: right">
+          <el-button @click="closeDialog(0)">取消</el-button>
+          <el-button type="primary" @click="submitForm('formInfo')"
+            >保存</el-button
+          >
+        </div>
+      </el-form>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+
+
+
+
+export default {
+  name: "DialogComponent",
+  props: {
+    dialogTitle: {
+      type: String,
+      default: "新增",
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      showDialog: false,
+      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+      options: [
+        {
+          value: "选项1",
+          label: "站点一",
+        },
+        {
+          value: "选项2",
+          label: "站点二",
+        },
+        {
+          value: "选项3",
+          label: "站点三",
+        },
+        {
+          value: "选项4",
+          label: "站点四",
+        },
+        {
+          value: "选项5",
+          label: "站点五",
+        },
+      ],
+
+      rules: {
+        siteName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: false, message: "请输入站点名称", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        siteRoute: [
+          { required: true, message: "请输入站点线路", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        siteCode: [
+          { required: true, message: "请输入编号", trigger: "blur" },
+          {
+            min: 3,
+            max: 6,
+            message: "用户名长度在 3 到 6 个字符",
+            trigger: "blur",
+          },
+        ],
+        siteList: [
+          { required: true, message: '请选择线路', trigger: 'change'}
+        
+        ],
+        pointNum: [
+          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+        deviceNum: [
+          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+          { trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    roleValid(rule, value, callback) {
+      if (value.length === 0) {
+        callback(new Error("角色不能为空"));
+      } else {
+        callback();
+      }
+    },
+
+    // onSelectedDrug(event) {
+    //   this.siteList = event;
+    //   console.log(this.siteList);
+    // },
+    // 保存操作
+    submitForm(formName) {
+      const params = Object.assign(this.formInfo, {});
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          this.$message({
+            message: "操作成功！",
+            type: "success",
+          });
+          this.closeDialog(1);
+        } else {
+          return false;
+        }
+      });
+    },
+    // 关闭弹框
+    closeDialog(flag) {
+      this.$refs["formInfo"].resetFields();
+      this.showDialog = false;
+      this.$emit("closeDialog", flag);
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+</style>

src/views/operManage/siteAchives/index.vue

@@ -1,5 +1,295 @@
 <template>
-  <div style="padding:30px;">
-   现场档案
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <span class="" style="margin-right: 30px">现场档案列表</span>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+
+          <div class="filter-item">
+            站点:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 150px"
+            >
+              <el-option label="站点一" value="1"></el-option>
+              <el-option label="站点二" value="2"></el-option>
+            </el-select>
+          </div>
+
+          <div class="filter-item">
+            电试日期:
+             <el-date-picker
+              v-model="value4"
+              type="dates"
+              placeholder="请选择"
+              style="width: 150px"
+            >
+            </el-date-picker>
+          </div>
+
+         
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="siteCode" label="站点编号" width="">
+      </el-table-column>
+      <el-table-column prop="siteRoute" label="线路" width="">
+      </el-table-column>
+      <el-table-column prop="supervision" label="监察" width="">
+      </el-table-column>
+      <el-table-column prop="updataTime" label="更新时间" width="">
+      </el-table-column>
+      <el-table-column prop="defect" label="缺陷统计" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            @click="checkVideo(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >查看</el-button
+          >
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+
+     <!--弹框组件开始-----------------------start-->
+    <check-video
+      v-if="showDialog"
+      ref="checkVideo"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></check-video>
+    <!--视频弹框组件开始-----------------------end-->
+
+
   </div>
 </template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+import checkVideo from "./checkVideo";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent,checkVideo },
+
+  data() {
+    return {
+      select: 1,
+      currentPage4: 4,
+
+      value4: "请选择",
+
+      showDialog: false,
+
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          siteCode: "cszd1",
+          siteRoute: "变线1",
+          supervision: "李四",
+          updataTime: "2021-09-22 18:22:22",
+          defect: "5",
+        },
+        {
+          xh: "1",
+          siteName: "测试站点1",
+          siteCode: "cszd1",
+          siteRoute: "变线1",
+          supervision: "李四",
+          updataTime: "2021-09-22 18:22:22",
+          defect: "10",
+        },
+        {
+          xh: "1",
+          siteName: "测试站点1",
+          siteCode: "cszd1",
+          siteRoute: "变线1",
+          supervision: "李四",
+          updataTime: "2021-09-22 18:22:22",
+          defect: "4",
+        },
+        {
+          xh: "1",
+          siteName: "测试站点1",
+          siteCode: "cszd1",
+          siteRoute: "变线1",
+          supervision: "李四",
+          updataTime: "2021-09-22 18:22:22",
+          defect: "3",
+        },
+        {
+          xh: "1",
+          siteName: "测试站点1",
+          siteCode: "cszd1",
+          siteRoute: "变线1",
+          supervision: "李四",
+          updataTime: "2021-09-22 18:22:22",
+          defect: "2",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 查看视频
+    checkVideo() {
+
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked:true,
+        resource:''
+      };
+      this.dialogTitle = "现场档案详情";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["checkVideo"].showDialog = true;
+      });
+    },
+
+
+
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+   
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/planOutage/dialogComponent.vue

@@ -18,22 +18,22 @@
         <el-form-item label="站点名称：" prop="watchName" label-width="150px">
           <el-input v-model="formInfo.watchName"></el-input>
         </el-form-item>
+
         <el-form-item
           label="开始停电时间："
           prop="watchCode"
           label-width="150px"
         >
-          <!-- <el-input v-model="formInfo.watchCode"></el-input > -->
-
           <el-date-picker
             v-model="beginTime"
-          
             type="datetime"
             placeholder="选择日期时间"
             :picker-options="pickerBeginDate"
             clearable
+            style="width:240px"
           ></el-date-picker>
         </el-form-item>
+
         <el-form-item
           label="结束停电时间:"
           prop="routeAddress"
@@ -41,12 +41,13 @@
         >
           <el-date-picker
             v-model="endTime"
+          
             type="datetime"
             placeholder="选择日期时间"
             :picker-options="pickerEndDate"
             clearable
+            style="width:240px"
           ></el-date-picker>
-         
         </el-form-item>
 
         <el-form-item
@@ -99,7 +100,6 @@ export default {
   data() {
     //限制不能选之后的日期
     this.pickerBeginDate = {
-      
       disabledDate: (time) => {
         alert(2);
         let endTime = this.endTime;
@@ -159,7 +159,7 @@ export default {
             trigger: "blur",
           },
         ],
-        watchCode: [
+        beginTime: [
           { required: true, message: "请输入开始停电时间", trigger: "blur" },
           {
             min: 3,
@@ -168,7 +168,7 @@ export default {
             trigger: "blur",
           },
         ],
-        routeAddress: [
+        endTime: [
           { required: true, message: "请选则结束停电时间", trigger: "change" },
         ],
         ratedVoltage: [
@@ -226,7 +226,9 @@ export default {
  
 <style scoped lang="scss">
 .el-input,
-.el-select,.el-date-editor.el-input, .el-date-editor.el-input__inner {
+.el-select,
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
   width: 240px;
 }
 

src/views/powerQuality/asseReport/index.vue

@@ -12,9 +12,9 @@
           <score-report></score-report>
        
         </el-tab-pane>
-        <el-tab-pane label="单回路报告" name="second">
+        <el-tab-pane label="单回路报告" name="second" :key='activeName'>
           <br>
-           <loop-report></loop-report>
+           <loop-report  v-if="key='activeName'"></loop-report>
         </el-tab-pane>
       </el-tabs>
       <br>

src/views/powerQuality/harmonicReport/index.vue

@@ -97,6 +97,20 @@
     >
     <curve-com v-if="num2 == 0"></curve-com>
     <table-com  v-if="num2 == 1"></table-com>
+
+    <!-- <el-tabs v-model="activeName" type="card">
+      <el-tab-pane label="曲线" name="first"  :key="activeName">
+        <br />
+        <curve-com v-if="(key = 'activeName')"></curve-com>
+      </el-tab-pane>
+      <el-tab-pane label="表格" name="second" >
+        <br />
+        <table-com ></table-com>
+      </el-tab-pane>
+    </el-tabs> -->
+
+
+
   </div>
 </template>
 
@@ -106,15 +120,16 @@ import tableCom from "./tableCom";
 
 export default {
   name: "VariableList",
-   components: {
-   curveCom,
-   tableCom
+  components: {
+    curveCom,
+    tableCom,
   },
 
   data() {
     return {
+      activeName: "second",
       num: 0,
-      num2: 0,
+      num2: 1,
       value4: "请选择",
       number: 1,
       measurType: 1,
@@ -126,9 +141,7 @@ export default {
       region: "",
     };
   },
-  methods: {
-   
-  },
+  methods: {},
 };
 </script>
 

src/views/powerQuality/realTimeMonitoring/index.vue

@@ -5,16 +5,15 @@
     <el-tabs 
         v-model="activeName"
         type="card"
-        @tab-click="handleClick"
       >
         <el-tab-pane label="实时评分" name="first">
           <br>
-          <real-score></real-score>
+          <real-score ></real-score>
        
         </el-tab-pane>
-        <el-tab-pane label="单回路监测" name="second">
+        <el-tab-pane label="单回路监测" name="second"  :key='activeName'>
           <br>
-           <loop-monitor></loop-monitor>
+           <loop-monitor v-if="key='activeName'" ></loop-monitor >
         </el-tab-pane>
       </el-tabs>
       <br>
@@ -40,7 +39,7 @@ export default {
 
   data() {
     return {
-      activeName: "second",
+      activeName: "first",
 
       value4: "请选择",
       number: 1,

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

@@ -7,27 +7,43 @@
       <div style="padding: 30px">
         <div class="frequencyTit">当前频率 50.03hZ</div>
         <div class="frequencyTit2">
-            频率偏差
-            <span>0.06%</span>
+          频率偏差
+          <span>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"></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-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 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>

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

@@ -19,12 +19,23 @@
             <el-table-column prop="name" label="进度条">
               <template #default="scope">
                 <div class="demo-progress" >
-                  <el-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>
@@ -43,13 +54,13 @@ export default {
          tableData: [
         {
           date: "10.31(kV)",
-          name: "Tom",
+          name: "有功功率",
           pointNum: 60,
           status: "warning",
         },
         {
           date: "0(kV)",
-          name: "Tom2",
+          name: "无功功率",
           pointNum: 0,
           status: "exception",
         },

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

@@ -25,13 +25,20 @@
             <el-table-column prop="name" label="进度条" width="300px">
               <template #default="scope">
                 <div class="demo-progress" style="width: 100%">
-                  <el-progress
-                    style="width: 100%"
-                    :text-inside="true"
-                    :stroke-width="14"
-                    :percentage="scope.row.pointNum"
-                    :status="scope.row.status"
-                  />
+                  <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>
@@ -50,19 +57,19 @@ export default {
       tableData: [
         {
           date: "10.31(kV)",
-          name: "Tom",
+          name: "Ua",
           pointNum: 60,
           status: "warning",
         },
         {
           date: "0(kV)",
-          name: "Tom2",
+          name: "Ub",
           pointNum: 0,
           status: "exception",
         },
         {
           date: "10.35(kV)",
-          name: "Tom",
+          name: "Uc",
           pointNum: 70,
         },
       ],

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -17,19 +17,24 @@
     <!-- 筛选end -->
 
     <el-row :gutter="20" class="mt-20">
+
       <el-col :span="6">
+
+        <!-- 评分 -->
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">
             <span>评分</span>
           </div>
-          
             <radar-chart></radar-chart>
             <div class="totalScore">总评分：40  
               <el-button type="danger">不合格</el-button>
             </div>
-        
         </div>
+          <!-- 评分 end -->
+
         <br />
+
+        <!-- 回路统计 -->
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">
             <span>回路统计</span>
@@ -38,7 +43,12 @@
             <pie-chart></pie-chart>
           </div>
         </div>
+        <!-- 回路统计 end -->
+
       </el-col>
+
+
+
       <el-col :span="18">
         <!-- 表格start -->
         <el-table