告警管理、设备管理、台区管理、站点管理功能优化

src/assets/css/element.scss

@@ -52,7 +52,15 @@
     }
 }
 
-
+// 上传组件样式
 .el-upload-list {
     margin: 0px !important
+}
+
+// table表格样式
+.el-table {
+    th.el-table__cell {
+        background: #FAFAFA !important;
+        color: black
+    }
 }

src/assets/css/index.scss

@@ -114,9 +114,13 @@ div:focus {
     min-height: 36px;
 }
 
+.flex {
+    display: flex;
+}
+
 .app-container {
     padding: $vab-padding;
-    width: calc(100%);
+    width: 100%;
     height: 100%;
     background: #fff;
     min-height: calc(100vh - 130px);
@@ -129,6 +133,10 @@ div:focus {
     >.bg-white {
         background: #fff;
     }
+
+    &.bg-nesting {
+        background: transparent;
+    }
 }
 
 .filter-container {
@@ -163,6 +171,16 @@ div:focus {
     .prompt {
         margin: auto 0 auto auto;
     }
+
+    .goBack {
+        margin-right: 20px;
+    }
+
+    .Download {
+        margin: auto 0 auto 0;
+        margin-left: 20px;
+        text-decoration: underline;
+    }
 }
 
 .ant-layout-header {
@@ -198,26 +216,6 @@ div:focus {
 }
 
 // 基本信息
-.basicInfo {
-    width: 100%;
-    height: calc(100vh - 180px);
-    // border: 1px solid pink;
-    display: block;
-    overflow-y: auto;
-}
-
-.siteManage-main {
-    padding: 20px;
-}
-
-.groupInfo,
-.basic-info-page,
-.powerScore {
-    .el-form-item {
-        margin-left: 0px !important
-    }
-}
-
 .goArchive {
     color: #056FFF;
     // text-decoration: underline;
@@ -301,21 +299,6 @@ div:focus {
 }
 
 // 电力监测
-.watchDog,
-.variableList {
-    .el-form-item__content {
-        width: 270px
-    }
-
-    .el-form-item__label {
-        width: 150px !important
-    }
-
-    .el-form-item__content {
-        // margin-left: 150px!important
-    }
-}
-
 .paginationBlock {
     margin-top: 20px;
     text-align: right
@@ -327,15 +310,8 @@ div:focus {
     font-size: 16px;
 }
 
-.siteTree .el-icon-delete {
-    color: #409EFF;
-    position: absolute;
-    right: 6px;
-    top: 5px;
-}
-
 .custom-tree-node span:first-child {
-    width: 100px
+    width: 100%;
 }
 
 // 告警管理渐变背景色
@@ -413,6 +389,10 @@ div:focus {
             color: #F80000
         }
     }
+
+    .el-radio__input.is-checked+.el-radio__label {
+        color: #606266 !important
+    }
 }
 
 .underline {
@@ -523,17 +503,6 @@ div:focus {
     border-bottom: 2px solid #2EAEFF
 }
 
-.banlanceBtn {
-    max-width: 80%;
-    // margin: 0 auto 20px;
-    height: 40px;
-    // line-height: 40px;
-    width: 236px;
-    font-size: 16px !important;
-    // background: #6dc6ff;
-    // color: #fff
-}
-
 .assCard {
     min-height: 356px !important;
 
@@ -585,13 +554,14 @@ div:focus {
 }
 
 .totalScore {
+    display: flex;
+    justify-content: center;
     font-weight: bold;
     text-align: center;
-    margin: 30px;
+    margin: 30px 0;
 
-    .el-button {
-        font-size: 16px;
-        margin-left: 10px;
+    .title {
+        margin: auto 20px auto 0;
     }
 }
 
@@ -799,12 +769,6 @@ div:focus {
     transform: scale(.8);
 }
 
-.alarmStatusDialog {
-    .el-radio__input.is-checked+.el-radio__label {
-        color: #606266 !important
-    }
-}
-
 .defetSubTit {
     background: #F4F4F4;
     width: calc(100% + 40px);

src/views/alarmManage/alarmTotal.vue

@@ -18,7 +18,7 @@
     <!-- 返回end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+    <el-table :data="tableData" border stripe>
       <el-table-column fixed prop="soeTime" label="发生时间" width=""></el-table-column>
       <el-table-column prop="measDesc" label="测点描述" width=""></el-table-column>
       <el-table-column prop="alarmName" label="告警名称" width=""></el-table-column>

src/views/alarmManage/dialogComponent.vue

@@ -231,5 +231,4 @@ defineExpose({
 }
 </style>
 <style>
-.alarmStatusDialog .el-form-item:not(.user-layout .el-form-item) {}
 </style>

src/views/alarmManage/index.vue

@@ -28,8 +28,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table class="alarmingTable" :data="tableData" :cell-style="cellStyle"
-      :header-cell-style="{ background: '#FAFAFA' }" border stripe>
+    <el-table class="alarmingTable" :data="tableData" :cell-style="cellStyle" border stripe>
       <el-table-column prop="siteName" label="站点名称" width="">
         <template #default="scope">
           <div @click="handleClick(scope.row)">{{ scope.row.siteName }}</div>

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

@@ -22,7 +22,7 @@
             .includes(filterText.toLowerCase()) ||
           data.regCode.toLowerCase().includes(filterText.toLowerCase())
       )
-        " border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" :height="Height">
+        " border stripe :height="Height">
         <el-table-column prop="stationStatus" align="center" label="状态" width="50">
           <template #default="scope">
             <el-avatar class="status" :style="scope.row.stationStatus == 0

src/views/deviceManage/powerEquip/communicateEquip/dialog/cloneDialog.vue

@@ -3,19 +3,19 @@
   <el-dialog v-model="cloneDialog" title="变量克隆" width="30rem" @close="close">
     <div class="dialogOne">
       <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
-        <el-form-item label="克隆设备对象:" prop="deviceCode">
+        <el-form-item label="克隆设备对象：" prop="deviceCode">
           <span>{{ form.deviceCode }}</span>
         </el-form-item>
-        <el-form-item label="变量克隆至:" prop="cloneRadio">
+        <el-form-item label="变量克隆至：" prop="cloneRadio">
           <el-radio-group v-model="form.type" size="medium">
             <el-radio :label="1">新设备</el-radio>
             <el-radio :label="2">已有设备（仅克隆变量）</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="设备名:" prop="cloneInputName" v-if="form.type == 1">
+        <el-form-item label="设备名：" prop="cloneInputName" v-if="form.type == 1">
           <el-input v-model="form.cloneInputName" placeholder="请输入设备名" clearable />
         </el-form-item>
-        <el-form-item label="设备编号:" prop="cloneInputCode" v-if="form.type == 1">
+        <el-form-item label="设备编号：" prop="cloneInputCode" v-if="form.type == 1">
           <el-input v-model="form.cloneInputCode" placeholder="请输入设备编号" clearable />
         </el-form-item>
         <el-form-item label="选择站点：" v-if="form.type != 1">

src/views/deviceManage/powerEquip/communicateEquip/dialog/insert_update.vue

@@ -1,42 +1,40 @@
 <template>
   <div class="powerdialog">
     <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" width="640px">
-      <div>
-        <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
-          <el-form-item label="设备名称：" prop="deviceName">
-            <el-input v-model="form.deviceName"></el-input>
-          </el-form-item>
-          <el-form-item label="设备编号：" prop="deviceCode">
-            <el-input v-if="dialogTitle == '修改'" v-model="form.deviceCode" disabled></el-input>
-            <el-input v-else v-model="form.deviceCode"></el-input>
-          </el-form-item>
-          <el-form-item label="楼层：" prop="floor">
-            <el-input-number v-model="form.floor" controls-position="right" :min="-10" :max="100"></el-input-number>
-          </el-form-item>
-          <el-form-item label="所属站点：" prop="siteId">
-            <el-select v-model="form.siteId" :disabled="dialogTitle === '修改'" placeholder="请选择所属站点">
-              <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
-                :value="item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="设备安装位置：" prop="deviceAddress">
-            <el-input v-model="form.deviceAddress"></el-input>
-          </el-form-item>
-          <el-form-item label="设备类型:" prop="deviceType">
-            <el-select v-model="form.deviceType" placeholder="请选择设备类型">
-              <el-option v-for="item in deviceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="sim卡号：" prop="sim">
-            <el-input v-model="form.sim"></el-input>
-          </el-form-item>
+      <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
+        <el-form-item label="设备名称：" prop="deviceName">
+          <el-input v-model="form.deviceName"></el-input>
+        </el-form-item>
+        <el-form-item label="设备编号：" prop="deviceCode">
+          <el-input v-if="dialogTitle == '修改'" v-model="form.deviceCode" disabled></el-input>
+          <el-input v-else v-model="form.deviceCode"></el-input>
+        </el-form-item>
+        <el-form-item label="楼层：" prop="floor">
+          <el-input-number v-model="form.floor" controls-position="right" :min="-10" :max="100"></el-input-number>
+        </el-form-item>
+        <el-form-item label="所属站点：" prop="siteId">
+          <el-select v-model="form.siteId" :disabled="dialogTitle === '修改'" placeholder="请选择所属站点">
+            <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
+              :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备安装位置：" prop="deviceAddress">
+          <el-input v-model="form.deviceAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="设备类型：" prop="deviceType">
+          <el-select v-model="form.deviceType" placeholder="请选择设备类型">
+            <el-option v-for="item in deviceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="sim卡号：" prop="sim">
+          <el-input v-model="form.sim"></el-input>
+        </el-form-item>
 
-          <div style="text-align: right">
-            <el-button @click="close">取消</el-button>
-            <el-button type="primary" @click="submitForm()">保存</el-button>
-          </div>
-        </el-form>
-      </div>
+        <div style="text-align: right">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="submitForm()">保存</el-button>
+        </div>
+      </el-form>
     </el-dialog>
   </div>
 </template>

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

@@ -1,28 +1,24 @@
 <template>
   <div class="communicate">
-    <div class="comTop">
-      <div class="comTopLeft">
-        <!-- 选择站点:
-        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px; margin-right: 20px">
-          <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
-        </el-select> -->
+    <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+      <div class="filter-item">
         <el-input placeholder="搜索设备名" v-model="filterText" class="comTopLeftInput" style="width: 150px"
           :disabled="store.state.authorities.indexOf('查询') == -1">
         </el-input>
-
-        <el-button type="primary" icon="Search" class="search-button" @click="Select()"
-          :disabled="store.state.authorities.indexOf('查询') == -1">
-          搜索
-        </el-button>
-        <el-button class="search-button" icon="Plus" type="success" @click="Insert()"
-          :disabled="store.state.authorities.indexOf('新增') == -1">
-          新增
-        </el-button>
-        <a href="./static/伍继通信设备导入模板.xlsx" download class="downloadMb">模板下载</a>
       </div>
 
+      <el-button type="primary" icon="Search" class="search-button" @click="Select()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
+      <el-button type="success" icon="Plus" class="search-button" @click="Insert()"
+        :disabled="store.state.authorities.indexOf('新增') == -1">
+        新增
+      </el-button>
+
+      <a href="./static/伍继通信设备导入模板.xlsx" download class="Download">模板下载</a>
 
-      <el-upload class="upload-demo" :action="fileUrl + 'device/deviceImport'" :on-progress="handleProgress"
+      <el-upload class="upload-demo prompt" :action="fileUrl + 'device/deviceImport'" :on-progress="handleProgress"
         :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
           accessToken: [accessToken],
         }" :file-list="fileList" style="margin:0 10px 0 auto" :disabled="store.state.authorities.indexOf('导入') == -1">
@@ -30,51 +26,48 @@
       </el-upload>
       <el-button type="primary" @click="DataReportExport()"
         :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
-
     </div>
 
-    <div class="comContent">
-      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
-        :height="Height" v-loading="loading">
-        <el-table-column prop="deviceStatus" align="center" label="状态" width="50">
-          <template #default="scope">
-            <el-avatar class="status" :style="scope.row.deviceStatus == 1
-              ? 'background-color:red'
-              : 'background-color:#04F21C'
-              "></el-avatar>
-          </template>
-        </el-table-column>
-        <el-table-column prop="deviceName" label="设备名称" align="center" width="150"></el-table-column>
-        <el-table-column prop="deviceCode" label="设备编号" align="center" width=""></el-table-column>
-        <el-table-column prop="siteName" label="所属站点" align="center" width=""></el-table-column>
-        <el-table-column prop="statusTime" label="最后通信时间" align="center" min-width="160px"></el-table-column>
-        <el-table-column prop="offlineDuration" label="离线时长（小时）" align="center" width=""></el-table-column>
-        <el-table-column prop="onlineDuration" label="在线时长（小时）" align="center" width=""></el-table-column>
-        <el-table-column prop="deviceAddress" label="设备地址" align="center" width=""></el-table-column>
-        <el-table-column align="center" label="操作" width="200">
-          <template #default="scope">
-            <el-button type="primary" size="small" @click.prevent="Update(scope.row)"
-              :disabled="store.state.authorities.indexOf('修改') == -1" link>
-              编辑
-            </el-button>
-            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="InfoFilled" icon-color="red" title="确定删除?"
-              @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
-              <template #reference>
-                <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link>
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-            <el-button @click="clone(scope.row)" type="primary" size="small" link> 克隆 </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="listPagination">
-        <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange" background></el-pagination>
-      </div>
-    </div>
+    <el-table :data="tableData" border stripe :height="props.Height" v-loading="loading">
+      <el-table-column prop="deviceStatus" align="center" label="状态" width="50">
+        <template #default="scope">
+          <el-avatar class="status" :style="scope.row.deviceStatus == 1
+            ? 'background-color:red'
+            : 'background-color:#04F21C'
+            "></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="deviceName" label="设备名称" align="center" width="150"></el-table-column>
+      <el-table-column prop="deviceCode" label="设备编号" align="center" width=""></el-table-column>
+      <el-table-column prop="siteName" label="所属站点" align="center" width=""></el-table-column>
+      <el-table-column prop="statusTime" label="最后通信时间" align="center" min-width="160px"></el-table-column>
+      <el-table-column prop="offlineDuration" label="离线时长（小时）" align="center" width=""></el-table-column>
+      <el-table-column prop="onlineDuration" label="在线时长（小时）" align="center" width=""></el-table-column>
+      <el-table-column prop="deviceAddress" label="设备地址" align="center" width=""></el-table-column>
+      <el-table-column align="center" label="操作" width="200">
+        <template #default="scope">
+          <el-button type="primary" size="small" @click.prevent="Update(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1" link>
+            编辑
+          </el-button>
+          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="InfoFilled" icon-color="red" title="确定删除?"
+            @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
+            <template #reference>
+              <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link>
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+          <el-button @click="clone(scope.row)" type="primary" size="small" link> 克隆 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination class="listPagination" v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]"
+      :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange" background></el-pagination>
+
+
     <insert-Update ref="insertUpdateRef" @handleSelect="Select()"></insert-Update>
     <clone-Dialog ref="cloneDialogRef" @handleSelect="Select()"></clone-Dialog>
   </div>
@@ -276,65 +269,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-//first样式
-.communicate {
-  margin: 15px;
-
-  //顶部左侧样式
-  .comTop {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-
-    .comTopLeft {
-      width: 70%;
-
-      .goBack {
-        margin-right: 15px;
-      }
-
-      .comTopLeftTitle {
-        font-size: 14px;
-        margin-right: 10px;
-      }
-
-      .comTopLeftInput {
-        width: 15rem;
-      }
-
-      .el-input__icon {
-        color: #409eff;
-      }
-
-      .el-input__inner:hover {
-        border-color: #409eff;
-      }
-
-      .el-input__inner:focus {
-        border-color: #409eff;
-      }
-
-      .search-button {
-        margin-left: 1rem;
-      }
-    }
-
-    //顶部右侧样式
-    .comRight {
-      width: 30%;
-
-      button {
-        margin-left: 1rem;
-        float: right;
-      }
-    }
-  }
-
-  .comContent {
-    margin-top: 15px;
-  }
-}
-
 .listPagination {
   margin-top: 15px;
   float: right;

src/views/deviceManage/powerEquip/index.vue

@@ -33,12 +33,7 @@ const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
 const deviceNumData = ref('') //判断设备列表详情是否显示
 const activeName = ref('monitoring')
-const Height = ref(0)
-
-Height.value = window.innerHeight - 300 + 'px'
-window.addEventListener('resize', () => {
-  Height.value = window.innerHeight - 300 + 'px'
-})
+const Height = ref('calc(100vh - 305px)')
 
 watch(
   () => activeName.value,

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

@@ -1,27 +1,22 @@
 <template>
   <div>
-    <div class="firstTop mb-20">
-      <div class="firstTopLeft">
-        <el-button class="goBack" @click="emit('func')">返回</el-button>
+    <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+      <el-button class="goBack" @click="emit('func')">返回</el-button>
 
-        选择站点:
-        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px; margin-right: 20px"
+      <div class="filter-item">
+        <span class="title">选择站点：</span>
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px;"
           :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>
-
-        <!-- <span class="firstTopLeftTitle">设备或编号</span>
-        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"></el-input> -->
-
-        <el-button type="primary" icon="Search" class="search-button" @click="listSelect()"
-          :disabled="store.state.authorities.indexOf('查询') == -1">
-          搜索
-        </el-button>
       </div>
+      <el-button type="primary" icon="Search" @click="listSelect()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
     </div>
 
-    <el-table :data="deviceNumData" border stripe
-      :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 310px)">
+    <el-table :data="deviceNumData" border stripe :height="props.Height">
       <el-table-column prop="monitorDeviceName" label="监控设备名称" align="center" width=""></el-table-column>
       <el-table-column prop="monitorDeviceCode" label="监控设备编号" align="center" width=""></el-table-column>
       <el-table-column prop="loopMeterAddress" label="回路表计地址" align="center" width=""></el-table-column>
@@ -52,11 +47,11 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="listPagination1">
-      <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-        @current-change="handleCurrentChange" background></el-pagination>
-    </div>
+
+    <el-pagination class="listPagination" v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]"
+      :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
+      @size-change="handleSizeChange" @current-change="handleCurrentChange" background></el-pagination>
+
 
     <listDialog ref="listDialogRef"> </listDialog>
   </div>
@@ -75,7 +70,9 @@ import listDialog from './listDialog.vue'
 /*----------------------------------公共方法引入-----------------------------------*/
 /*----------------------------------公共变量-----------------------------------*/
 const store = useStore()
-const props = defineProps({}) //数据双向绑定
+const props = defineProps({
+  Height: String,
+}) //数据双向绑定
 const emit = defineEmits(['updateRow', 'func']);
 const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
@@ -168,15 +165,4 @@ const handleCurrentChange = (val) => {
     }
   }
 }
-
-.listPagination {
-  margin-top: 15px;
-  margin-bottom: -30px;
-  float: right;
-}
-
-.listPagination1 {
-  margin-top: 15px;
-  float: right;
-}
 </style>

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

@@ -1,64 +1,58 @@
 <template>
     <div class="insertBox" v-if="!detailsBool">
-        <div class="firstTop">
-            <div class="firstTopLeft ">
-                <!-- 选择站点:
-                    <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 150px; margin-right: 20px">
-                        <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName"
-                            :value="site.id"></el-option>
-                    </el-select> -->
-                <div class="filter-item">
-                    <span class="firstTopLeftTitle">站点名称:</span>
-                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"
-                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                </div>
-                <div class="filter-item">
-                    <span class="firstTopLeftTitle">联系人:</span>
-                    <el-input v-model="userName" placeholder="请输入联系人" class="firstTopLeftInput"
-                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                </div>
-                <div class="filter-item">
-                    <span class="firstTopLeftTitle">手机号:</span>
-                    <el-input v-model="phone" placeholder="请输入手机号码" class="firstTopLeftInput"
-                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                </div>
-
-                <el-button type="primary" icon="Search" class="search-button" @click="monitorDeviceList()"
-                    :disabled="store.state.authorities.indexOf('查询') == -1">
-                    搜索
-                </el-button>
-                <el-button class="search-button" icon="Plus" type="success" @click="addItem()"
-                    :disabled="store.state.authorities.indexOf('新增') == -1">
-                    新增
-                </el-button>
+        <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+            <!-- 选择站点:
+            <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 150px; margin-right: 20px">
+                <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName"
+                    :value="site.id"></el-option>
+            </el-select> -->
+            <div class="filter-item">
+                <span class="title">站点名称：</span>
+                <el-input placeholder="输入关键字进行过滤" v-model="filterText"
+                    :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
             </div>
-        </div>
-
-        <div class="firstContent">
-            <el-table :data="tableData" border stripe
-                :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 300px)">
-                <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
-                <el-table-column prop="siteAddress" label="站点地址" align="center"></el-table-column>
-                <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
-                <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
-                <el-table-column prop="deviceCount" label="设备数量" align="center" width="">
-                    <template #default="scope">
-                        <div style="  margin-right: 15px; cursor: pointer; color: #409eff; " @click="
-                            deviceNumSelect({ id: scope.row.id, deviceCount: scope.row.deviceCount, })">
-                            {{ scope.row.deviceCount }}
-                        </div>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <div class="listPagination1">
-                <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
-                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-                    @current-change="handleCurrentChange" background></el-pagination>
+            <div class="filter-item">
+                <span class="title">联系人：</span>
+                <el-input v-model="userName" placeholder="请输入联系人"
+                    :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
             </div>
+            <div class="filter-item">
+                <span class="title">手机号：</span>
+                <el-input v-model="phone" placeholder="请输入手机号码"
+                    :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+            </div>
+
+            <el-button type="primary" icon="Search" @click="monitorDeviceList()"
+                :disabled="store.state.authorities.indexOf('查询') == -1">
+                搜索
+            </el-button>
+            <el-button type="success" icon="Plus" @click="addItem()"
+                :disabled="store.state.authorities.indexOf('新增') == -1">
+                新增
+            </el-button>
         </div>
+
+        <el-table :data="tableData" border stripe :height="props.Height">
+            <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
+            <el-table-column prop="siteAddress" label="站点地址" align="center"></el-table-column>
+            <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
+            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
+            <el-table-column prop="deviceCount" label="设备数量" align="center" width="">
+                <template #default="scope">
+                    <div style="  margin-right: 15px; cursor: pointer; color: #409eff; " @click="
+                        deviceNumSelect({ id: scope.row.id, deviceCount: scope.row.deviceCount, })">
+                        {{ scope.row.deviceCount }}
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-pagination class="listPagination" v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]"
+            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
+            @size-change="handleSizeChange" @current-change="handleCurrentChange" background></el-pagination>
     </div>
 
-    <deviceDetails @updateRow="update" @func="detailsBool = false" v-else>
+    <deviceDetails :Height="props.Height" @updateRow="update" @func="detailsBool = false" v-else>
     </deviceDetails>
 
     <!-- 新增 -->
@@ -79,7 +73,9 @@ import insertDialog from './insertDialog.vue'
 /*----------------------------------公共方法引入-----------------------------------*/
 /*----------------------------------公共变量-----------------------------------*/
 const store = useStore()
-const props = defineProps({}) //数据双向绑定
+const props = defineProps({
+    Height: String,
+}) //数据双向绑定
 const emit = defineEmits([]); emit
 const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
@@ -174,47 +170,8 @@ onMounted(() => {
 })
 </script>
 <style lang="scss">
-//顶部左侧样式
-.firstTop {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-
-    .firstTopLeft {
-        width: 100%;
-
-        .goBack {
-            margin-right: 15px;
-        }
-
-        .firstTopLeftTitle {
-            font-size: 14px;
-            margin-right: 10px;
-        }
-
-        .firstTopLeftInput {
-            width: 15rem;
-        }
-
-        .el-input__icon {
-            color: #409eff;
-        }
-
-        .el-input__inner:hover {
-            border-color: #409eff;
-        }
-
-        .el-input__inner:focus {
-            border-color: #409eff;
-        }
-
-        .search-button {
-            margin-left: 1rem;
-        }
-    }
-}
-
-.firstContent {
+.listPagination {
     margin-top: 15px;
+    float: right;
 }
 </style>

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

@@ -1,86 +1,47 @@
 <template>
   <div class="powerdialog">
     <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" width="40%">
-      <div>
-        <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
-          <el-form-item label="监控设备名称：" prop="monitorDeviceName">
-            <el-input v-model="form.monitorDeviceName"></el-input>
-          </el-form-item>
-          <el-form-item label="监控设备编号：" prop="monitorDeviceCode">
-            <el-input v-model="form.monitorDeviceCode"></el-input>
-          </el-form-item>
-          <el-form-item label="回路表计地址：" prop="loopMeterAddress">
-            <el-input-number v-model="form.loopMeterAddress" controls-position="right" :min="0"
-              :max="255"></el-input-number>
-          </el-form-item>
-          <el-form-item label="所属站点：" prop="siteId">
-            <el-select filterable v-model="form.siteId" :disabled="dialogTitle == '修改设备信息'" placeholder="请选择所属站点">
-              <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
-                :value="item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="额定电压（kV）：" prop="ratedVoltage">
-            <el-select v-model="form.ratedVoltage" placeholder="请选择额定电压（kV）">
-              <el-option v-for="item in ratedVoltage" :key="item.value" :label="item.label"
-                :value="item.label"></el-option>
-            </el-select>
-            <div class="fontText">(数值为线电压)</div>
-          </el-form-item>
-          <el-form-item label="额定电流（A）:" prop="ratedCurrent">
-            <el-input-number v-model="form.ratedCurrent" controls-position="right"></el-input-number>
-          </el-form-item>
-          <el-form-item label="电流负载率门限：" prop="currentLoadRate">
-            <el-input-number v-model="form.currentLoadRate" controls-position="right" :min="0"
-              :max="100"></el-input-number>
-            <div class="fontText">(0-100之间的数字)</div>
-          </el-form-item>
-          <el-form-item label="设备能力：" prop="qualityAnalysis">
-            <el-checkbox v-model="form.qualityAnalysis" label="电能质量分析"></el-checkbox>
-            <div class="fontText">(如果未勾选，该设备不参与电能质量分析)</div>
-          </el-form-item>
-          <!-- <br />
-          <hr />
-          <br />
-          <el-form-item label="设备类型：" prop="deviceType">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
-          <el-form-item label="设备型号：" prop="deviceModel">
-            <el-input v-model="form.deviceModel"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家：" prop="manufactor">
-            <el-input v-model="form.manufactor"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家联系人：" prop="manufactorName">
-            <el-input v-model="form.manufactorName"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家联系联系电话：" prop="manufactorPhone">
-            <el-input v-model="form.manufactorPhone"></el-input>
-          </el-form-item>
-          <el-form-item label="巡检周期：" prop="patrolInsC">
-            <el-input v-model="form.patrolInsC"></el-input>
-          </el-form-item>
-          <el-form-item label="保养周期：" prop="maintenanceC">
-            <el-input v-model="form.maintenanceC"></el-input>
-          </el-form-item>
-          <el-form-item label="投运日期：" prop="operationDate">
-            <el-input v-model="form.operationDate"></el-input>
-          </el-form-item>
-          <el-form-item label="安装位置：" prop="installPosition">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
-          <el-form-item label="安装日期：" prop="installDate">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
+      <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
+        <el-form-item label="监控设备名称：" prop="monitorDeviceName">
+          <el-input v-model="form.monitorDeviceName"></el-input>
+        </el-form-item>
+        <el-form-item label="监控设备编号：" prop="monitorDeviceCode">
+          <el-input v-model="form.monitorDeviceCode"></el-input>
+        </el-form-item>
+        <el-form-item label="回路表计地址：" prop="loopMeterAddress">
+          <el-input-number v-model="form.loopMeterAddress" controls-position="right" :min="0"
+            :max="255"></el-input-number>
+        </el-form-item>
+        <el-form-item label="所属站点：" prop="siteId">
+          <el-select filterable v-model="form.siteId" :disabled="dialogTitle == '修改设备信息'" placeholder="请选择所属站点">
+            <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
+              :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="额定电压（kV）：" prop="ratedVoltage">
+          <el-select v-model="form.ratedVoltage" placeholder="请选择额定电压（kV）">
+            <el-option v-for="item in ratedVoltage" :key="item.value" :label="item.label" :value="item.label"></el-option>
+          </el-select>
+          <div class="fontText">(数值为线电压)</div>
+        </el-form-item>
+        <el-form-item label="额定电流（A）:" prop="ratedCurrent">
+          <el-input-number v-model="form.ratedCurrent" controls-position="right"></el-input-number>
+        </el-form-item>
+        <el-form-item label="电流负载率门限：" prop="currentLoadRate">
+          <el-input-number v-model="form.currentLoadRate" controls-position="right" :min="0" :max="100"></el-input-number>
+          <div class="fontText">(0-100之间的数字)</div>
+        </el-form-item>
+        <el-form-item label="设备能力：" prop="qualityAnalysis">
+          <el-checkbox v-model="form.qualityAnalysis" label="电能质量分析"></el-checkbox>
+          <div class="fontText">(如果未勾选，该设备不参与电能质量分析)</div>
+        </el-form-item>
+
+        <div style="margin-top:30px; text-align: right">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="submitForm()">保存</el-button>
+        </div>
+      </el-form>
 
-          <br />
-          <br />
-          <br /> -->
-          <div style="text-align: right">
-            <el-button @click="close">取消</el-button>
-            <el-button type="primary" @click="submitForm()">保存</el-button>
-          </div>
-        </el-form>
-      </div>
     </el-dialog>
   </div>
 </template>

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

@@ -1,76 +1,69 @@
 <template>
   <div class="video">
-    <div class="videoTop">
-      <div class="videoTopLeft">
-        选择站点：
-        <el-select filterable v-model="store.state.siteId" placeholder="请选择" style="width: 250px; margin-right: 20px"
+    <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+      <div class="filter-item">
+        <span class="title">选择站点：</span>
+        <el-select filterable v-model="store.state.siteId" placeholder="请选择" style="width: 200px;"
           :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-input placeholder="搜索设备名" v-model="filterText" class="videoTopLeftInput"
           :disabled="store.state.authorities.indexOf('查询') == -1">
         </el-input>
-
-        <el-button type="primary" icon="Search" class="search-button" @click="searchData()"
-          :disabled="store.state.authorities.indexOf('查询') == -1">
-          搜索
-        </el-button>
-        <!-- <el-button class="search-button" icon="Plus" type="success" @click="Insert()">
-          新增
-        </el-button> -->
       </div>
 
+      <el-button type="primary" icon="Search" @click="searchData()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
+
       <!-- <div class="videoRight">
         <el-button type="primary">导入</el-button>
         <el-button type="primary">导出</el-button>
       </div> -->
     </div>
 
-    <div class="videoContent">
-      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
-        :height="Height" v-loading="loadingStatus" element-loading-text="摄像头打开中...."
-        element-loading-background="rgba(255, 255, 255, 0.6)">
-        <el-table-column prop="stationStatus" label="状态" align="center" width="50">
-          <template #default="scope">
-            <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
-              ? 'background-color:#04F21C'
-              : 'background-color:red'
-              "></el-avatar>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="deviceName" label="名称" align="center"></el-table-column>
-        <el-table-column prop="deviceCode" label="编号" align="center" width=""></el-table-column>
-
-        <el-table-column prop="floor" label="楼层" align="center" width="60"></el-table-column>
-        <el-table-column prop="deviceAddress" label="设备安装位置" align="center" width=""></el-table-column>
-        <el-table-column prop="deviceType" label="设备类型" align="center">
-          <template #default="scope">
-            {{ scope.row.deviceType == '2' ? '视频监控设备' : '其他' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="installTime" label="安装时间" align="center" width="200"></el-table-column>
-        <el-table-column prop="creator" label="创建人" align="center"></el-table-column>
-        <el-table-column prop="sim" label="sim卡号" align="center"></el-table-column>
-        <el-table-column label="视频画面" align="center" width="150">
-          <template #default="scope">
-            <a v-if="scope.row.ALIVEVALUE == 3" @click="open_video(scope.row)"> 查看 </a>
-            <span v-else style="color: #aaa">--</span>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="listPagination">
-        <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="15"
-          layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange" background></el-pagination>
-      </div>
-
-      <!--视频弹框组件开始-----------------------start-->
-      <check-video ref="checkVideoRef"></check-video>
-      <!--视频弹框组件结束-----------------------end-->
-    </div>
-
-    <div></div>
+    <el-table :data="tableData" border stripe :height="props.Height" v-loading="loadingStatus"
+      element-loading-text="摄像头打开中...." element-loading-background="rgba(255, 255, 255, 0.6)">
+      <el-table-column prop="stationStatus" label="状态" align="center" width="80">
+        <template #default="scope">
+          <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
+            ? 'background-color:#04F21C'
+            : 'background-color:red'
+            "></el-avatar>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="deviceName" label="名称" align="center"></el-table-column>
+      <el-table-column prop="deviceCode" label="编号" align="center" width=""></el-table-column>
+
+      <el-table-column prop="floor" label="楼层" align="center" width="60"></el-table-column>
+      <el-table-column prop="deviceAddress" label="设备安装位置" align="center" width=""></el-table-column>
+      <el-table-column prop="deviceType" label="设备类型" align="center">
+        <template #default="scope">
+          {{ scope.row.deviceType == '2' ? '视频监控设备' : '其他' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="installTime" label="安装时间" align="center" width="200"></el-table-column>
+      <el-table-column prop="creator" label="创建人" align="center"></el-table-column>
+      <el-table-column prop="sim" label="sim卡号" align="center"></el-table-column>
+      <el-table-column label="视频画面" align="center" width="150">
+        <template #default="scope">
+          <a v-if="scope.row.ALIVEVALUE == 3" @click="open_video(scope.row)"> 查看 </a>
+          <span v-else style="color: #aaa">--</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination class="listPagination" v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="15"
+      layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" background></el-pagination>
+
+    <!--视频弹框组件开始-----------------------start-->
+    <check-video ref="checkVideoRef"></check-video>
+    <!--视频弹框组件结束-----------------------end-->
   </div>
 </template>
 <script setup>
@@ -232,65 +225,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-//first样式
-.video {
-  margin: 15px;
-
-  //顶部左侧样式
-  .videoTop {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-
-    .videoTopLeft {
-      width: 70%;
-
-      .goBack {
-        margin-right: 15px;
-      }
-
-      .videoTopLeftTitle {
-        font-size: 14px;
-        margin-right: 10px;
-      }
-
-      .videoTopLeftInput {
-        width: 15rem;
-      }
-
-      .el-input__icon {
-        color: #409eff;
-      }
-
-      .el-input__inner:hover {
-        border-color: #409eff;
-      }
-
-      .el-input__inner:focus {
-        border-color: #409eff;
-      }
-
-      .search-button {
-        margin-left: 1rem;
-      }
-    }
-
-    //顶部右侧样式
-    .videoRight {
-      width: 30%;
-
-      button {
-        margin-left: 1rem;
-        float: right;
-      }
-    }
-  }
-
-  .videoContent {
-    margin-top: 15px;
-  }
-}
-
 .listPagination {
   margin-top: 15px;
   float: right;

src/views/monthReport/index.vue

@@ -12,10 +12,10 @@
       <div class="monthSwitch">
         <el-tree class="monthTree" ref="tree" :data="store.state.siteList" show-checkbox node-key="id"
           :props="defaultProps" :filter-node-method="filterNode">
-          <template #default="scope">
+          <template #default="{ node }">
             <span class="custom-tree-node">
               <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
-                <span>{{ scope.row.label }}</span>
+                <el-text :truncated="true"> {{ node.label }} </el-text>
               </el-tooltip>
             </span>
           </template>

src/views/monthReport/tables/basicTable.vue

@@ -1,30 +1,30 @@
 <template>
-  <div>
-    <div class="basicHeader">
-      <span class="demonstration">选择时间:</span>
-      <el-date-picker v-model="timeValue" type="month" placeholder="请选择时间" style="margin:0 15px"></el-date-picker>
-      <el-button class="search-button" icon="Plus" type="success" @click="Touch()">
-        生成
-      </el-button>
-    </div>
-    <div style="margin: 0 15px">
-      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
-        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 label="操作" width="140">
-          <template #default="scope">
-            <el-button type="primary" size="small" @click.prevent="preview(scope.row)" link>
-              预览
-            </el-button>
-            <el-button type="primary" size="small" @click="download(scope.$index, scope.row)" link>
-              下载
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+  <div class="filter-container mb-20" style="justify-content: left">
+    <div class="filter-item">
+      <span class="title">选择时间：</span>
+      <el-date-picker v-model="timeValue" type="month" placeholder="请选择时间"></el-date-picker>
     </div>
+
+    <el-button class="search-button" icon="Plus" type="success" @click="Touch()">
+      生成
+    </el-button>
   </div>
+
+  <el-table :data="tableData" :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="42rem"
+    border stripe>
+    <el-table-column prop="reportName" label="报告名称" width=""></el-table-column>
+    <el-table-column prop="reportDate" label="报告统计时间" width=""></el-table-column>
+    <el-table-column label="操作" width="140">
+      <template #default="scope">
+        <el-button type="primary" size="small" @click.prevent="preview(scope.row)" link>
+          预览
+        </el-button>
+        <el-button type="primary" size="small" @click="download(scope.$index, scope.row)" link>
+          下载
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 <script setup>
 /*----------------------------------依赖引入-----------------------------------*/

src/views/monthReport/tables/deviationTable.vue

@@ -1,35 +1,32 @@
 <template>
   <div>
-    <div class="basicHeader">
+    <div class="filter-container mb-20" style="justify-content: left">
       <el-button icon="Download" type="primary" @click="addModle">
         新建模板
       </el-button>
     </div>
-    <div style="margin: 0 15px">
-      <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="primary" size="small" @click.prevent="Update(scope.row)" link>
-              编辑
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+
+    <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="primary" size="small" @click.prevent="Update(scope.row)" link>
+            编辑
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 <script setup>
 /*----------------------------------依赖引入-----------------------------------*/
-
 import { ElMessage, ElNotification } from 'element-plus'
 import { ref, onMounted, getCurrentInstance, reactive, toRefs } from 'vue'
 /*----------------------------------接口引入-----------------------------------*/
-import * as api from '@/api/alarmManage/index'
 /*----------------------------------组件引入-----------------------------------*/
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/

src/views/siteManage/basicInfo/index.vue

@@ -3,68 +3,65 @@
     <el-form :model="ruleForm" :rules="rules" ref="formInfo" label-width="110px" class="demo-ruleForm">
       <el-row style="min-width: 1100px">
         <el-col :span="8" :gutter="20">
-          <div class="grid-content bg-purple">
-            <el-form-item label="站点名称：" prop="siteName">
-              <el-input v-model="ruleForm.siteName"></el-input>
-            </el-form-item>
-
-            <!-- <el-form-item label="站点类型：" prop="siteType">
+          <el-form-item label="站点名称：" prop="siteName">
+            <el-input v-model="ruleForm.siteName"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="站点类型：" prop="siteType">
               <el-input v-model="ruleForm.siteType"></el-input>
             </el-form-item> -->
-            <el-form-item label="用户公司：" prop="userCompany">
-              <el-input v-model="ruleForm.userCompany"></el-input>
-            </el-form-item>
-
-            <el-form-item label="投运时间：" prop="operationTime" style="margin-top: 0px">
-              <el-date-picker v-model="ruleForm.operationTime" style="width: 100%" type="date" placeholder="选择日期时间"
-                @change="comPareTime(1)"></el-date-picker>
-            </el-form-item>
-            <el-form-item label="服务截止：" prop="serviceDeadline">
-              <el-date-picker v-model="ruleForm.serviceDeadline" type="date" placeholder="选择日期时间"
-                @change="comPareTime(2)"></el-date-picker>
-            </el-form-item>
-
-            <el-form-item label="装机容量：" prop="installedCapacity">
-              <el-input v-model="ruleForm.installedCapacity"></el-input>
-            </el-form-item>
-            <el-form-item label="供电类型：" prop="powerSupplyType">
-              <el-radio-group v-model="ruleForm.powerSupplyType">
-                <el-radio label="1" value="1">单路</el-radio>
-                <el-radio label="2" value="2">双路</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="电压等级：" prop="voltageLevel">
-              <el-input v-model="ruleForm.voltageLevel"></el-input>
-            </el-form-item>
-            <el-form-item label="站点地址：" prop="siteAddress">
-              <el-input v-model="ruleForm.siteAddress"></el-input>
-            </el-form-item>
-
-            <el-form-item label="所属区域：" prop="region">
-              <el-radio-group v-model="ruleForm.region">
-                <el-radio label="1">宝山</el-radio>
-                <el-radio label="2">嘉定</el-radio>
-              </el-radio-group>
-            </el-form-item>
-
-            <el-form-item label="所属台区：" prop="stationAreaId">
-              <el-select v-model="ruleForm.stationAreaId" placeholder="请选择">
-                <el-option v-for="(item, index) in platFormData" :key="index" :label="item.platformAreaName"
-                  :value="item.id"></el-option>
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="站点坐标：" prop="longitude">
-              <el-input v-model="ruleForm.longitude" placeholder="请输入经度">
-                <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="" prop="latitude">
-              <el-input v-model="ruleForm.latitude" placeholder="请输入维度">
-                <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
-              </el-input>
-            </el-form-item>
-          </div>
+          <el-form-item label="用户公司：" prop="userCompany">
+            <el-input v-model="ruleForm.userCompany"></el-input>
+          </el-form-item>
+
+          <el-form-item label="投运时间：" prop="operationTime" style="margin-top: 0px">
+            <el-date-picker v-model="ruleForm.operationTime" style="width: 100%" type="date" placeholder="选择日期时间"
+              @change="comPareTime(1)"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="服务截止：" prop="serviceDeadline">
+            <el-date-picker v-model="ruleForm.serviceDeadline" type="date" placeholder="选择日期时间"
+              @change="comPareTime(2)"></el-date-picker>
+          </el-form-item>
+
+          <el-form-item label="装机容量：" prop="installedCapacity">
+            <el-input v-model="ruleForm.installedCapacity"></el-input>
+          </el-form-item>
+          <el-form-item label="供电类型：" prop="powerSupplyType">
+            <el-radio-group v-model="ruleForm.powerSupplyType">
+              <el-radio label="1" value="1">单路</el-radio>
+              <el-radio label="2" value="2">双路</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="电压等级：" prop="voltageLevel">
+            <el-input v-model="ruleForm.voltageLevel"></el-input>
+          </el-form-item>
+          <el-form-item label="站点地址：" prop="siteAddress">
+            <el-input v-model="ruleForm.siteAddress"></el-input>
+          </el-form-item>
+
+          <el-form-item label="所属区域：" prop="region">
+            <el-radio-group v-model="ruleForm.region">
+              <el-radio label="1">宝山</el-radio>
+              <el-radio label="2">嘉定</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="所属台区：" prop="stationAreaId">
+            <el-select v-model="ruleForm.stationAreaId" placeholder="请选择">
+              <el-option v-for="(item, index) in platFormData" :key="index" :label="item.platformAreaName"
+                :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="站点坐标：" prop="longitude">
+            <el-input v-model="ruleForm.longitude" placeholder="请输入经度">
+              <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="" prop="latitude">
+            <el-input v-model="ruleForm.latitude" placeholder="请输入维度">
+              <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
+            </el-input>
+          </el-form-item>
         </el-col>
         <el-col :span="8" :gutter="20">
           <!-- <el-form-item label="监察：" prop="region">
@@ -126,46 +123,40 @@
           </el-form-item>
         </el-col>
         <el-col :span="8" :gutter="20">
-          <div class="grid-content bg-purple">
-            <div class="grid-content bg-purple-light">
-              <!-- 站点照片start -->
-              <div class="blockTitle mb-20">站点照片</div>
-              <!-- <img v-if="ruleForm.value.sitePictureOne" :src="ruleForm.value.sitePictureOne" alt=""> -->
-              <el-form-item label="选择文件：" prop="delivery">
-                <el-upload :action="uploadUrl" :on-success="handleUpAvatar" :on-remove="handleRemove"
-                  :show-file-list="true" list-type="picture-card" :limit="3" :file-list="fileListImages"
-                  :on-preview="handlePictureCardPreview" :headers="{ accessToken: [accessToken] }"
-                  :on-exceed="overLength">
-                  <Plus style="width: 2em; height: 2em;" />
-                </el-upload>
-                <el-dialog v-model="dialogVisible" width="400px">
-                  <img style="width: 100%" :src="dialogImageUrl" alt="" />
-                </el-dialog>
-              </el-form-item>
-              <!-- 站点照片end -->
-
-              <el-form-item label="联系人：" prop="userName">
-                <el-input v-model="ruleForm.userName"></el-input>
-              </el-form-item>
-              <el-form-item label="联系方式：" prop="phone">
-                <el-input v-model="ruleForm.phone"></el-input>
-              </el-form-item>
-              <el-form-item label="联系人2：" prop="spareUserName">
-                <el-input v-model="ruleForm.spareUserName"></el-input>
-              </el-form-item>
-              <el-form-item label="联系方式2：" prop="sparePhone">
-                <el-input v-model="ruleForm.sparePhone"></el-input>
-              </el-form-item>
-            </div>
-            <br />
-            <el-form-item>
-              <el-button type="primary" @click="submitForm('formInfo')"
-                :disabled="isDisable || store.state.authorities.indexOf('修改') == -1">
-                保存
-              </el-button>
-              <!-- <el-button @click="resetForm('formInfo')">取消</el-button> -->
-            </el-form-item>
-          </div>
+          <!-- 站点照片start -->
+          <div class="blockTitle mb-20">站点照片</div>
+          <!-- <img v-if="ruleForm.value.sitePictureOne" :src="ruleForm.value.sitePictureOne" alt=""> -->
+          <el-form-item label="选择文件：" prop="delivery">
+            <el-upload :action="uploadUrl" :on-success="handleUpAvatar" :on-remove="handleRemove" :show-file-list="true"
+              list-type="picture-card" :limit="3" :file-list="fileListImages" :on-preview="handlePictureCardPreview"
+              :headers="{ accessToken: [accessToken] }" :on-exceed="overLength">
+              <Plus style="width: 2em; height: 2em;" />
+            </el-upload>
+            <el-dialog v-model="dialogVisible" width="400px">
+              <img style="width: 100%" :src="dialogImageUrl" alt="" />
+            </el-dialog>
+          </el-form-item>
+          <!-- 站点照片end -->
+          <el-form-item label="联系人：" prop="userName">
+            <el-input v-model="ruleForm.userName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系方式：" prop="phone">
+            <el-input v-model="ruleForm.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人2：" prop="spareUserName">
+            <el-input v-model="ruleForm.spareUserName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系方式2：" prop="sparePhone">
+            <el-input v-model="ruleForm.sparePhone"></el-input>
+          </el-form-item>
+          <br />
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('formInfo')"
+              :disabled="isDisable || store.state.authorities.indexOf('修改') == -1">
+              保存
+            </el-button>
+            <!-- <el-button @click="resetForm('formInfo')">取消</el-button> -->
+          </el-form-item>
         </el-col>
       </el-row>
     </el-form>

src/views/siteManage/camera/index.vue

@@ -12,8 +12,6 @@
         </a>
       </div>
 
-
-
       <el-upload class="upload-demo" :action="fileUrl + '/device/deviceImport'" :on-progress="handleProgress"
         :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
           accessToken: [accessToken],
@@ -29,9 +27,9 @@
 
     <!-- 表格start -->
 
-    <el-table :data="deviceData" :header-cell-style="{ background: '#FAFAFA' }" v-loading="loadingStatus"
-      element-loading-text="摄像头打开中...." element-loading-background="rgba(255, 255, 255, 0.6)"> border stripe
-      <el-table-column prop="status" align="center" label="状态" width="50">
+    <el-table :data="deviceData" v-loading="loadingStatus" element-loading-text="摄像头打开中...."
+      element-loading-background="rgba(255, 255, 255, 0.6)"> border stripe
+      <el-table-column prop="status" align="center" label="状态" width="80">
         <template #default="scope">
           <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
             ? 'background-color:#04F21C'

src/views/siteManage/groupInfoCom.vue

@@ -1,20 +1,18 @@
 <template>
-  <div class="siteManage-main groupInfo">
+  <div class="siteManage-main groupInfo p20">
     <el-form :model="form" :rules="rules" ref="formInfo" label-width="100px">
-      <div class="grid-content bg-purple">
-        <div class="el-form-item blockTitle">分组信息</div>
-        <div></div>
-        <el-form-item label="分组名称" prop="groupingName" label-width="130px">
-          <el-input v-model="form.groupingName" v-if="label == '所有站点'" disabled></el-input>
-          <el-input v-model="form.groupingName" v-else></el-input>
-        </el-form-item>
+      <div class="el-form-item blockTitle">分组信息</div>
+      <div></div>
+      <el-form-item label="分组名称" prop="groupingName" label-width="130px">
+        <el-input v-model="form.groupingName" v-if="label == '所有站点'" disabled></el-input>
+        <el-input v-model="form.groupingName" v-else></el-input>
+      </el-form-item>
 
-        <el-form-item>
-          <el-button type="primary" @click="submitForm('formInfo')" v-if="label != '所有站点'">
-            保存
-          </el-button>
-        </el-form-item>
-      </div>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('formInfo')" v-if="label != '所有站点'">
+          保存
+        </el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>

src/views/siteManage/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container page-nesting" style="position: relative">
+  <div class="app-container page-nesting" style="display: flex;">
     <!-- 树形组件start -->
-    <div class="grid-content treeDom">
+    <div class="grid-content left-area">
       <div style="text-align: center" class="mb-20">
         <el-button :type="treeLevel == 3 || groupingId == 0 || treeLevel == 1 ? '' : 'primary'" @click="addGroup()"
           :disabled="treeLevel == 3 || groupingId == 0 || treeLevel == 1 || store.state.authorities.indexOf('新增') == -1">
@@ -14,16 +14,15 @@
       </div>
       <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="mb-20 searchInput"></el-input>
 
-      <el-tree class="filter-tree siteTree" ref="tree" :data="treeData" node-key="id"
+      <el-tree class="filter-tree" ref="tree" :data="treeData" node-key="id"
         :props="{ children: 'children', label: 'label', }" :filter-node-method="filterNode" @node-click="handleNodeClick"
         :expand-on-click-node="false" :highlight-current="true" default-expand-all :current-node-key="0">
         <template #default="{ node, data }">
           <span class="custom-tree-node" style="width: 100%" @mouseenter="(event) => event.show = true"
             @mouseleave="(event) => event.show = false">
-            <span>{{ node.label }}</span>
-            <!-- <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
-              <span>{{ node.label }}</span>
-            </el-tooltip> -->
+            <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
+              <el-text :truncated="true"> {{ node.label }} </el-text>
+            </el-tooltip>
             <span>
               <a class="deleteLink" v-show="data.show" @click="remove(node, data)">
                 <!-- <i size="mini" class="el-icon-delete"></i> -->
@@ -36,7 +35,7 @@
     <!-- 树形组件end -->
 
     <!-- 站点主题start -->
-    <div class="grid-content nestingDom" style="width: calc(100% - 300px)" v-if="flag2 && treeLevel != 1">
+    <div class="grid-content  right-area" v-if="flag2 && treeLevel != 1">
       <el-tabs v-if="treeLevel == 3 || groupingId == 0" v-model="activeName" type="card">
         <el-tab-pane label="基本信息" name="first">
           <basic-info class="basicInfo" :siteId="siteId" :groupingId="groupingId" :siteName="siteName"
@@ -265,7 +264,15 @@ onMounted(() => {
 nextTick(() => { })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+.groupInfo,
+.basic-info-page,
+.powerScore {
+  .el-form-item {
+    margin-left: 0px !important
+  }
+}
+
 .custom-tree-node {
   overflow: hidden;
   white-space: nowrap;
@@ -276,32 +283,39 @@ nextTick(() => { })
 .grid-content {
   background: #fff;
   height: calc(100vh - 130px);
+  min-height: calc(100vh - 130px);
   overflow-y: auto;
 }
 
-.el-input__inner {
-  border-radius: 20px !important;
-}
-
-.treeDom {
-  width: 290px;
-  position: absolute;
-  left: 0;
-  // margin-left: 20px;
+.left-area {
+  width: 20%;
   padding: 20px;
-  min-height: calc(100vh - 130px);
-
-  .el-icon-search {
-    color: #409eff;
-  }
 
   .el-button {
     width: 100px;
   }
+
+  .filter-tree .el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+  }
 }
 
-.nestingDom {
-  margin-left: 300px;
+.right-area {
+  width: calc(80% - 20px);
+  margin-left: 20px;
+
+
+  .basicInfo {
+    width: 100%;
+    height: calc(100vh - 225px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+  }
+
 }
 </style>
 <style lang="scss">

src/views/siteManage/powerScore/index.vue

@@ -1,41 +1,39 @@
 <template>
   <div class="siteManage-main powerScore">
     <el-form :model="ruleForm" :rules="rules" ref="formInfo" label-width="137px" class="demo-ruleForm">
-      <div class="grid-content bg-purple">
-        <div class="el-form-item blockTitle">电能质量各要素权重</div>
-        <div></div>
-        <el-form-item label="功率因数(100%)" prop="powerFactorOne" label-width="130px">
-          <el-input v-model="ruleForm.powerFactorOne"></el-input>
-        </el-form-item>
-
-        <el-form-item label="电压合格率(%)" prop="voltageQualified" label-width="130px">
-          <el-input v-model="ruleForm.voltageQualified"></el-input>
-        </el-form-item>
-        <el-form-item label="负载率(%)" prop="loadRate" label-width="130px">
-          <el-input v-model="ruleForm.loadRate"></el-input>
-        </el-form-item>
-        <el-form-item label="电流平衡度(%)：" prop="currentBalance" label-width="130px">
-          <el-input v-model="ruleForm.currentBalance"></el-input>
-        </el-form-item>
-
-        <el-form-item label="电压平衡度(%)：" prop="voltageBalance" label-width="130px">
-          <el-input v-model="ruleForm.voltageBalance"></el-input>
-        </el-form-item>
-        <el-form-item label="谐波畸变率(%)" prop="thdu" label-width="130px">
-          <el-input v-model="ruleForm.thdu"></el-input>
-        </el-form-item>
-
-        <div class="el-form-item blockTitle">功率因素</div>
-
-        <el-form-item label="功率因数" prop="powerFactorTwo" label-width="130px">
-          <el-input v-model="ruleForm.powerFactorTwo"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisable">
-            保存
-          </el-button>
-        </el-form-item>
-      </div>
+      <div class="el-form-item blockTitle">电能质量各要素权重</div>
+      <div></div>
+      <el-form-item label="功率因数(100%)" prop="powerFactorOne" label-width="130px">
+        <el-input v-model="ruleForm.powerFactorOne"></el-input>
+      </el-form-item>
+
+      <el-form-item label="电压合格率(%)" prop="voltageQualified" label-width="130px">
+        <el-input v-model="ruleForm.voltageQualified"></el-input>
+      </el-form-item>
+      <el-form-item label="负载率(%)" prop="loadRate" label-width="130px">
+        <el-input v-model="ruleForm.loadRate"></el-input>
+      </el-form-item>
+      <el-form-item label="电流平衡度(%)：" prop="currentBalance" label-width="130px">
+        <el-input v-model="ruleForm.currentBalance"></el-input>
+      </el-form-item>
+
+      <el-form-item label="电压平衡度(%)：" prop="voltageBalance" label-width="130px">
+        <el-input v-model="ruleForm.voltageBalance"></el-input>
+      </el-form-item>
+      <el-form-item label="谐波畸变率(%)" prop="thdu" label-width="130px">
+        <el-input v-model="ruleForm.thdu"></el-input>
+      </el-form-item>
+
+      <div class="el-form-item blockTitle">功率因素</div>
+
+      <el-form-item label="功率因数" prop="powerFactorTwo" label-width="130px">
+        <el-input v-model="ruleForm.powerFactorTwo"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisable">
+          保存
+        </el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>

src/views/siteManage/variableList/index.vue

@@ -50,8 +50,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }"
-      :default-sort="{ prop: 'date', order: 'descending' }">
+    <el-table :data="tableData" border stripe :default-sort="{ prop: 'date', order: 'descending' }">
       <el-table-column type="index" label="序号" width="80px" sortable></el-table-column>
       <el-table-column prop="variableName" label="变量名" width="150px" sortable></el-table-column>
       <el-table-column prop="variableCoding" label="变量编号" width="150px" sortable></el-table-column>

src/views/siteManage/watchDog/index.vue

@@ -24,7 +24,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+    <el-table :data="tableData" border stripe>
       <el-table-column prop="status" align="center" label="状态" width="50">
         <template #default="scope">
           <el-avatar class="status" :style="scope.row.status == 0

src/views/stationManage/index.vue

@@ -22,7 +22,7 @@
       <!-- 筛选end -->
 
       <!-- 表格start -->
-      <el-table :data="tableData" :header-cell-style="{ background: '#FAFAFA' }" border stripe>
+      <el-table :data="tableData" border stripe>
         <el-table-column fixed prop="platformAreaName" label="台区名称" width=""></el-table-column>
         <el-table-column prop="platformAreaCode" label="台区编号" width=""></el-table-column>
         <el-table-column prop="platformAreaAddress" label="台区地址" width=""></el-table-column>

src/views/stationManage/siteList.vue

@@ -6,7 +6,7 @@
     </div>
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+    <el-table :data="tableData" border stripe>
       <el-table-column prop="siteName" label="站点名称" width="" fixed></el-table-column>
       <el-table-column prop="siteAddress" label="站点位置" width=""></el-table-column>
       <el-table-column prop="userName" label="联系人" width="">