代码更新202110110948

src/assets/css/global.scss

@@ -91,4 +91,10 @@ a:hover {
 }
 .el-checkbox__input.is-checked + .el-checkbox__label{
     color: #409eff;
+}
+
+
+.el-pagination .btn-prev .el-icon,
+.el-pagination .btn-next .el-icon {
+  padding-left: 10px;
 }

src/views/deviceManage/powerEquip/deviceDetails.vue

@@ -145,25 +145,101 @@
     width="70rem"
     :before-close="listHandleClose"
   >
-    <div class="dialogOne">
+    <div class="dialogOne" style="overflow: hidden">
       <el-radio-group
         v-model="listTabPosition"
         @change="listTabsChange(listTabPosition)"
-        style="margin-bottom: 30px"
+        style="margin-bottom: 15px; display: flex"
       >
         <el-radio-button label="model">模拟量</el-radio-button>
         <el-radio-button label="state">状态量</el-radio-button>
         <el-radio-button label="parameter">参数量</el-radio-button>
+        <div style="margin-left: 10px">
+          <el-button icon="el-icon-plus" type="success">新增</el-button>
+          <el-button type="danger" icon="el-icon-delete">删除</el-button>
+        </div>
       </el-radio-group>
-      <el-button
-        class="search-button"
-        icon="el-icon-plus"
-        type="success"
-        @click="addItem()"
-        >新增</el-button
+
+      <el-input
+        placeholder="搜索变量或编码"
+        v-model="listInputText"
+        style="width: 15rem; margin-bottom: 15px"
+      >
+        <template #suffix>
+          <i class="el-icon-search el-input__icon"></i>
+        </template>
+      </el-input>
+
+      <el-table
+        :data="
+          listNumberData.filter(
+            (data) =>
+              !listInputText ||
+              data.varName
+                .toLowerCase()
+                .includes(listInputText.toLowerCase()) ||
+              data.varCoding.toLowerCase().includes(listInputText.toLowerCase())
+          )
+        "
+        border
+        stripe
+        :header-cell-style="headClass"
+        @selection-change="listSelectionChange"
       >
+        <el-table-column type="selection" width="55" />
+        <el-table-column
+          type="index"
+          label="序号"
+          sortable
+          width=""
+        ></el-table-column>
+        <el-table-column prop="varName" label="变量名" sortable width="">
+        </el-table-column>
+        <el-table-column prop="varCoding" label="变量编码" sortable width="">
+        </el-table-column>
+        <el-table-column prop="signalDevice" label="通信设备" sortable width="">
+        </el-table-column>
+        <el-table-column prop="dataAdd" label="数据地址" sortable width="">
+        </el-table-column>
+        <el-table-column prop="dataType" label="数据类型" width="">
+        </el-table-column>
+        <el-table-column prop="coefficient" label="系数" width="">
+        </el-table-column>
+        <el-table-column prop="saveCycle" label="存盘周期" width="">
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="">
+          <template #default="scope">
+            <el-button
+              type="text"
+              size="small"
+              style="color: #409eff"
+              @click.prevent="listUpdate(scope.row)"
+              >修改</el-button
+            >
+            <el-button
+              @click="listDelete(scope.$index, scope.row)"
+              type="text"
+              size="small"
+              style="color: red"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
 
-      <el-button type="primary" icon="el-icon-delete">删除</el-button>
+      <div class="listPagination">
+        <el-pagination
+          v-model:currentPage="currentPage4"
+          :page-sizes="[15, 20, 25, 30]"
+          :page-size="15"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="device_NumData.length"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          background
+        >
+        </el-pagination>
+      </div>
     </div>
     <template #footer>
       <span class="dialog-footer">
@@ -177,18 +253,6 @@
 import { defineComponent, ref, Ref } from "vue";
 import { ElMessageBox } from "element-plus";
 
-// interface PowerEquipData {
-//   cloneDialog: Ref<boolean>; //克隆弹窗控制
-//   cloneChecked: Ref<boolean>; //克隆复选框控制
-//   cloneRadio: Ref; //克隆单选框控制
-//   cloneHandleClose: (done: any) => void; //克隆弹窗控制方法回调
-//   cloneInputName: Ref; //克隆input
-//   cloneInputCode: Ref; //克隆input
-
-//   listDialog: Ref<boolean>; //变量列表弹窗控制
-//   listHandleClose: (done: any) => void; //克隆弹窗控制方法回调
-// }
-
 //克隆弹窗基础数据定义
 const cloneData = () => {
   const cloneDialog = ref(false); //克隆弹窗控制
@@ -235,7 +299,30 @@ export default defineComponent({
     filter_Text: String,
   },
   data() {
-    return {};
+    return {
+      listInputText: "", //变量列表input搜索框
+      multipleSelection: [], //变量列表弹窗复选框值存储
+      listNumberData: [
+        {
+          varName: "A相电压",
+          varCoding: "bgbsk_183_Us",
+          signalDevice: "嘉定区竞园新区六里村委(综合用房)",
+          dataAdd: "YC[o]",
+          dataType: "4字节浮点4321",
+          coefficient: 0.001,
+          saveCycle: "5分钟",
+        },
+        {
+          varName: "A相电压",
+          varCoding: "bgbsk_183_Us",
+          signalDevice: "嘉定区竞园新区六里村委(综合用房)",
+          dataAdd: "YC[o]",
+          dataType: "4字节浮点4321",
+          coefficient: 0.001,
+          saveCycle: "5分钟",
+        },
+      ], //变量列表弹窗table值存储
+    };
   },
   setup() {
     const {
@@ -252,6 +339,13 @@ export default defineComponent({
     const { listDialog, listHandleClose, listTitleDialog, listTabPosition } =
       listData();
 
+    const handleSizeChange = (val) => {
+      console.log(`${val} items per page`);
+    };
+    const handleCurrentChange = (val) => {
+      console.log(`current page: ${val}`);
+    };
+
     return {
       cloneDialog,
       cloneChecked,
@@ -266,9 +360,16 @@ export default defineComponent({
       listHandleClose,
       listTitleDialog,
       listTabPosition,
+      currentPage4: ref(4),
+      handleSizeChange,
+      handleCurrentChange,
     };
   },
   methods: {
+    //变量列表弹窗table 复选框change事件
+    listSelectionChange(val) {
+      this.multipleSelection = val;
+    },
     //变量列表弹窗tabs切换change事件
     listTabsChange(value) {
       console.log(value);
@@ -316,4 +417,9 @@ export default defineComponent({
     }
   }
 }
+.listPagination {
+  margin-top: 15px;
+  margin-bottom: -30px;
+  float: right;
+}
 </style>