更改设备管理监控设备页面结构和逻辑

src/views/deviceManage/powerEquip/deviceDetails.vue

@@ -1,134 +1,181 @@
 <template>
-  <el-table
-    :data="
-      deviceNumData.filter(
-        (data) =>
-          !filter_Text ||
-          data.monitorDeviceName
-            .toLowerCase()
-            .includes(filter_Text.toLowerCase()) ||
-          data.monitorDeviceCode
-            .toLowerCase()
-            .includes(filter_Text.toLowerCase())
-      )
-    "
-    border
-    stripe
-    :header-cell-style="headClass"
-    :height="Height"
-  >
-    <el-table-column prop="status" align="center" label="状态" width="50">
-      <template #default="scope">
-        <el-avatar
-          class="status"
-          :style="
-            scope.row.status == 1
-              ? 'background-color:red'
-              : 'background-color:#04F21C'
-          "
-        ></el-avatar>
-      </template>
-    </el-table-column>
-    <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>
-    <el-table-column
-      prop="ratedVoltage"
-      label="额定电压"
-      align="center"
-      width=""
-    ></el-table-column>
-    <el-table-column
-      prop="ratedCurrent"
-      label="额定电流"
-      align="center"
-      width=""
-    ></el-table-column>
-    <el-table-column
-      prop="currentLoadRate"
-      label="电流负载率门限"
-      align="center"
-      width=""
-    ></el-table-column>
-    <el-table-column
-      prop="qualityAnalysis"
-      label="电能质量分析"
-      align="center"
-      width=""
-    ></el-table-column>
-    <el-table-column label="操作" align="center" width="150">
-      <template #default="scope">
-        <el-button
-          type="text"
-          size="small"
-          style="color: #409eff"
-          @click.prevent="editRow(scope.row)"
-        >
-          编辑
-        </el-button>
-        <el-popconfirm
-          confirm-button-text="是"
-          cancel-button-text="否"
-          icon="el-icon-info"
-          icon-color="red"
-          title="确定删除?"
-          @confirm="handleDelete(scope.row)"
-          @cancel="cancelEvent"
+  <div>
+    <div class="firstTop mb-20">
+      <div class="firstTopLeft">
+        <el-button class="goBack" @click="goBack">返回</el-button>
+
+        选择站点:
+        <el-select
+          v-model="store.state.siteId"
+          placeholder="请选择"
+          style="width: 200px; margin-right: 20px"
         >
-          <template #reference>
-            <el-button type="text" size="small" style="color: red">
-              删除
-            </el-button>
-          </template>
-        </el-popconfirm>
-      </template>
-    </el-table-column>
-    <el-table-column label="变量" align="center" width="100">
-      <template #default="scope">
-        <el-button
-          type="text"
-          size="small"
-          style="color: #409eff"
-          @click.prevent="variableList(scope.row)"
+          <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="el-icon-search"
+                  class="search-button"
+                  @click="listSelect()"
+                >
+                  搜索
+                </el-button>
+
+        <!-- <el-button
+          class="search-button"
+          icon="el-icon-plus"
+          type="success"
+          @click="addItem()"
         >
-          变量列表
-        </el-button>
-      </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-button> -->
+      </div>
+    </div>
 
-  <list-Dialog
-    :list_Dialog="listDialogBool"
-    @closeNo="closeNo"
-    :DialogArray="DialogArray"
-  ></list-Dialog>
+    <el-table
+      :data="
+        deviceNumData.filter(
+          (data) =>
+            !filter_Text ||
+            data.monitorDeviceName
+              .toLowerCase()
+              .includes(filter_Text.toLowerCase()) ||
+            data.monitorDeviceCode
+              .toLowerCase()
+              .includes(filter_Text.toLowerCase())
+        )
+      "
+      border
+      stripe
+      :header-cell-style="headClass"
+      :height="Height"
+    >
+      <el-table-column prop="status" align="center" label="状态" width="50">
+        <template #default="scope">
+          <el-avatar
+            class="status"
+            :style="
+              scope.row.status == 1
+                ? 'background-color:red'
+                : 'background-color:#04F21C'
+            "
+          ></el-avatar>
+        </template>
+      </el-table-column>
+      <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>
+      <el-table-column
+        prop="ratedVoltage"
+        label="额定电压"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="ratedCurrent"
+        label="额定电流"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="currentLoadRate"
+        label="电流负载率门限"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="qualityAnalysis"
+        label="电能质量分析"
+        align="center"
+        width=""
+      ></el-table-column>
+      <el-table-column label="操作" align="center" width="150">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            style="color: #409eff"
+            @click.prevent="editRow(scope.row)"
+          >
+            编辑
+          </el-button>
+          <el-popconfirm
+            confirm-button-text="是"
+            cancel-button-text="否"
+            icon="el-icon-info"
+            icon-color="red"
+            title="确定删除?"
+            @confirm="handleDelete(scope.row)"
+            @cancel="cancelEvent"
+          >
+            <template #reference>
+              <el-button type="text" size="small" style="color: red">
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+      <el-table-column label="变量" align="center" width="100">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            style="color: #409eff"
+            @click.prevent="variableList(scope.row)"
+          >
+            变量列表
+          </el-button>
+        </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>
+
+    <list-Dialog
+      :list_Dialog="listDialogBool"
+      @closeNo="closeNo"
+      :DialogArray="DialogArray"
+    ></list-Dialog>
+  </div>
 </template>
 
 <script>
