评估报告,三相不平衡分析功能模块优化

src/assets/css/index.scss

@@ -146,7 +146,7 @@ div:focus {
 
     .filter-item {
         display: flex;
-        margin-right: 30px;
+        margin-right: 20px;
         margin-bottom: 0px;
 
         >.title {
@@ -159,6 +159,10 @@ div:focus {
             margin: auto 5px auto auto
         }
     }
+
+    .prompt {
+        margin: auto 0 auto auto;
+    }
 }
 
 .ant-layout-header {

src/views/monthReport/reportModel.vue

@@ -16,12 +16,7 @@
           <el-radio v-model="headerRadio" label="1">
             同电费结算日
             <span>
-              <el-tooltip
-                class="item"
-                effect="dark"
-                content="电费结算日 : 未配置"
-                placement="top"
-              >
+              <el-tooltip class="item" effect="dark" content="电费结算日 : 未配置" placement="top">
                 <i class="el-icon-info"></i>
               </el-tooltip>
             </span>
@@ -29,24 +24,13 @@
           <el-radio v-model="headerRadio" label="2">自定义</el-radio>
           <div class="headerSelect" v-if="headerRadio == 2">
             <span>每月</span>
-            <el-select
-              v-model="headerValue"
-              placeholder="Select"
-              style="width: 70px"
-            >
-              <el-option
-                v-for="item in headerOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
+            <el-select v-model="headerValue" placeholder="Select" style="width: 70px">
+              <el-option v-for="item in headerOptions" :key="item.value" :label="item.label"
+                :value="item.value"></el-option>
             </el-select>
           </div>
           <div style="display: initial">
-            <el-checkbox
-              v-model="checked1"
-              label="是否自动发送邮件"
-            ></el-checkbox>
+            <el-checkbox v-model="checked1" label="是否自动发送邮件"></el-checkbox>
             <el-checkbox v-model="checked2" label="模板是否生效"></el-checkbox>
           </div>
           <div class="headerButton">
@@ -59,14 +43,8 @@
       <div class="modelContent">
         <div class="contentLeft">
           <div class="detail-top">报告内容</div>
-          <el-tree
-            :data="data"
-            show-checkbox
-            node-key="id"
-            :default-expanded-keys="[2, 3]"
-            :default-checked-keys="[5]"
-            :props="defaultProps"
-          />
+          <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
+            :props="defaultProps" />
         </div>
         <div class="contentCenter"></div>
         <div class="contentRight">
@@ -128,13 +106,7 @@
             <div style="display: flex">
               <div style="line-height: 30px">重要缺陷设备列表：</div>
               <div class="ant-input-group-addon">最多显示</div>
-              <el-input-number
-                v-model="defects"
-                :min="0"
-                :max="10"
-                controls-position="right"
-                @change="handleChange"
-              />
+              <el-input-number v-model="defects" :min="0" :max="10" controls-position="right" @change="handleChange" />
               <div class="ant-input-group-addon">个</div>
             </div>
           </div>
@@ -144,25 +116,13 @@
             <div style="display: flex">
               <div style="line-height: 30px">重要告警列表：</div>
               <div class="ant-input-group-addon">最多显示</div>
-              <el-input-number
-                v-model="alarm"
-                :min="0"
-                :max="10"
-                controls-position="right"
-                @change="handleChange"
-              />
+              <el-input-number v-model="alarm" :min="0" :max="10" controls-position="right" @change="handleChange" />
               <div class="ant-input-group-addon">个</div>
             </div>
             <div style="display: flex; margin-top: 10px">
               <div style="line-height: 30px">告警最多的设备列表：</div>
               <div class="ant-input-group-addon">最多显示</div>
-              <el-input-number
-                v-model="most"
-                :min="0"
-                :max="10"
-                controls-position="right"
-                @change="handleChange"
-              />
+              <el-input-number v-model="most" :min="0" :max="10" controls-position="right" @change="handleChange" />
               <div class="ant-input-group-addon">个</div>
             </div>
           </div>
@@ -172,12 +132,8 @@
             <div>
               <span>报告名称：</span>
               <el-select v-model="reportName" placeholder="" class="select">
-                <el-option
-                  v-for="item in reportOption"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
+                <el-option v-for="item in reportOption" :key="item.value" :label="item.label"
+                  :value="item.value"></el-option>
               </el-select>
             </div>
           </div>
@@ -316,14 +272,17 @@ export default defineComponent({
 .powerEquip {
   height: calc(100vh - 130px);
   min-width: 810px;
+
   .model {
     background-color: #fff;
     height: 100%;
     padding: 15px;
+
     .modelHeader {
       height: 140px;
       overflow-y: auto;
       border-bottom: 4px solid #e8e8e8;
+
       .headerTitle {
         .span {
           border-left: 3px red solid;
@@ -331,6 +290,7 @@ export default defineComponent({
           margin-right: 15px;
           font-size: 17px;
         }
+
         .goBack {
           min-height: 24px;
           padding: 0px 5px;
@@ -340,20 +300,24 @@ export default defineComponent({
       .headerContent {
         padding: 8px 10px;
         margin-top: 10px;
+
         .headerInput {
           width: 220px;
           flex-wrap: nowrap;
           margin-right: 30px;
         }
+
         .headerSelect {
           display: initial;
           margin-right: 15px;
         }
+
         .headerButton {
           margin-top: 15px;
         }
       }
     }
+
     .modelHeader::-webkit-scrollbar {
       display: none;
     }
@@ -361,9 +325,11 @@ export default defineComponent({
     .modelContent {
       height: calc(100vh - 285px);
       display: flex;
+
       .contentLeft {
         padding-top: 5px;
         width: 30%;
+
         .detail-top {
           text-align: center;
           color: #000;
@@ -374,15 +340,18 @@ export default defineComponent({
           position: relative;
         }
       }
+
       .contentCenter {
         width: 20px;
         background-color: #f0f2f5;
       }
+
       .contentRight {
         padding-left: 15px;
         padding-top: 5px;
         width: 70%;
         overflow-y: auto;
+
         .setting-header {
           height: 44px;
           line-height: 44px;
@@ -391,36 +360,44 @@ export default defineComponent({
           font-weight: 500;
           position: relative;
         }
+
         .setting-borderError {
           border: 1px solid #f5222d;
           margin-bottom: 8px;
           padding: 8px 12px;
           width: 100%;
           font-size: 14px;
+
           .setting-title {
             color: #000;
             position: relative;
+
             .setting-icon {
               font-size: 22px;
               color: #1890ff;
               position: absolute;
             }
+
             .setting-textBtn {
               color: #1890ff;
               margin-left: 12px;
               text-decoration: underline;
+
               .setting-required {
                 color: #f5222d;
                 margin-left: 2px;
               }
             }
           }
+
           .setting-error {
             color: #f5222d;
             margin: 10px 0 0 20px;
           }
+
           .setting-formItem {
             display: flex;
+
             .setting-title {
               height: 32px;
               line-height: 32px;
@@ -428,10 +405,12 @@ export default defineComponent({
             }
           }
         }
+
         .setting-card {
           padding: 0px 12px;
           width: 100%;
           font-size: 14px;
+
           .ant-input-group-addon {
             line-height: 30px;
             padding: 0 11px;
@@ -440,6 +419,7 @@ export default defineComponent({
             text-align: center;
             display: inline-table;
           }
+
           .select {
             width: 260px;
           }

src/views/monthReport/tables/deviationTable.vue

@@ -1,51 +1,20 @@
 <template>
   <div>
     <div class="basicHeader">
-      <el-button icon="el-icon-download" type="primary" @click="addModle">
+      <el-button icon="Download" type="primary" @click="addModle">
         新建模板
       </el-button>
     </div>
     <div style="margin: 0 15px">
-      <el-table
-        :data="tableData"
-        border
-        stripe
-        :header-cell-style="headClass"
-        height="42rem"
-      >
-        <el-table-column
-          prop="reportName"
-          label="报告名称"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="reportDate"
-          label="报告生成日期"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="proposal"
-          label="是否人工填写优化建议"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="mailbox"
-          label="是否自动发送邮件"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="state"
-          label="当前状态"
-          width=""
-        ></el-table-column>
+      <el-table :data="tableData" border stripe height="42rem">
+        <el-table-column prop="reportName" label="报告名称" width=""></el-table-column>
+        <el-table-column prop="reportDate" label="报告生成日期" width=""></el-table-column>
+        <el-table-column prop="proposal" label="是否人工填写优化建议" width=""></el-table-column>
+        <el-table-column prop="mailbox" label="是否自动发送邮件" width=""></el-table-column>
+        <el-table-column prop="state" label="当前状态" width=""></el-table-column>
         <el-table-column label="操作" width="100">
           <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="Update(scope.row)"
-            >
+            <el-button type="primary" size="small" @click.prevent="Update(scope.row)" link>
               编辑
             </el-button>
           </template>
@@ -54,46 +23,40 @@
     </div>
   </div>
 </template>
-<script>
-// import { useStore } from "vuex";
-import { defineComponent } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 
-export default defineComponent({
-  name: 'deviationTable',
-  components: {},
-  props: {},
-  setup(props, { emit }) {
-    props
-    const Update = (row) => {
-      console.log('', row)
-    }
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/alarmManage/index'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['modle']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const tableData = ref([
+  {
+    reportName: '05-01',
+    reportDate: 'Tom',
+    proposal: '',
+    mailbox: '',
+    state: '',
+  },
+])
 
-    const addModle = () => {
-      const params = {
-        modleBool: false,
-      }
-      emit('modle', params)
-    }
 
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
+const Update = (row) => {
+  console.log('', row)
+}
 
-    return {
-      headClass,
-      Update, //修改偏差配置事件
-      addModle, //新增模板事件
-      tableData: [
-        {
-          reportName: '05-01',
-          reportDate: 'Tom',
-          proposal: '',
-          mailbox: '',
-          state: '',
-        },
-      ],
-    }
-  },
-})
+const addModle = () => {
+  const params = {
+    modleBool: false,
+  }
+  emit('modle', params)
+}
 </script>

src/views/operManage/defectManage/dialogComponent.vue

@@ -1,318 +1,202 @@
 <template>
-  <transition name="dialog-fade">
-    <el-dialog
-      v-if="showDialog"
-      :title="dialogTitle"
-      class="dialog-component defectDialog"
-      v-model="showDialog"
-      width="640px"
-      @close="closeDialog(0)"
-    >
-      <el-form
-        ref="formInfo"
-        :model="formInfo"
-        class="demo-form-inline"
-        label-width="140px"
-        :rules="rules"
-      >
-        <el-form-item label="缺陷等级：" prop="defectLevel">
-          <el-select
-            v-model="formInfo.defectLevel"
-            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-dialog v-model="showDialog" :title="dialogTitle" class="dialog-component defectDialog" width="640px"
+    @close="closeDialog(0)">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="140px" :rules="rules">
+      <el-form-item label="缺陷等级：" prop="defectLevel">
+        <el-select v-model="form.defectLevel" 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>
+      <el-form-item label="站点：" prop="siteName">
+        <el-select v-model="form.siteName" 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>
+      <el-form-item label="设备：" prop="deviceName">
+        <el-select v-model="form.deviceName" filterable multiple 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>
+      <el-form-item label="缺陷描述：" prop="defectDes">
+        <el-input v-model="form.defectDes"></el-input>
+      </el-form-item>
+      <el-form-item label="图片" prop="delivery">
+        <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="3">
+          <i class="el-icon-plus"></i>
+          <div>
+            <!-- <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> -->
+            <span class="el-upload-list__item-actions">
+              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                <!-- <i class="el-icon-zoom-in"></i> -->
+              </span>
+              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                <i class="el-icon-delete"></i>
+              </span>
+            </span>
+          </div>
+        </el-upload>
+        <el-dialog v-model="dialogVisible">
+          <img width="100%" :src="dialogImageUrl" alt="" />
+        </el-dialog>
+      </el-form-item>
+
+      <div class="defetSubTit" @click="goShowWorkDetail()">
+        发起工单
+        <i :class="showWorkDetail ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
+        <el-icon :size="20">
+          <ArrowDown />
+        </el-icon>
+      </div>
+      <div v-if="showWorkDetail">
+        <el-form-item label="期望完成时间：" prop="achievementTime">
+          <el-date-picker v-model="form.date1" type="date" placeholder="请选择" style="width: 100%"></el-date-picker>
         </el-form-item>
-        <el-form-item label="站点：" prop="siteName">
-          <el-select
-            v-model="formInfo.siteName"
-            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 label="备注：" prop="remark">
+          <el-input v-model="form.remark" type="textarea"></el-input>
         </el-form-item>
-        <el-form-item label="设备：" prop="deviceName">
-          <el-select
-            v-model="formInfo.deviceName"
-            filterable
-            multiple
-            collapse-tags
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
+        <el-form-item label="运维班组/执行人：" prop="executor">
+          <el-select v-model="form.executor" 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>
-        <el-form-item label="缺陷描述：" prop="defectDes">
-          <el-input v-model="formInfo.defectDes"></el-input>
-        </el-form-item>
-        <el-form-item label="图片" prop="delivery">
-          <el-upload
-            action="#"
-            list-type="picture-card"
-            :auto-upload="false"
-            :limit="3"
-          >
-            <!-- slot="default" -->
-            <i class="el-icon-plus"></i>
-            <!-- :default-slot="{ file }" -->
-            <div>
-              <!-- <img
-                      class="el-upload-list__item-thumbnail"
-                      :src="file.url"
-                      alt=""
-                    /> -->
-              <span class="el-upload-list__item-actions">
-                <span
-                  class="el-upload-list__item-preview"
-                  @click="handlePictureCardPreview(file)"
-                >
-                  <!-- <i class="el-icon-zoom-in"></i> -->
-                </span>
-                <span
-                  v-if="!disabled"
-                  class="el-upload-list__item-delete"
-                  @click="handleRemove(file)"
-                >
-                  <i class="el-icon-delete"></i>
-                </span>
-              </span>
-            </div>
-          </el-upload>
-          <el-dialog v-model="dialogVisible">
-            <img width="100%" :src="dialogImageUrl" alt="" />
-          </el-dialog>
-        </el-form-item>
+      </div>
 
-        <div class="defetSubTit" @click="goShowWorkDetail()">
-          发起工单
-          <i :class="this.showWorkDetail?'el-icon-arrow-down':'el-icon-arrow-up'"></i>
-          <el-icon :size="20">
-            <ArrowDown />
-          </el-icon>
-        </div>
-        <div v-if="this.showWorkDetail">
-          <el-form-item label="期望完成时间：" prop="achievementTime">
-            <el-date-picker
-              v-model="formInfo.date1"
-              type="date"
-              placeholder="请选择"
-              style="width: 100%"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item label="备注：" prop="remark">
-            <el-input v-model="formInfo.remark" type="textarea"></el-input>
-          </el-form-item>
-          <el-form-item label="运维班组/执行人：" prop="executor">
-            <el-select
-              v-model="formInfo.executor"
-              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>
-        </div>
-
-        <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>
+      <div style="margin-top: 30px; text-align: right">
+        <el-button @click="closeDialog(0)">取消</el-button>
+        <el-button type="primary" @click="submitForm()">
+          保存
+        </el-button>
+      </div>
+    </el-form>
+  </el-dialog>
 </template>
 
-<script>
-export default {
-  name: 'DialogComponent',
-  props: {
-    dialogTitle: {
-      type: String,
-      default: '新增',
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const showDialog = ref(false)
+const dialogTitle = ref(null)
+const state = reactive({
+  form: {},
+  rules: {
+    defectLevel: [
+      { required: false, message: '请输入缺陷等级', trigger: 'blur' },
+      { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur', },
+    ],
+    deviceName: [
+      { required: true, message: '请输入设备名称', trigger: 'blur' },
+      { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur', },
+    ],
+    stationAddress: [
+      { required: true, message: '请输入台区地址', trigger: 'blur' },
+      { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur', },
+    ],
+    workexecutorType: [
+      { required: false, message: '请选择运维班组/执行人', trigger: 'blur', },
+      { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur', },
+    ],
+    achievementTime: [
+      { required: true, message: '请输入预期完成时间', trigger: 'blur' },
+      { trigger: 'blur' },
+    ],
+    remark: [
+      { required: true, message: '请输入备注', trigger: 'blur' },
+      { trigger: 'blur' },
+    ],
+    date1: [
+      { type: 'date', required: true, message: 'Please pick a date', trigger: 'change', },
+    ],
   },
-  data() {
-    return {
-      showWorkDetail:'true',
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-
-      dialogImageUrl: '',
-      dialogVisible: false,
+  showWorkDetail: true,
 
-      options: [
-        {
-          value: '选项1',
-          label: '设备一',
-        },
-        {
-          value: '选项2',
-          label: '设备二',
-        },
-        {
-          value: '选项3',
-          label: '设备三',
-        },
-        {
-          value: '选项4',
-          label: '设备四',
-        },
-        {
-          value: '选项5',
-          label: '设备五',
-        },
-      ],
-
-      rules: {
-        defectLevel: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: false, message: '请输入缺陷等级', trigger: 'blur' },
-          {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
-          },
-        ],
-        deviceName: [
-          { required: true, message: '请输入设备名称', trigger: 'blur' },
-          {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
-          },
-        ],
-        stationAddress: [
-          { required: true, message: '请输入台区地址', trigger: 'blur' },
-          {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
-          },
-        ],
-        workexecutorType: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          {
-            required: false,
-            message: '请选择运维班组/执行人',
-            trigger: 'blur',
-          },
-          {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
-          },
-        ],
-        achievementTime: [
-          { required: true, message: '请输入预期完成时间', trigger: 'blur' },
-          { trigger: 'blur' },
-        ],
-        remark: [
-          { required: true, message: '请输入备注', trigger: 'blur' },
-          { trigger: 'blur' },
-        ],
-        date1: [
-          {
-            type: 'date',
-            required: true,
-            message: 'Please pick a date',
-            trigger: 'change',
-          },
-        ],
-      },
-    }
-  },
-  methods: {
-    goShowWorkDetail(){
-      this.showWorkDetail=!this.showWorkDetail
+  dialogImageUrl: '',
+  dialogVisible: false,
 
+  options: [
+    {
+      value: '选项1',
+      label: '设备一',
     },
-    handleRemove(file, fileList) {
-      console.log(file, fileList)
+    {
+      value: '选项2',
+      label: '设备二',
     },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
+    {
+      value: '选项3',
+      label: '设备三',
     },
-
-    roleValid(rule, value, callback) {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
+    {
+      value: '选项4',
+      label: '设备四',
     },
-
-    // onSelectedDrug(event) {
-    //   this.executor = event;
-    //   console.log(this.executor);
-    // },
-    // 保存操作
-    submitForm(formName) {
-      const params = Object.assign(this.formInfo, {})
-      params
-      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)
+    {
+      value: '选项5',
+      label: '设备五',
     },
-  },
+  ],
+
+
+})
+const { form, rules, showWorkDetail, dialogImageUrl, dialogVisible, options } = toRefs(state)
+
+
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+
+  state.form = event.tableItem
+
+  showDialog.value = true
+}
+
+function goShowWorkDetail() {
+  state.showWorkDetail = !state.showWorkDetail
+
+}
+
+function handleRemove(file, fileList) {
+  console.log(file, fileList)
 }
+
+function handlePictureCardPreview(file) {
+  state.dialogImageUrl = file.url
+  state.dialogVisible = true
+}
+
+
+// 保存操作
+function submitForm() {
+  // const params = Object.assign(state.form, {})
+  // params
+
+  // proxy.$refs['formInfo'].validate((valid) => {
+  //   if (valid) {
+  //   } else {
+  //     return false
+  //   }
+  // })
+}
+
+// 关闭弹框
+function closeDialog() {
+  proxy.$refs['formInfo'].resetFields()
+  showDialog.value = false
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">

src/views/operManage/defectManage/index.vue

@@ -1,54 +1,37 @@
 <template>
   <div class="app-container">
     <!-- 筛选start -->
-    <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-          <a class="" style="margin-right: 30px">缺陷管理</a>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()">
-            新增
-          </el-button>
-        </div>
+    <div class="filter-container mb-20">
+      <el-button icon="Plus" type="success" @click="addItem()">
+        新增
+      </el-button>
+    </div>
 
-        <div style="margin-top: 20px">
-          <div class="filter-item">
-            站点:
-            <el-select
-              v-model="defectNo"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-              <el-option label="站点1" value="1"></el-option>
-              <el-option label="站点2" value="2"></el-option>
-            </el-select>
-          </div>
-          <div class="filter-item">
-            缺陷等级:
-            <el-select
-              v-model="defectLevel"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-              <el-option label="缺陷等级1" value="1"></el-option>
-              <el-option label="缺陷等级2" value="2"></el-option>
-            </el-select>
-          </div>
-          <div class="filter-item">
-            提交人:
-            <el-select
-              v-model="submiter"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-              <el-option label="提交人1" value="1"></el-option>
-              <el-option label="提交人2" value="2"></el-option>
-            </el-select>
-          </div>
-          <el-button type="primary" icon="el-icon-search" class="search-button">
-            搜索
-          </el-button>
-        </div>
+    <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="defectNo" placeholder="请选择" style="width: 200px">
+          <el-option label="站点1" value="1"></el-option>
+          <el-option label="站点2" value="2"></el-option>
+        </el-select>
       </div>
+      <div class="filter-item">
+        <div class="title">缺陷等级：</div>
+        <el-select v-model="defectLevel" placeholder="请选择" style="width: 200px">
+          <el-option label="缺陷等级1" value="1"></el-option>
+          <el-option label="缺陷等级2" value="2"></el-option>
+        </el-select>
+      </div>
+      <div class="filter-item">
+        <div class="title">提交人：</div>
+        <el-select v-model="submiter" placeholder="请选择" style="width: 200px">
+          <el-option label="提交人1" value="1"></el-option>
+          <el-option label="提交人2" value="2"></el-option>
+        </el-select>
+      </div>
+      <el-button type="primary" icon="Search" class="search-button">
+        搜索
+      </el-button>
 
       <!-- <div class="right">
         <el-button type="primary">导出</el-button>
@@ -57,83 +40,41 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
-      <el-table-column
-        prop="defectNo"
-        label="缺陷编号"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="defectDes"
-        label="缺陷描述"
-        width=""
-      ></el-table-column>
+    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }" :cell-style="cellStyle">
+      <el-table-column prop="defectNo" label="缺陷编号" width=""></el-table-column>
+      <el-table-column prop="defectDes" label="缺陷描述" width=""></el-table-column>
       <el-table-column label="照片" width="">
         <template #default="scope">
           <!-- <img src="@/assets/images/logo.png" width="40" height="40" alt="" /> -->
           <img :src="scope.row.imgUrl" width="26" height="26" />
-         
+
         </template>
       </el-table-column>
-      <el-table-column
-        prop="defectLevel"
-        label="缺陷等级"
-        width=""
-      ></el-table-column>
+      <el-table-column prop="defectLevel" label="缺陷等级" width=""></el-table-column>
       <el-table-column prop="siteName" label="站点" width=""></el-table-column>
       <el-table-column prop="status" label="状态" width="">
         <template #default="scope">
-          <span
-            :style="{
-              color:
-                scope.row.status == '已执行'
-                  ? '#8DCF6E'
-                  : scope.row.status == '未执行'
+          <span :style="{
+            color:
+              scope.row.status == '已执行'
+                ? '#8DCF6E'
+                : scope.row.status == '未执行'
                   ? '#FF747B'
                   : '#5c88fa',
-            }"
-          >
+          }">
             {{ scope.row.status }}
           </span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="submitTime"
-        label="提交时间"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="submiter"
-        label="提交人"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="completionTime"
-        label="完成时间"
-        width=""
-      ></el-table-column>
+      <el-table-column prop="submitTime" label="提交时间" width=""></el-table-column>
+      <el-table-column prop="submiter" label="提交人" width=""></el-table-column>
+      <el-table-column prop="completionTime" label="完成时间" width=""></el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
-          <el-button
-            @click="addItem()"
-            type="text"
-            size="small"
-            class="delete-text"
-          >
+          <el-button type="primary" size="small" @click="addItem()" link>
             新建工单
           </el-button>
-
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-          >
+          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)" link>
             编辑
           </el-button>
         </template>
@@ -143,152 +84,106 @@
 
     <!-- 分页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>
+      <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>
+    <dialog-component ref="dialogComponent"></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
 import DialogComponent from './dialogComponent'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const router = useRouter();
+const props = defineProps({
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  currentPage4: 4,
+  submiter: '',
+  defectNo: '',
+  defectLevel: '',
+  tableData: [
+    {
+      defectNo: 'cszd1',
+      defectDes: '电缆孔洞 ',
+      photo: '照片图片',
+      defectLevel: '一级',
+      siteName: '测试站点a',
+      status: '未执行',
+      submitTime: '2021-09-27 14:38:34',
+      submiter: '张三',
+      completionTime: '2021-09-27 14:38:34',
+      imgUrl: require('@/assets/images/logo.png'),
+    },
+  ],
+})
+const { currentPage4, submiter, defectNo, defectLevel, tableData } = toRefs(state)
 
-export default {
-  name: 'VariableList',
-
-  components: { DialogComponent },
-
-  data() {
-    return {
-      currentPage4: 4,
-      showDialog: false,
-      submiter: '',
+// 添加操作
+function addItem() {
+  proxy.$refs['dialogComponent'].openDialog({
+    dialogTitle: "新增",
+    tableItem: {
+      id: '',
+      stationName: '',
+      xh: '',
       defectNo: '',
-      defectLevel: '',
-      tableData: [
-        {
-          defectNo: 'cszd1',
-          defectDes: '电缆孔洞 ',
-          photo: '照片图片',
-          defectLevel: '一级',
-          siteName: '测试站点a',
-          status: '未执行',
-          submitTime: '2021-09-27 14:38:34',
-          submiter: '张三',
-          completionTime: '2021-09-27 14:38:34',
-          imgUrl: require('@/assets/images/logo.png'),
-        },
-        {
-          defectNo: 'cszd1',
-          defectDes: '电缆孔洞 ',
-          photo: '照片图片',
-          defectLevel: '一级',
-          siteName: '测试站点a',
-          status: '已执行',
-          submitTime: '2021-09-27 14:38:34',
-          submiter: '张三',
-          completionTime: '2021-09-27 14:38:34',
-          imgUrl: require('@/assets/images/img.jpg'),
-        },
-       
-      ],
+      siteList: [],
+      done: '',
+      guaZai: '',
+      checked: true,
     }
-  },
-  methods: {
-    //处理状态状态值变色
-    cellStyle(row, column, rowIndex, columnIndex) {
-      console.log('rowIndex', row, column, rowIndex, columnIndex)
-      console.log(row.row.status)
-      console.log(row)
-      if (row.column.status == '未执行') {
-        return 'color:#FF747B'
-      }
-      if (row.column.label == '已执行') {
-        return 'color:#8DCF6E'
-      }
-    },
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`)
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`)
-    },
+  })
+}
+// 编辑操作
+function editRow(row) {
+  proxy.$refs['dialogComponent'].openDialog({
+    dialogTitle: "编辑",
+    tableItem: row
+  })
+}
 
-    // 表头样式设置
-    goVariableList() {
-      // 跳转至订单列表页面传参
-      this.$router.push({
-        path: '../siteManage/variableList/index.vue',
-      })
-      // this.$router.push({ name:'variableList'})
-    },
-    headClass() {
-      return 'background:#FAFAFA;'
-    },
+//删除操作
+function handleDelete(index, row) {
+  console.log(index, row)
+  alert(index)
+}
 
-    // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: '',
-        stationName: '',
-        xh: '',
-        defectNo: '',
-        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
-    },
+function handleSizeChange(val) {
+  console.log(`每页 ${val} 条`)
+}
+function handleCurrentChange(val) {
+  console.log(`当前页: ${val}`)
+}
 
-    //删除操作
-    handleDelete(index, row) {
-      console.log(index, row)
-      alert(index)
-    },
-  },
+//处理状态状态值变色
+function cellStyle(row, column, rowIndex, columnIndex) {
+  if (row.column.status == '未执行') {
+    return { color: '#FF747B' }
+  }
+  if (row.column.label == '已执行') {
+    return { color: '#8DCF6E' }
+  }
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/operManage/siteAchives/index.vue

@@ -1,73 +1,44 @@
 <template>
   <div class="app-container">
     <!-- 筛选start -->
-    <div class="filter-container mb-10">
-      <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 class="filter-container mb-20">
+      <div>
+        <span class="" style="margin-right: 30px">现场档案列表</span>
+        <el-button icon="Plus" type="success" @click="addItem()">新增</el-button>
+      </div>
+    </div>
+    <div class="filter-container mb-20">
+      <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="Search" class="search-button">搜索</el-button>
 
-        <div style="margin-top: 20px">
+      <el-button type="primary">导出</el-button>
+    </div>
 
-          <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 :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="">
@@ -84,19 +55,9 @@
       </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
-          >
+          <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>
@@ -104,38 +65,21 @@
 
     <!-- 分页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 @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>
+    <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>
+    <!--弹框组件开始-----------------------start-->
+    <check-video v-if="showDialog" ref="checkVideo" :dialog-title="dialogTitle" :item-info="tableItem"
+      @closeDialog="closeDialog"></check-video>
     <!--视频弹框组件开始-----------------------end-->
 
 
@@ -149,7 +93,7 @@ import checkVideo from "./checkVideo";
 export default {
   name: "VariableList",
 
-  components: { DialogComponent,checkVideo },
+  components: { DialogComponent, checkVideo },
 
   data() {
     return {
@@ -163,7 +107,7 @@ export default {
       region: "",
       tableData: [
         {
-           xh: "1",
+          xh: "1",
           siteName: "测试站点1",
           siteCode: "cszd1",
           siteRoute: "变线1",
@@ -207,7 +151,7 @@ export default {
           updataTime: "2021-09-22 18:22:22",
           defect: "2",
         },
-       
+
       ],
     };
   },
@@ -236,8 +180,8 @@ export default {
         siteList: [],
         done: "",
         guaZai: "",
-        checked:true,
-        resource:''
+        checked: true,
+        resource: ''
       };
       this.dialogTitle = "现场档案详情";
       this.showDialog = true;
@@ -286,10 +230,9 @@ export default {
       this.showDialog = false;
     },
 
-   
+
   },
 };
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/operManage/workManage/index.vue

@@ -13,11 +13,7 @@
 
         <div class="filter-item">
           工单来源:
-          <el-select
-            v-model="workFrom"
-            placeholder="请选择"
-            style="width: 200px"
-          >
+          <el-select v-model="workFrom" placeholder="请选择" style="width: 200px">
             <el-option label="来源一" value="1"></el-option>
             <el-option label="来源二" value="2"></el-option>
           </el-select>
@@ -25,11 +21,7 @@
 
         <div class="filter-item">
           当前处理人:
-          <el-select
-            v-model="dealWorker"
-            placeholder="请选择"
-            style="width: 200px"
-          >
+          <el-select v-model="dealWorker" placeholder="请选择" style="width: 200px">
             <el-option label="处理人一" value="1"></el-option>
             <el-option label="处理人二" value="2"></el-option>
           </el-select>
@@ -48,46 +40,22 @@
 
     <!-- tab切换 -->
     <div class="tab-section">
-      <el-button
-        class="search-button timeTab"
-        @click="num2 = 0"
-        :type="num2 == 0 ? 'primary' : ''"
-      >
+      <el-button class="search-button timeTab" @click="num2 = 0" :type="num2 == 0 ? 'primary' : ''">
         待抢单(0)
       </el-button>
-      <el-button
-        class="search-button timeTab"
-        @click="num2 = 1"
-        :type="num2 == 1 ? 'primary' : ''"
-      >
+      <el-button class="search-button timeTab" @click="num2 = 1" :type="num2 == 1 ? 'primary' : ''">
         待指派(0)
       </el-button>
-      <el-button
-        class="search-button timeTab"
-        @click="num2 = 2"
-        :type="num2 == 2 ? 'primary' : ''"
-      >
+      <el-button class="search-button timeTab" @click="num2 = 2" :type="num2 == 2 ? 'primary' : ''">
         待接单(0)
       </el-button>
-      <el-button
-        class="search-button timeTab"
-        @click="num2 = 3"
-        :type="num2 == 3 ? 'primary' : ''"
-      >
+      <el-button class="search-button timeTab" @click="num2 = 3" :type="num2 == 3 ? 'primary' : ''">
         待处理(0)
       </el-button>
-      <el-button
-        class="search-button timeTab"
-        @click="num2 = 4"
-        :type="num2 == 4 ? 'primary' : ''"
-      >
+      <el-button class="search-button timeTab" @click="num2 = 4" :type="num2 == 4 ? 'primary' : ''">
         待关单(0)
       </el-button>
-      <el-button
-        class="search-button timeTab"
-        @click="num2 = 5"
-        :type="num2 == 5 ? 'primary' : ''"
-      >
+      <el-button class="search-button timeTab" @click="num2 = 5" :type="num2 == 5 ? 'primary' : ''">
         已完成(0)
       </el-button>
       <el-checkbox v-model="checked2">显示我的代办</el-checkbox>
@@ -96,81 +64,41 @@
     <!-- tab切换end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
-      <el-table-column
-        fixed
-        prop="workCode"
-        label="编号"
-        width="260px"
-      ></el-table-column>
-      <el-table-column
-        prop="workDes"
-        label="工作描述"
-        width=""
-      ></el-table-column>
-       <el-table-column prop="workType" label="工单类型" width="">
+    <el-table :data="tableData" border stripe :header-cell-style="headClass" :cell-style="cellStyle">
+      <el-table-column fixed prop="workCode" label="编号" width="260px"></el-table-column>
+      <el-table-column prop="workDes" label="工作描述" width=""></el-table-column>
+      <el-table-column prop="workType" label="工单类型" width="">
         <template #default="scope">
           <div>
             <img src="@/assets/images/jianxiu.svg" alt="" class="jianxiu">
-             {{ scope.row.workType }}
+            {{ scope.row.workType }}
           </div>
         </template>
       </el-table-column>
 
-      <el-table-column
-        prop="stationName"
-        label="站点"
-        width=""
-      ></el-table-column>
-     
-      <el-table-column
-        prop="status"
-        label="状态"
-        width="350"
-      >
-         <template #default="scope">
+      <el-table-column prop="stationName" label="站点" width=""></el-table-column>
+
+      <el-table-column prop="status" label="状态" width="350">
+        <template #default="scope">
           <div>
-             {{ scope.row.status }}
-             <span class="workStatusBtn">超时</span>
-             <!-- <el-button size="mini" round>超时</el-button> -->
+            {{ scope.row.status }}
+            <span class="workStatusBtn">超时</span>
+            <!-- <el-button size="mini" round>超时</el-button> -->
           </div>
         </template>
       </el-table-column>
 
-      <el-table-column
-        prop="createTime"
-        label="创建时间"
-        width=""
-      ></el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width=""></el-table-column>
+
+      <el-table-column prop="handleMan" label="当前处理人" width=""></el-table-column>
 
-      <el-table-column
-        prop="handleMan"
-        label="当前处理人"
-        width=""
-      ></el-table-column>
 
-      
       <el-table-column fixed="right" label="操作" width="">
         <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-          >
+          <el-button type="text" size="small" @click.prevent="editRow(scope.row)">
             编辑
           </el-button>
-          <el-button
-            @click="goDhandlePage()"
-            type="text"
-            size="small"
-            class="delete-text"
-          >
+          <el-button @click="goDhandlePage()" type="text" size="small" class="delete-text">
             待您处理
           </el-button>
         </template>
@@ -179,17 +107,11 @@
     <!-- 表格end -->
 
     <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
-      @closeDialog="closeDialog"
-    ></dialog-component>
+    <dialog-component v-if="showDialog" ref="dialogComponent" :dialog-title="dialogTitle" :item-info="tableItem"
+      @closeDialog="closeDialog"></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
-  <handle-detail :pageShow="pageShow" @func="getMsgFormSon"  v-else></handle-detail>
- 
+  <handle-detail :pageShow="pageShow" @func="getMsgFormSon" v-else></handle-detail>
 </template>
 
 <script>
@@ -204,11 +126,11 @@ export default {
   //   ...mapGetters(["name"]),
   // },
 
-  components: { DialogComponent,HandleDetail },
+  components: { DialogComponent, HandleDetail },
 
   data() {
     return {
-      pageShow:true,
+      pageShow: true,
       region: '',
       dealWorker: '',
       workFrom: '',
@@ -224,19 +146,19 @@ export default {
           stationName: '	万众实业变电站',
           status: '待指派',
           createTime: '10',
-           handleMan: '运维管理员',
+          handleMan: '运维管理员',
         },
-        
+
       ],
     }
   },
   methods: {
-    getMsgFormSon(){
+    getMsgFormSon() {
       this.pageShow = !this.pageShow
     },
 
-    goDhandlePage(){
-      this.pageShow=!this.pageShow
+    goDhandlePage() {
+      this.pageShow = !this.pageShow
     },
     // 表头样式设置
     headClass() {
@@ -246,7 +168,7 @@ export default {
     //自定义列样式
     cellStyle({ row, column, rowIndex, columnIndex }) {
       row, column, rowIndex
-      if (columnIndex === 2||columnIndex === 0) {
+      if (columnIndex === 2 || columnIndex === 0) {
         return `color:#89b7eb;`
       } else {
         return ''
@@ -298,5 +220,4 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/operManage/workStatistics/index.vue

@@ -3,33 +3,21 @@
     <!-- 筛选start -->
     <div class="filter-container mb-10">
       <div class="left">
-       <div class="filter-item">
-            时间：
-            <el-date-picker
-              v-model="value1"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width:auto"
-            >
-            </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>
+        <div class="filter-item">
+          时间：
+          <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+            end-placeholder="结束日期" style="width:auto">
+          </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
-        >
+        <el-button type="primary" icon="el-icon-search" class="search-button">搜索</el-button>
       </div>
 
       <div class="right">
@@ -39,13 +27,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
+    <el-table :data="tableData" border stripe :header-cell-style="headClass" :cell-style="cellStyle">
       <el-table-column fixed prop="workerNum" label="员工账号" width="">
       </el-table-column>
       <el-table-column prop="workerName" label="员工名称" width="">
@@ -66,8 +48,8 @@
       <el-table-column prop="evaluation" label="客户评价" width="">
       </el-table-column>
 
-    
-    
+
+
     </el-table>
     <!-- 表格end -->
   </div>
@@ -88,47 +70,47 @@ export default {
   data() {
     return {
       showDialog: false,
-       value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
       region: "",
       tableData: [
         {
           workerNum: "8081",
           workerName: "张三",
           orderQuality: "0",
-          completedQuantity:'0',
-          incomplete:'0',
-          responseTime:'0',
-          handlingTime:'0',
+          completedQuantity: '0',
+          incomplete: '0',
+          responseTime: '0',
+          handlingTime: '0',
           evaluation: "",
         },
-       {
+        {
           workerNum: "8081",
           workerName: "张三",
           orderQuality: "0",
-          completedQuantity:'0',
-          incomplete:'0',
-          responseTime:'0',
-          handlingTime:'0',
+          completedQuantity: '0',
+          incomplete: '0',
+          responseTime: '0',
+          handlingTime: '0',
           evaluation: "",
         },
         {
           workerNum: "8081",
           workerName: "张三",
           orderQuality: "0",
-          completedQuantity:'0',
-          incomplete:'0',
-          responseTime:'0',
-          handlingTime:'0',
+          completedQuantity: '0',
+          incomplete: '0',
+          responseTime: '0',
+          handlingTime: '0',
           evaluation: "",
         },
         {
           workerNum: "8081",
           workerName: "张三",
           orderQuality: "0",
-          completedQuantity:'0',
-          incomplete:'0',
-          responseTime:'0',
-          handlingTime:'0',
+          completedQuantity: '0',
+          incomplete: '0',
+          responseTime: '0',
+          handlingTime: '0',
           evaluation: "",
         },
       ],
@@ -152,5 +134,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,214 @@
+<template>
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px" @close="closeDialog(0)">
+    <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>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const router = useRouter();
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const activeName = ref('first')
+
+
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+  dialogVisible.value = true
+}
+
+// 关闭弹框
+function closeDialog() {
+  dialogVisible.value = false
+}
+
+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
+    }
+  })
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</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/asseReport/index.vue

@@ -1,87 +1,64 @@
 <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>
-          <score-report :activeName="activeName"></score-report>
-       
-        </el-tab-pane>
-        <el-tab-pane label="单回路报告" name="second">
-          <br>
-           <loop-report :activeName="activeName"></loop-report>
-        </el-tab-pane>
-      </el-tabs>
-      <br>
-
-    <!-- tab切换 end -->
+  <div class="app-container assePage" style="padding: 0">
+    <el-tabs v-model="activeName" type="card">
+      <el-tab-pane label="评分报告" name="first">
+        <score-report :activeName="activeName"></score-report>
+      </el-tab-pane>
+      <el-tab-pane label="单回路报告" name="second">
+        <loop-report :activeName="activeName"></loop-report>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
 import loopReport from "./loopReport";
-import scoreReport from "./scoreReport";
-
-
-export default {
-  name: "VariableList",
-  components: {
-    loopReport,
-    scoreReport,
-
-  },
-
-  data() {
-    return {
-      activeName: "first",
-
-      value4: "请选择",
-      number: 1,
-      measurType: 1,
-      select: 1,
-      currentPage4: 4,
-      showDialog: false,
-      tabPosition: "one",
-      input: "",
-      region: "",
-    };
-  },
-  methods: {},
-};
+import scoreReport from "./scoreReport/index.vue";
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  activeName: "first",
+})
+const { activeName } = toRefs(state)
 </script>
 
 <style lang="scss" scoped>
+:deep() {
+  .app-container>.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;
+  }
 
-</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;
-}
-.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;
+  .el-tabs--card>.el-tabs__header .el-tabs__item,
+  .el-tabs--card>.el-tabs__header .el-tabs__nav {
+    border: none;
+  }
 }
 </style>
+<style lang="scss"></style>

src/views/powerQuality/asseReport/loopReport.vue

@@ -1,52 +1,43 @@
 <template>
   <div>
     <!-- 筛选start -->
-    <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-          <div class="filter-item">
-            选择站点:
-            <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
-              @change="linkDevice()" :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>
-
-          <div class="filter-item">
-            日期：
-            <!-- <el-date-picker
-              v-model="dateTime"
-              type="dates"
-              placeholder="请选择"
-              style="width: 200px"
-            ></el-date-picker> -->
+    <div class="filter-container mb-20" style="justify-content: left; white-space: nowrap;">
 
-            <el-date-picker v-model="dateTime" placeholder="请选择" style="width: 150px; margin-left: 20px"
-              :clearable="false" :editable="false" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
-          </div>
+      <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="SingleLoopReportData()"
-            :disabled="store.state.authorities.indexOf('查询') == -1">
-            搜索
-          </el-button>
-        </div>
+      <div class="filter-item">
+        <div class="title">日期：</div>
+        <el-date-picker v-model="dateTime" placeholder="请选择" style="width: 150px; margin-left: 20px" :clearable="false"
+          :editable="false" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
       </div>
-      <div class="right descIcon" @click="descripDialog()">
-        <img src="@/assets/images/descIcon.png" alt="" />
-        指标说明
+
+      <el-button type="primary" class="search-button" @click="SingleLoopReportData()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
+
+      <div class="filter-item prompt cursor-pointer" @click="openDescripDialog()">
+        <img class="image" src="@/assets/images/descIcon.png" alt="" />
+        <div class="title">指标说明</div>
       </div>
     </div>
-    <!-- 筛选end -->
 
+
+    <!-- 筛选end -->
     <el-row :gutter="20">
       <el-col :md="24" :lg="14">
         <div class="grid-content bg-purple">
@@ -81,10 +72,10 @@
                   </el-col>
                 </el-row>
                 <el-button class="banlanceBtn" round :type="getData.uaStatus == true
-                    ? 'primary'
-                    : getData.uaStatus == false
-                      ? 'danger'
-                      : 'warning'
+                  ? 'primary'
+                  : getData.uaStatus == false
+                    ? 'danger'
+                    : 'warning'
                   ">
                   {{
                     getData.uaStatus == true
@@ -157,10 +148,10 @@
                   </el-col>
                 </el-row>
                 <el-button class="banlanceBtn" round :type="getData.ubStatus == true
-                    ? 'primary'
-                    : getData.ubStatus == false
-                      ? 'danger'
-                      : 'warning'
+                  ? 'primary'
+                  : getData.ubStatus == false
+                    ? 'danger'
+                    : 'warning'
                   ">
                   {{
                     getData.ubStatus == true
@@ -233,10 +224,10 @@
                   </el-col>
                 </el-row>
                 <el-button class="banlanceBtn" round :type="getData.ucStatus == true
-                    ? 'primary'
-                    : getData.ucStatus == false
-                      ? 'danger'
-                      : 'warning'
+                  ? 'primary'
+                  : getData.ucStatus == false
+                    ? 'danger'
+                    : 'warning'
                   ">
                   {{
                     getData.ucStatus == true
@@ -321,10 +312,10 @@
                   </el-col>
                 </el-row>
                 <el-button class="banlanceBtn" round :type="getData.fstatus == true
-                    ? 'primary'
-                    : getData.fstatus == false
-                      ? 'danger'
-                      : 'warning'
+                  ? 'primary'
+                  : getData.fstatus == false
+                    ? 'danger'
+                    : 'warning'
                   ">
                   {{
                     getData.fstatus == true
@@ -403,10 +394,10 @@
                   </el-col>
                 </el-row>
                 <el-button class="banlanceBtn" round :type="getData.cosStatus == true
-                    ? 'primary'
-                    : getData.cosStatus == false
-                      ? 'danger'
-                      : 'warning'
+                  ? 'primary'
+                  : getData.cosStatus == false
+                    ? 'danger'
+                    : 'warning'
                   ">
                   {{
                     getData.cosStatus == true
@@ -442,74 +433,12 @@
               <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">B相电流谐波畸变率</div>
                 <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
-                <!-- <el-row :gutter="20" style="padding: 0 20px">
-                  <el-col :span="12">
-                    <div class="grid-content bg-purple assSmallbox">
-                      <div class="assNum">0/128</div>
-                      <div class="assTxt">超限数/测点数</div>
-                    </div>
-                  </el-col>
-                  <el-col :span="12">
-                    <div class="grid-content bg-purple assSmallbox">
-                      <div class="assNum greenRate">100%</div>
-                      <div class="assTxt">合格率</div>
-                    </div>
-                  </el-col>
-                </el-row>
-                <el-button class="banlanceBtn" round type="danger">
-                  不合格
-                </el-button>
-                <ul>
-                  <li>
-                    <div>最大值：234.87V(6.76%)</div>
-                    <span class="overLimit">超限</span>
-                  </li>
-                  <li>
-                    <div>最小值：234.87V(6.76%)</div>
-                    <span>未超限</span>
-                  </li>
-                  <li>
-                    <div>平均值：234.87V(6.76%)</div>
-                    <span>未超限</span>
-                  </li>
-                </ul> -->
               </div>
             </el-col>
             <el-col :md="24" :lg="8">
               <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">C相电流谐波畸变率</div>
                 <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
-                <!-- <el-row :gutter="20" style="padding: 0 20px">
-                  <el-col :span="12">
-                    <div class="grid-content bg-purple assSmallbox">
-                      <div class="assNum">0/128</div>
-                      <div class="assTxt">超限数/测点数</div>
-                    </div>
-                  </el-col>
-                  <el-col :span="12">
-                    <div class="grid-content bg-purple assSmallbox">
-                      <div class="assNum greenRate">100%</div>
-                      <div class="assTxt">合格率</div>
-                    </div>
-                  </el-col>
-                </el-row>
-                <el-button class="banlanceBtn" round type="primary">
-                  合格
-                </el-button>
-                <ul>
-                  <li>
-                    <div>最大值：234.87V(6.76%)</div>
-                    <span class="overLimit">超限</span>
-                  </li>
-                  <li>
-                    <div>最小值：234.87V(6.76%)</div>
-                    <span>未超限</span>
-                  </li>
-                  <li>
-                    <div>平均值：234.87V(6.76%)</div>
-                    <span>未超限</span>
-                  </li>
-                </ul> -->
               </div>
             </el-col>
           </el-row>
@@ -548,10 +477,10 @@
                   </el-col>
                 </el-row>
                 <el-button class="banlanceBtn" round :type="getData.elBalunStatus == true
-                    ? 'primary'
-                    : getData.elBalunStatus == false
-                      ? 'danger'
-                      : 'warning'
+                  ? 'primary'
+                  : getData.elBalunStatus == false
+                    ? 'danger'
+                    : 'warning'
                   ">
                   {{
                     getData.elBalunStatus == true
@@ -640,10 +569,10 @@
                   </el-col>
                 </el-row>
                 <el-button class="banlanceBtn" round :type="getData.vtBalunStatus == true
-                    ? 'primary'
-                    : getData.vtBalunStatus == false
-                      ? 'danger'
-                      : 'warning'
+                  ? 'primary'
+                  : getData.vtBalunStatus == false
+                    ? 'danger'
+                    : 'warning'
                   ">
                   {{
                     getData.vtBalunStatus == true
@@ -712,132 +641,104 @@
     </el-row>
 
     <!--指标说明弹框组件开始-----------------------start-->
-    <descrip-dialog @closeDialog="closeDialog" :flag="showDialog2" class="descripDialog"></descrip-dialog>
+    <descrip-dialog ref="descripDialogRef"></descrip-dialog>
     <!--指标说明弹框组件结束-----------------------end-->
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/powerQuality/loopReport.js'
-import descripDialog from './scoreReportComponent/descripDialog'
-import { ElMessage } from 'element-plus'
-export default defineComponent({
-  name: 'LoopReport',
-  components: {
-    descripDialog,
-  },
-  props: {
-    activeName: String,
-  },
-  setup(props) {
-    const store = useStore()
-    const loading = ref(false)
-    const getData = ref({})
-    const showDialog2 = ref(false)
-
-    const deviceList = ref([])
-    const deviceCode = ref('')
-    const dateTime = ref(new Date())
-    const dialogTitle = ref('')
+/*----------------------------------组件引入-----------------------------------*/
+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 dateTime = ref(new Date())
 
-    function linkDevice() {
-      deviceSelect()
-    }
+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 deviceSelect() {
+  api.deviceListOne({ siteId: store.state.siteId }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      deviceList.value = requset.data
+      deviceCode.value = requset.data[0] ? requset.data[0].deviceCode : ''
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
+}
 
-    //单回路主页面请求
-    function SingleLoopReportData() {
-      loading.value = true
-      store.commit('getNowFormatDate', dateTime.value)
-      //  time:store.state.dateList,
-      // time:'2021-11-01'
-      api
-        .SingleLoopReportData({
-          deviceCode: deviceCode.value,
-          time: store.state.dateList,
-          type: 1,
-        })
-        .then((requset) => {
-          loading.value = false
-          if (requset.status === 'SUCCESS') {
-            // console.log('requset.data.uaStatus')
-            // console.log(requset.data.uaStatus)
-
-            if (requset.data == null) {
-              ElMessage.warning('暂无数据')
-            } else {
-              getData.value = requset.data
+//单回路主页面请求
+function SingleLoopReportData() {
+  loading.value = true
+  store.commit('getNowFormatDate', dateTime.value)
 
-            }
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-    // 查看指标说明
-    const descripDialog = () => {
-      dialogTitle.value = '指标说明'
-      showDialog2.value = true
-    }
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog2.value = false
-    }
+  api
+    .SingleLoopReportData({
+      deviceCode: deviceCode.value,
+      time: store.state.dateList,
+      type: 1,
+    })
+    .then((requset) => {
+      loading.value = false
+      if (requset.status === 'SUCCESS') {
+        if (requset.data == null) {
+          ElMessage.warning('暂无数据')
+        } else {
+          getData.value = requset.data
 
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        if (newVal == 'second') {
-          // getData.value={}
-          deviceSelect()
-          setTimeout(function () {
-            SingleLoopReportData()
-          }, 1000)
         }
+      } else {
+        ElMessage.error(requset.msg)
       }
-    )
+    })
+}
 
-    onMounted(() => {
+// 查看指标说明
+function openDescripDialog() {
+  proxy.$refs['descripDialogRef'].openDialog({
+    dialogTitle: '指标说明'
+  })
+}
+
+watch(
+  () => props.activeName,
+  (newVal) => {
+    if (newVal == 'second') {
+      // getData.value={}
       deviceSelect()
-    })
-    return {
-      store,
-      deviceList,
-      deviceCode,
-      linkDevice,
-      deviceSelect,
-      SingleLoopReportData,
-      dateTime,
-      region: '',
-      getData,
-      closeDialog,
-      showDialog2,
-      descripDialog,
-      dialogTitle,
-      loading
+      setTimeout(function () {
+        SingleLoopReportData()
+      }, 1000)
     }
-  },
+  }
+)
+
+onMounted(() => {
+  deviceSelect()
 })
 </script>
  
 <style scoped lang="scss">
-.el-button {
-  cursor: default !important;
-}
-
 .el-row {
   margin-bottom: 20px;
 
@@ -849,32 +750,4 @@ export default defineComponent({
 .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/asseReport/scoreReport.vue

@@ -1,711 +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
-              :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>
-
-          <el-date-picker
-            v-model="dateTime"
-            :type="dateType"
-            placeholder="请选择"
-            style="width: 150px; margin-left: 20px"
-            :clearable="false"
-            :editable="false"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          ></el-date-picker>
-
-          <el-button
-            type="primary"
-            class="search-button"
-            @click="evaluationReport()"
-            :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">
-      <el-col :md="24" :lg="7">
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>评分</span>
-          </div>
-
-          <radar-chart :getTableData="getData[0]" v-if="getData[0]" v-loading="loading"></radar-chart>
-          <div class="totalScore">
-            总评分：{{ getData[0].score?getData[0].score:0 }}
-            <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>
-        <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>
-      </el-col>
-      <el-col :md="24" :lg="17">
-        <!-- 表格start -->
-        <el-table
-          :data="getData"
-          style="width: 100%"
-          :header-cell-style="headCellStyle"
-          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')">
-                <el-button
-                  size="mini"
-                  round
-                  :type="scope.row.cosQ ? 'success' : 'danger'"
-                  :class="flag?'':'defaultCursor'"
-                >
-                  {{ scope.row.cosQ ? '合格' : '不合格' }}
-                </el-button>
-              </div>
-            </template>
-          </el-table-column>
-
-          <!-- <el-table-column label="不平衡度">
-            <el-table-column label="电流" width="">
-              <template #default="scope">
-                <el-button size="mini" round type="danger">
-                  {{ scope.row.dianLiu }}
-                </el-button>
-              </template>
-            </el-table-column>
-            <el-table-column label="电压">
-              <template #default="scope">
-                <el-button size="mini" round type="success">
-                  {{ scope.row.dianYa }}
-                </el-button>
-              </template>
-            </el-table-column>
-          </el-table-column> -->
-
-          <el-table-column label="不平衡度">
-            <el-table-column label="电流" width="" align="center">
-              <template #default="scope">
-                <div @click="oneClick('elBalun')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.elBalunQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.elBalunQ ? '合格' : '不合格' }}
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column label="电压" align="center">
-              <template #default="scope">
-                <div @click="oneClick('vtBalun')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.vtBalunQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.vtBalunQ ? '合格' : '不合格' }}
-                  </el-button>
-                </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')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.uaQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.uaQ ? '合格' : '不合格' }}
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('ub')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.ubQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.ubQ ? '合格' : '不合格' }}
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('uc')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.ucQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.ucQ ? '合格' : '不合格' }}
-                  </el-button>
-                </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')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.iaLoadQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.iaLoadQ ? '合格' : '不合格' }}
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="B相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('ibLoad')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.ibLoadQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.ibLoadQ ? '合格' : '不合格' }}
-                  </el-button>
-                </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="city" label="C相" align="center">
-              <template #default="scope">
-                <div @click="oneClick('icLoad')">
-                  <el-button
-                    size="mini"
-                    round
-                    :type="scope.row.icLoadQ ? 'success' : 'danger'"
-                    :class="flag?'':'defaultCursor'"
-                  >
-                    {{ scope.row.icLoadQ ? '合格' : '不合格' }}
-                  </el-button>
-                </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'
-                "
-               class="defaultCursor"
-              >
-                {{ 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"
-   
-    ></dialog-chartOne>
-    <!--弹框组件结束-----------------------end-->
-
-    <!--指标说明弹框组件开始-----------------------start-->
-    <descrip-dialog
-      :dialogTitle="dialogTitle"
-      @closeDialog="closeDialog"
-      :flag="showDialog2"
-      class="descripDialog"
-    ></descrip-dialog>
-    <!--指标说明弹框组件结束-----------------------end-->
-  </div>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref,watch  } from 'vue'
-import radarChart from './scoreReportComponent/radarChart.vue'
-import pieChart from './scoreReportComponent/pieChart.vue'
-import dialogChartOne from './scoreReportComponent/dialogChartOne'
-import descripDialog from './scoreReportComponent/descripDialog'
-import * as api from '@/api/powerQuality/scoreReport.js'
-import { ElMessage } from 'element-plus'
-import { parseTime } from '@/utils'
-import { ElNotification } from 'element-plus'
-
-export default defineComponent({
-  name: 'ScoreReport',
-  components: {
-    radarChart,
-    pieChart,
-    dialogChartOne,
-    descripDialog,
-  },
-   props: {
-    activeName: String,
-  },
-  setup(props) {
-    const store = useStore()
-     const loading=ref(false)
-    const listTabPosition = ref('dayValue')
-    const dateType = ref('date')
-    const dateTime = ref(new Date())
-    const deviceCode=ref('')
-    const flag=ref(false)
-    const getData = ref([
-      {
-        loop: '',
-        cos: '0%',
-        elBalun: '100%',
-        vtBalun: '0%',
-        name: '0%',
-        city: '0%',
-        score: '0',
-      },
-    ])
-    const dialogTitle = ref('')
-    const showDialog = ref(false)
-    const showDialog2 = ref(false)
-    const echartsAllData = ref([])
-
-    function headCellStyle({ row, column, rowIndex, columnIndex }) {
-      row, column
-      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
-        return `text-align:center`
-      } else {
-        return ''
-      }
-    }
-    const listTabsChange = (value) => {
-      value == 'dayValue'
-        ? (dateType.value = 'date')
-        : (dateType.value = 'month')
-    }
-    //主页面数据请求
-    function evaluationReport() {
-
-       
-       
-       if(!store.state.siteId){
-         loading.value=false
-          ElNotification({
-          title: '提示',
-          message: '请选择站点',
-          type: 'warning',
-        })
-        return
-       }
-       loading.value=true;
-      
-      let list = {}
-
-      if (listTabPosition.value == 'dayValue') {
-        store.commit('getNowFormatDate', dateTime.value)
-        console.log(store.state.dateList)
-        list = {
-          // siteId: 6,
-          // time: '2021-11-01 00:00:00',
-          type: dateType.value == 'date' ? 1 : 2,
-          siteId: store.state.siteId,
-          time: store.state.dateList,
-        }
-      } else {
-        store.commit('getCurrentMonthLast', dateTime.value)
-        list = {
-          // siteId: 6,
-          // time: '2021-11-01 00:00:00',
-          type: dateType.value == 'date' ? 1 : 2,
-          siteId: store.state.siteId,
-          time: store.state.monthList[0].substring(0, 7),
-        }
-      }
-
-      
-
-      api.evaluationReport(list).then((requset) => {
-        loading.value=false
-        if (requset.status === 'SUCCESS') {
-          
-          if(requset.data[0]){
-            getData.value[0] = requset.data[0]
-            deviceCode.value= requset.data[0].deviceCode
-            flag.value=true
-     
-          }else{
-              ElMessage.warning('暂无数据')
-               flag.value=false
-          }
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-
-    // 折线图详情总数据请求
-    function rtRealScore(params) {
-      parseTime
-
-      // 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)
-
-      let list = {}
-
-      if (listTabPosition.value == 'dayValue') {
-        store.commit('getNowFormatDate', dateTime.value)
-        list = {
-          // deviceCode: 'DA00021026',
-          deviceCode:deviceCode.value,
-          startTime: store.state.dateList + ' ' + '00:00:00',
-          endTime: store.state.dateList + ' ' + '23:59:59',
-        }
-      } else {
-        store.commit('getCurrentMonthLast', dateTime.value)
-        list = {
-          // deviceCode:'DA00021026',
-          deviceCode:deviceCode.value,
-          startTime: store.state.monthList[0] + ' ' + '00:00:00',
-          endTime: store.state.monthList[1] + ' ' + '23:59:59',
-        }
-      }
-
-      api
-        .rtRealScore(list)
-        .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) {
-      if(!flag.value){
-        return
-      }
-      dialogTitle.value = params
-      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') {
-          evaluationReport()
-        }
-      }
-    )
-
-    onMounted(() => {
-        evaluationReport()
-      
-      
-    })
-    return {
-      store,
-      headCellStyle,
-      listTabPosition,
-      num: 0,
-      value4: '',
-      listTabsChange,
-      dateType,
-      dateTime,
-      flag,
-      tableData: [
-        {
-          huilv: '/HZ183',
-          gongLv: '合格',
-          dianLiu: '不合格',
-          dianYa: '合格',
-          name: '合格',
-          city: '不合格',
-        },
-      ],
-      evaluationReport,
-      getData,
-      oneClick,
-      showDialog,
-      showDialog2,
-      dialogTitle,
-      rtRealScore,
-      echartsAllData,
-      closeDialog,
-      descripDialog,
-      deviceCode,
-      loading
-    }
-  },
-})
-</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/asseReport/scoreReport/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/asseReport/scoreReport/component/table.vue

@@ -0,0 +1,277 @@
+<template>
+    <div>
+        <el-table :data="getData" style="width: 100%" :header-cell-style="headCellStyle">
+            <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')">
+                        <el-button size="small" round :type="scope.row.cosQ ? 'success' : 'danger'">
+                            {{ scope.row.cosQ ? '合格' : '不合格' }}
+                        </el-button>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="不平衡度">
+                <el-table-column label="电流" width="" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('elBalun')">
+                            <el-button size="small" round :type="scope.row.elBalunQ ? 'success' : 'danger'">
+                                {{ scope.row.elBalunQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="电压" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('vtBalun')">
+                            <el-button size="small" round :type="scope.row.vtBalunQ ? 'success' : 'danger'">
+                                {{ scope.row.vtBalunQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </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')">
+                            <el-button size="small" round :type="scope.row.uaQ ? 'success' : 'danger'">
+                                {{ scope.row.uaQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="B相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('ub')">
+                            <el-button size="small" round :type="scope.row.ubQ ? 'success' : 'danger'">
+                                {{ scope.row.ubQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="C相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('uc')">
+                            <el-button size="small" round :type="scope.row.ucQ ? 'success' : 'danger'">
+                                {{ scope.row.ucQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </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')">
+                            <el-button size="small" round :type="scope.row.iaLoadQ ? 'success' : 'danger'">
+                                {{ scope.row.iaLoadQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="B相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('ibLoad')">
+                            <el-button size="small" round :type="scope.row.ibLoadQ ? 'success' : 'danger'">
+                                {{ scope.row.ibLoadQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="city" label="C相" align="center">
+                    <template #default="scope">
+                        <div @click="oneClick('icLoad')">
+                            <el-button size="small" round :type="scope.row.icLoadQ ? 'success' : 'danger'">
+                                {{ scope.row.icLoadQ ? '合格' : '不合格' }}
+                            </el-button>
+                        </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'
+                        : getData[0].score >= 60
+                            ? 'warning'
+                            : 'danger'
+                        " class="defaultCursor">
+                        {{ scope.row.score }}
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <dialogChartOne ref="dialogChartOneRef" :echartsAllData="echartsAllData">
+        </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/scoreReport.js'
+/*----------------------------------组件引入-----------------------------------*/
+import dialogChartOne from './dialogChartOne'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+    getData: Object,
+    deviceCode: String,
+    dateTime: Object,
+    listTabPosition: String
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const echartsAllData = ref([])
+const echartsTitle = ref('')
+
+// 折线图详情总数据请求
+function rtRealScore(params) {
+    store.state.chartType = params
+
+    let list = {}
+
+    if (props.listTabPosition == 'dayValue') {
+        store.commit('getNowFormatDate', props.dateTime)
+        list = {
+            deviceCode: props.deviceCode,
+            startTime: store.state.dateList + ' ' + '00:00:00',
+            endTime: store.state.dateList + ' ' + '23:59:59',
+        }
+    } else {
+        store.commit('getCurrentMonthLast', props.dateTime)
+        list = {
+            deviceCode: props.deviceCode,
+            startTime: store.state.monthList[0] + ' ' + '00:00:00',
+            endTime: store.state.monthList[1] + ' ' + '23:59:59',
+        }
+    }
+
+    api
+        .rtRealScore(list)
+        .then((requset) => {
+            if (requset.status === 'SUCCESS') {
+                echartsAllData.value = requset.data
+
+                // 处理数据
+                var arrOld = requset.data
+                var echartsObj = []
+                var echartsObj2 = []
+                var lineName
+                var lineName2
+
+                switch (params) {
+                    case 'cos':
+                        echartsObj = [{ name: '功率因数 ( 实时数据 )', data: arrOld.map(item => item.cos) }]
+                        lineName = ''
+                        break
+                    case 'ua':
+                        echartsObj = [{ name: 'A相电压 ( 实时数据 )', data: arrOld.map(item => item.ua) }]
+                        lineName = 'kV'
+                        break
+                    case 'ub':
+                        echartsObj = [{ name: 'B相电压 ( 实时数据 )', data: arrOld.map(item => item.ub) }]
+                        lineName = 'kV'
+                        break
+                    case 'uc':
+                        echartsObj = [{ name: 'c相电压 ( 实时数据 )', data: arrOld.map(item => item.uc) }]
+                        lineName = 'kV'
+                        break
+                    case 'elBalun':
+                        echartsObj = [
+                            { name: '电流不平衡度 ( 实时数据 )', data: arrOld.map(item => item.elBalun * 100) },
+                        ]
+                        lineName = '%'
+                        echartsObj2 = [
+                            { name: 'A相电流', data: arrOld.map(item => item.ia) },
+                            { name: 'B相电流', data: arrOld.map(item => item.ib) },
+                            { name: 'C相电流', data: arrOld.map(item => item.ic) },
+                        ]
+                        lineName2 = 'A'
+                        break
+                    case 'vtBalun':
+                        echartsObj = [
+                            { name: '电压不平衡度 ( 实时数据 )', data: arrOld.map(item => item.vtBalun * 100) },
+                        ]
+                        lineName = '%'
+
+                        echartsObj2 = [
+                            { name: 'A相电压', data: arrOld.map(item => item.ua) },
+                            { name: 'B相电压', data: arrOld.map(item => item.ub) },
+                            { name: 'C相电压', data: arrOld.map(item => item.uc) },
+                        ]
+                        lineName2 = 'V'
+                        break
+                    case 'iaLoad':
+                        echartsObj = [
+                            { name: 'A相电流负载率 ( 实时数据 )', data: arrOld.map(item => item.iaLoad) },
+                        ]
+                        lineName = '%'
+                        echartsObj2 = [{ name: 'A相电流', data: arrOld.map(item => item.ia) }]
+                        lineName2 = 'A'
+                        break
+                    case 'ibLoad':
+                        echartsObj = [
+                            { name: 'B相电流负载率 ( 实时数据 )', data: arrOld.map(item => item.ibLoad) },
+                        ]
+                        lineName = '%'
+                        echartsObj2 = [{ name: 'B相电流', data: arrOld.map(item => item.ib) }]
+                        lineName2 = 'A'
+                        break
+                    case 'icLoad':
+                        echartsObj = [
+                            { name: 'C相电流负载率 ( 实时数据 )', data: arrOld.map(item => item.icLoad) },
+                        ]
+                        lineName = '%'
+                        echartsObj2 = [{ name: 'C相电流', data: arrOld.map(item => item.ic) }]
+                        lineName2 = 'A'
+                        break
+                    default:
+                }
+
+                store.state.realScoreLineDataTime = arrOld.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) {
+    if (!props.deviceCode) {
+        ElMessage.warning('暂无数据')
+        return
+    }
+
+    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 {}
+    }
+}
+</script>

src/views/powerQuality/asseReport/scoreReport/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div>
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="filter-item">
+        <div class="title">选择站点：</div>
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
+          :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-radio-group v-model="listTabPosition" @change="listTabsChange(listTabPosition)"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-radio-button value="dayValue">按日</el-radio-button>
+          <el-radio-button value="monthValue">按月</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div class="filter-item">
+        <el-date-picker v-model="dateTime" :type="dateType" placeholder="请选择" style="width: 150px; " :clearable="false"
+          :editable="false" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
+      </div>
+
+      <el-button type="primary" class="search-button" @click="evaluationReport()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
+
+      <div class="filter-item prompt cursor-pointer" @click="openDescripDialog()">
+        <img class="image" src="@/assets/images/descIcon.png" alt="" />
+        <div class="title">指标说明</div>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <el-row :gutter="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-if="getData[0]" v-loading="loading"></radar-chart>
+          <div class="totalScore">
+            总评分：{{ getData[0].score ? getData[0].score : 0 }}
+            <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>
+        <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>
+      </el-col>
+      <el-col :md="24" :lg="17">
+        <!-- 表格start -->
+        <tableDom :getData="getData" :deviceCode="deviceCode" :listTabPosition="listTabPosition" :dateTime="dateTime"
+          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 { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/powerQuality/scoreReport.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 listTabPosition = ref('dayValue')
+const dateType = ref('date')
+const dateTime = ref(new Date())
+const deviceCode = ref('')
+const getData = ref([
+  {
+    loop: '',
+    cos: '0%',
+    elBalun: '100%',
+    vtBalun: '0%',
+    name: '0%',
+    city: '0%',
+    score: '0',
+  },
+])
+
+
+
+function openDescripDialog() {
+  proxy.$refs['descripDialogRef'].openDialog({
+    dialogTitle: '指标说明'
+  })
+}
+
+function listTabsChange(value) {
+  value == 'dayValue'
+    ? (dateType.value = 'date')
+    : (dateType.value = 'month')
+}
+
+//主页面数据请求
+function evaluationReport() {
+  if (!store.state.siteId) {
+    loading.value = false
+    ElNotification({
+      title: '提示',
+      message: '请选择站点',
+      type: 'warning',
+    })
+    return
+  }
+  loading.value = true;
+
+  let list = {}
+
+  if (listTabPosition.value == 'dayValue') {
+    store.commit('getNowFormatDate', dateTime.value)
+    console.log(store.state.dateList)
+    list = {
+      // siteId: 6,
+      // time: '2021-11-01 00:00:00',
+      type: dateType.value == 'date' ? 1 : 2,
+      siteId: store.state.siteId,
+      time: store.state.dateList,
+    }
+  } else {
+    store.commit('getCurrentMonthLast', dateTime.value)
+    list = {
+      // siteId: 6,
+      // time: '2021-11-01 00:00:00',
+      type: dateType.value == 'date' ? 1 : 2,
+      siteId: store.state.siteId,
+      time: store.state.monthList[0].substring(0, 7),
+    }
+  }
+
+  api.evaluationReport(list).then((requset) => {
+    loading.value = false
+    if (requset.status === 'SUCCESS') {
+
+      if (requset.data[0]) {
+        getData.value[0] = requset.data[0]
+        deviceCode.value = requset.data[0].deviceCode
+      } else {
+        ElMessage.warning('暂无数据')
+      }
+    } else {
+      ElMessage.error(requset.msg)
+    }
+  })
+}
+
+watch(
+  () => props.activeName,
+  (newVal) => {
+    if (newVal == 'first') {
+      evaluationReport()
+    }
+  }
+)
+
+onMounted(() => {
+  evaluationReport()
+})
+</script>
+ 
+<style scoped lang="scss">
+.el-row {
+  margin-bottom: 20px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.el-col {
+  border-radius: 4px;
+}
+</style>

src/views/powerQuality/asseReport/scoreReportComponent/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/asseReport/scoreReportComponent/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/powerQuality/harmonicReport/tableCom.vue

@@ -44,11 +44,4 @@ function handleSizeChange(val) {
 function handleCurrentChange(val) {
   console.log(`当前页: ${val}`)
 }
-// 表头样式设置
-function goVariableList() {
-  // 跳转至订单列表页面传参
-  this.$router.push({
-    path: '../siteManage/variableList/index.vue',
-  })
-}
 </script>

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

@@ -139,7 +139,7 @@ function rtRealScore(params) {
 
     api
         .rtRealScore({
-            deviceCode: 'DA00021026',
+            deviceCode: props.deviceCode,
             startTime: startTime,
             endTime: endTime,
         })
@@ -191,13 +191,13 @@ function rtRealScore(params) {
                         lineName2 = 'A'
                         break
                     case 'ibLoad':
-                        echartsObj = [{ name: 'B相电流负载率 ( 实时数据 )', data: rawData.map(item => item.iaLoad) }]
+                        echartsObj = [{ name: 'B相电流负载率 ( 实时数据 )', data: rawData.map(item => item.ibLoad) }]
                         lineName = '%'
                         echartsObj2 = [{ name: 'B相电流', data: rawData.map(item => item.ib) }]
                         lineName2 = 'A'
                         break
                     case 'icLoad':
-                        echartsObj = [{ name: 'C相电流负载率 ( 实时数据 )', data: rawData.map(item => item.iaLoad) }]
+                        echartsObj = [{ name: 'C相电流负载率 ( 实时数据 )', data: rawData.map(item => item.icLoad) }]
                         lineName = '%'
                         echartsObj2 = [{ name: 'C相电流', data: rawData.map(item => item.ic) }]
                         lineName2 = 'A'

src/views/powerQuality/unbalanceAnalysis/index.vue

@@ -1,280 +1,161 @@
 <template>
   <div class="app-container harmonicReport">
     <!-- 筛选start -->
-    <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-
-          <div class="filter-item">
-            选择站点:
-            <el-select
-              v-model="store.state.siteId"
-              placeholder="请选择"
-              style="width: 220px"
-              clearable
-              filterable
-               @change="linkDevice()"
-               :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-select>
-          </div>
-
-          <div class="filter-item">
-            日期：
-            <el-date-picker
-              v-model="dateTime"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: auto"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
-          </div>
-
-          <el-button
-            type="primary"
-            class="search-button"
-            @click="rtRealScore()"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
-            搜索
-          </el-button>
-        </div>
+    <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="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">日期：</div>
+        <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+          end-placeholder="结束日期" style="width: auto"
+          :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
+      </div>
+
+      <el-button type="primary" class="search-button" @click="rtRealScore()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
     </div>
+
     <!-- 筛选end -->
     <el-row :gutter="20">
       <el-col :md="24" :lg="12">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">电压不平衡度</div>
-          <voltage-chart
-            :echartsData="echartsData"
-            v-loading="loading"
-          ></voltage-chart>
+          <voltage-chart :echartsData="echartsData" v-loading="loading"></voltage-chart>
           <el-divider></el-divider>
-          <voltage-chart2
-            :echartsData="echartsData"
-            v-loading="loading"
-            
-          ></voltage-chart2>
+          <voltage-chart2 :echartsData="echartsData" v-loading="loading"></voltage-chart2>
         </div>
       </el-col>
       <el-col :md="24" :lg="12">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">电流不平衡度</div>
-          <electric-chart
-            :echartsData="echartsData"
-            v-loading="loading"
-          ></electric-chart>
+          <electric-chart :echartsData="echartsData" v-loading="loading"></electric-chart>
           <el-divider></el-divider>
-          <electric-chart2
-            :echartsData="echartsData"
-            v-loading="loading"
-          ></electric-chart2>
+          <electric-chart2 :echartsData="echartsData" v-loading="loading"></electric-chart2>
         </div>
       </el-col>
     </el-row>
   </div>
 </template>
 
-<script>
+<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/unbalanceAnalysis.js'
+/*----------------------------------组件引入-----------------------------------*/
 import voltageChart from './voltageChart'
 import voltageChart2 from './voltageChart2'
 import electricChart from './electricChart'
 import electricChart2 from './electricChart2'
-import { defineComponent, onMounted, ref } from 'vue'
-import * as api from '@/api/powerQuality/unbalanceAnalysis.js'
-import { ElMessage } from 'element-plus'
-import { ElNotification } from 'element-plus'
-
-export default defineComponent({
-  name: 'VariableList',
-  components: {
-    voltageChart,
-    voltageChart2,
-    electricChart,
-    electricChart2,
-  },
-  setup() {
-    const store = useStore()
-    const loading=ref(false)
-    const value4 = ref('请选择')
-    const region = ref('')
-    // const deviceCode = ref('')
-    const deviceCode = ref('DA00021026')
-    const deviceList = ref([])
-    const echartsData = ref([
-      // {
-      //   cos: 1,
-      //   dataTime: '2021-11-10 10:10:00',
-      //   elBalun: 1,
-      //   ia: 6.24,
-      //   ib: 0,
-      //   ic: 6.11,
-      //   score: 0,
-      //   ua: 10174,
-      //   ub: 0,
-      //   uc: 10172.5,
-      //   vtBalun: 1,
-      // },
-      // {
-      //   cos: 1,
-      //   dataTime: '2021-11-10 10:10:00',
-      //   elBalun: 1,
-      //   ia: 6.24,
-      //   ib: 0,
-      //   ic: 6.11,
-      //   score: 0,
-      //   ua: 10174,
-      //   ub: 0,
-      //   uc: 10172.5,
-      //   vtBalun: 1,
-      // },
-      ])
-    const voltageChartData = ref({})
-
-    const dateTime = ref('')
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  loading: false,
+  deviceCode: "DA00021026",
+  deviceList: [],
+  echartsData: [],
+  dateTime: ""
+})
+const { loading, deviceCode, deviceList, echartsData, dateTime } = toRefs(state)
 
-    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]?requset.data[0].deviceCode:''
 
-          } else {
-            
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+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 {
 
-    function rtRealScore() {
-      
-        console.log('dateTime.value')
-       console.log(dateTime.value)
-      if (!dateTime.value) {
-        ElNotification({
-          title: '提示',
-          message: '请选择开始和结束时间',
-          type: 'warning',
-        })
-         return
-      }
-      if(!deviceCode.value){
-        
-          ElNotification({
-          title: '提示',
-          message: '请选择左侧设备信息',
-          type: 'warning',
-        })
-        return
+        ElMessage.error(requset.msg)
       }
-       loading.value=true
-      store.commit('TimeAll_function', dateTime.value)
-      const time = store.state.Time_Data
-      api
-        .rtRealScore({
-          deviceCode: deviceCode.value,
-          startTime: time[0],
-          endTime: time[1],
-        })
-        .then((requset) => {
-          loading.value=false
-          if (requset.status === 'SUCCESS') {
-            echartsData.value = requset.data
-
-            if(!echartsData.value[0]){
-               ElMessage.warning('暂无数据') 
-               return
-            }
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+    })
+}
 
-    onMounted(() => {
-      dateTime.value=store.state.se_defaultTime
-      deviceSelect()
+function rtRealScore() {
+  if (!dateTime.value) {
+    ElNotification({
+      title: '提示',
+      message: '请选择开始和结束时间',
+      type: 'warning',
+    })
+    return
+  }
+  if (!deviceCode.value) {
+    ElNotification({
+      title: '提示',
+      message: '请选择左侧设备信息',
+      type: 'warning',
+    })
+    return
+  }
 
-     
+  loading.value = true
+  store.commit('TimeAll_function', dateTime.value)
+  const time = store.state.Time_Data
+  api
+    .rtRealScore({
+      deviceCode: deviceCode.value,
+      startTime: time[0],
+      endTime: time[1],
+    })
+    .then((requset) => {
+      loading.value = false
+      if (requset.status === 'SUCCESS') {
+        echartsData.value = requset.data
+
+        if (!echartsData.value[0]) {
+          ElMessage.warning('暂无数据')
+          return
+        }
+      } else {
+        ElMessage.error(requset.msg)
+      }
     })
-    return {
-      store,
-      rtRealScore,
-      value4,
-      region,
-      deviceSelect,
-      deviceCode,
-      deviceList,
-      echartsData,
-      voltageChartData,
+}
 
-      dateTime,
-       linkDevice,
-       loading
-    }
-  },
+onMounted(() => {
+  dateTime.value = store.state.se_defaultTime
+  deviceSelect()
 })
 </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;
-}
 </style>