@@ -187,7 +234,7 @@ export default defineComponent({
           }
         })
     }
-    
+
     //删除 是否删除  ---- 是
     const handleDelete = (row) => {
       api.deviceNewsDel({ id: row.id }).then((requset) => {
@@ -218,7 +265,7 @@ export default defineComponent({
         listSelect()
       }
     })
-    
+
     onMounted(() => {
       listSelect()
     })
@@ -252,6 +299,9 @@ export default defineComponent({
       total,
       handleSizeChange,
       handleCurrentChange,
+      listSelect,
+
+      store
     }
   },
 })

src/views/deviceManage/powerEquip/index.vue

@@ -8,21 +8,14 @@
     >
       <el-tab-pane label="电力监测设备" name="powerEquip">
         <div class="first">
-          <div class="firstTop">
-            <div class="firstTopLeft">
-              <el-button
-                class="goBack"
-                @click="goBack"
-                v-if="deviceNumData.length != ''"
-              >
-                返回
-              </el-button>
-             
+          <div class="insertBox" v-if="deviceNumData.length == ''">
+            <div class="firstTop">
+              <div class="firstTopLeft">
                 <!-- 选择站点:
-                <el-select 
+                <el-select
                   v-model="store.state.siteId"
                   placeholder="请选择"
-                  style="width: 150px;margin-right:20px"
+                  style="width: 150px; margin-right: 20px"
                 >
                   <el-option
                     v-for="site in store.state.siteList"
@@ -31,105 +24,106 @@
                     :value="site.id"
                   ></el-option>
                 </el-select> -->
-              
-              <span class="firstTopLeftTitle">
-                {{ deviceNumData.length != '' ? '设备或编号' : '名称或地址' }}:
-              </span>
-              <el-input
-                placeholder="输入关键字进行过滤"
-                v-model="filterText"
-                class="firstTopLeftInput"
-              >
-                <template #suffix>
-                  <i class="el-icon-search el-input__icon"></i>
-                </template>
-              </el-input>
-              <el-button
-                class="search-button"
-                icon="el-icon-plus"
-                type="success"
-                @click="addItem()"
-              >
-                新增
-              </el-button>
+
+                <span class="firstTopLeftTitle">站点名称:</span>
+                <el-input
+                  placeholder="输入关键字进行过滤"
+                  v-model="filterText"
+                  class="firstTopLeftInput"
+                >
+             
+                </el-input>
+
+                <el-button
+                  type="primary"
+                  icon="el-icon-search"
+                  class="search-button"
+                  @click="monitorDeviceList()"
+                >
+                  搜索
+                </el-button>
+
+                <el-button
+                  class="search-button"
+                  icon="el-icon-plus"
+                  type="success"
+                  @click="addItem()"
+                >
+                  新增
+                </el-button>
+              </div>
             </div>
-          </div>
 
-          <div class="firstContent" v-if="deviceNumData.length == ''">
-            <el-table
-              :data="
-                tableData.filter(
-                  (data) =>
-                    !filterText ||
-                    data.siteName
-                      .toLowerCase()
-                      .includes(filterText.toLowerCase()) ||
-                    data.siteAddress
-                      .toLowerCase()
-                      .includes(filterText.toLowerCase())
-                )
-              "
-              border
-              stripe
-              :header-cell-style="headClass"
-              :height="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=""
+            <div class="firstContent">
+              <el-table
+                :data="
+                  tableData"
+                border
+                stripe
+                :header-cell-style="headClass"
+                :height="Height"
               >
-                <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>
+                <el-table-column
+                  prop="siteName"
+                  label="站点名称"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="siteAddress"
+                  label="站点地址"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="userName"
+                  label="联系人"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="phone"
+                  label="手机号"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="deviceCount"
+                  label="设备数量"
+                  align="center"
+                  width=""
+                >
+                  <template #default="scope">
+                    <div
+                      style="
+                        margin-right: 15px;
+                        cursor: pointer;
+                        color: #409eff;
+                      "
+                      @click="
+                        deviceNumSelect({
+                          id: scope.row.id,
+                          deviceCount: scope.row.deviceCount,
+                        })
+                      "
+                    >
+                      {{ scope.row.deviceCount }}
+                    </div>
+                  </template>
+                </el-table-column>
+              </el-table>
+              <div class="listPagination1">
+                <el-pagination
+                  v-model:currentPage="currentPage"
+                  :page-sizes="[15, 20, 25, 30]"
+                  :page-size="pageSize"
+                  layout="total, sizes, prev, pager, next, jumper"
+                  :total="total"
+                  @size-change="handleSizeChange"
+                  @current-change="handleCurrentChange"
+                  background
+                ></el-pagination>
+              </div>
             </div>
           </div>
 
-          <div class="firstContent" v-if="deviceNumData.length != ''">
+          <div class="listBox" v-else>
             <deviceDetails
               :filter_Text="filterText"
               :Height="Height"
@@ -256,6 +250,7 @@ export default defineComponent({
         .monitorDeviceList({
           size: pageSize.value,
           current: currentPage.value,
+          siteName:filterText.value
         })
         .then((requset) => {
           if (requset.status === 'SUCCESS') {
@@ -314,6 +309,7 @@ export default defineComponent({
       updateTitle,
       goBack,
       headClass,
+      monitorDeviceList,
       store,
 
       total,