修改语法，联调列表接口

src/views/siteManage/variableList/index.vue

@@ -5,25 +5,37 @@
       <div class="left">
         <div>
           <a class="" style="margin-right: 30px">【测试站点1】站点的所有变量</a>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()"
-            >新增</el-button
-          >
-          <el-button icon="el-icon-refresh" type="primary"
-            >同步配置到采集器</el-button
-          >
+          <el-button icon="el-icon-plus" type="success" @click="addItem()">
+            新增
+          </el-button>
+          <el-button icon="el-icon-refresh" type="primary">
+            同步配置到采集器
+          </el-button>
         </div>
 
         <div style="margin-top: 20px">
-          <el-button @click="select=1" :type="select==1 ? 'primary' : ''" >模拟量</el-button>
-          <el-button @click="select=2"  :type="select==2 ? 'primary' : ''" >状态量</el-button>
-          <el-button @click="select=3" :type="select==3 ? 'primary' : ''">参数量</el-button>
+          <el-button @click="Select(1)" :type="select == 1 ? 'primary' : ''">
+            模拟量
+          </el-button>
+          <el-button @click="Select(2)" :type="select == 2 ? 'primary' : ''">
+            状态量
+          </el-button>
+          <el-button @click="Select(3)" :type="select == 3 ? 'primary' : ''">
+            参数量
+          </el-button>
           <el-input
-            placeholder="搜索变量或编码"
-            style="width: 200px;margin-left:20px"
+            placeholder="搜索变量名称"
+            style="width: 200px; margin-left: 20px"
+            v-model="variableName"
           ></el-input>
-          <el-button type="primary" icon="el-icon-search" class="search-button"
-            >搜索</el-button
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            class="search-button"
+            @click="query()"
           >
+            搜索
+          </el-button>
         </div>
         <!-- <el-radio-group v-model="tabPosition" style="margin-top: 20px">
           <el-radio-button label="one">模拟量</el-radio-button>
@@ -40,51 +52,85 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="headClass" :default-sort="{prop: 'date', order: 'descending'}">
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+      :default-sort="{ prop: 'date', order: 'descending' }"
+    >
       <el-table-column
-        fixed
-        prop="watchStatus"
-        label="状态"
-        width="50"
-        align="center"
-      >
-        <template #default >
-          <el-avatar class="status"></el-avatar>
-        </template>
-      </el-table-column>
-      <el-table-column prop="watchName" label="序号" width="" sortable>
-      </el-table-column>
-      <el-table-column prop="watchCode" label="变量名" width="" sortable>
-      </el-table-column>
-      <el-table-column prop="ratedVoltage" label="变量编号" width="" sortable>
-      </el-table-column>
-      <el-table-column prop="ratedCurrent" label="监控设备" width="">
-      </el-table-column>
-      <el-table-column prop="fzlMx" label="通信设备" width="">
-      </el-table-column>
-      <el-table-column prop="powerAnalysis" label="数据地址" width="">
-      </el-table-column>
-      <el-table-column prop="watchAddress" label="数据类型" width="">
-      </el-table-column>
-      <el-table-column prop="watchAddress" label="系数" width="">
-      </el-table-column>
-      <el-table-column prop="watchAddress" label="存盘周期" width="">
-      </el-table-column>
+        type="index"
+        label="序号"
+        width=""
+        sortable
+      ></el-table-column>
+      <el-table-column
+        prop="variableName"
+        label="变量名"
+        width=""
+        sortable
+      ></el-table-column>
+      <el-table-column
+        prop="variableCoding"
+        label="变量编号"
+        width=""
+        sortable
+      ></el-table-column>
+      <el-table-column
+        prop="monitorDeviceName"
+        label="监控设备"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="deviceName"
+        label="通信设备"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="dataAddress"
+        label="数据地址"
+        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="180">
         <template #default="scope">
           <el-button
             type="text"
             size="small"
             @click.prevent="editRow(scope.row)"
-            >修改</el-button
           >
-          <el-button
-            @click="handleDelete(scope.$index, scope.row)"
-            type="text"
-            size="small"
-            class="delete-text"
-            >删除</el-button
+            修改
+          </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" class="delete-text">
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
@@ -93,261 +139,184 @@
     <!-- 分页start -->
     <div class="paginationBlock">
       <el-pagination
-        
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-        :current-page="currentPage4"
-        :page-sizes="[100, 200, 300, 400]"
-        :page-size="100"
+        :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]"
+        :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
-        :total="400"
-      >
-      </el-pagination>
+        :total="total"
+      ></el-pagination>
     </div>
 
     <!-- 分页end -->
 
     <!--弹框组件开始-----------------------start-->
     <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
       :dialog-title="dialogTitle"
       :item-info="tableItem"
       @closeDialog="closeDialog"
+      :show_Dialog="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
 <script>
-import DialogComponent from "./dialogComponent";
+import DialogComponent from './dialogComponent'
+import * as api from '@/api/siteManage/variableList'
+import { defineComponent, onMounted, ref } from 'vue'
+import { ElMessage } from 'element-plus'
 
-export default {
-  name: "VariableList",
+export default defineComponent({
+  name: 'VariableList',
 
   components: { DialogComponent },
 
-  data() {
-    return {
-       select:1,
-      currentPage4: 4,
+  setup() {
+    const tableItem = ref()
+    const tableData = ref()
+    const currentPage = ref(1)
+    const pageSize = ref(15)
+    const total = ref(0)
+    const select = ref(1)
+    const siteId = ref(1)
+    const variableName = ref('')
+    const showDialog = ref(false)
+    const dialogTitle = ref('')
 
-      showDialog: false,
-      tabPosition: "one",
+    //是否删除  ---- 否
+    const cancelEvent = () => {
+      console.log('cancel!')
+    }
+    //查询变量列表
+    function query() {
+      api
+        .variableList({
+          size: pageSize.value,
+          current: currentPage.value,
+          dataArea: select.value,
+          siteId: siteId.value,
+          variableName: variableName.value,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            tableData.value = requset.data.records
+            total.value = requset.data.total
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
 
-      input: "请输入状态",
-      tableData: [
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-        {
-          ratedVoltage: "10KV",
-          watchName: "测试设备1",
-          watchCode: "cssb1",
-          ratedCurrent: "58A",
-          fzlMx: "80%",
-          powerAnalysis: "开启",
-          watchAddress: "1",
-        },
-      ],
-    };
-  },
-  methods: {
-    handleSizeChange(val) {
-      console.log(`每页 ${val} 条`);
-    },
-    handleCurrentChange(val) {
-      console.log(`当前页: ${val}`);
-    },
+    const Select = (value) => {
+      select.value = value
+      query()
+    }
+
+    onMounted(() => {
+      query()
+    })
+
+    const handleSizeChange = (val) => {
+      console.log(`每页 ${val} 条`)
+    }
+    const handleCurrentChange = (val) => {
+      console.log(`当前页: ${val}`)
+    }
+
+    // input输入框无法输入解决
+    const change = () => {
+      this.$forceUpdate()
+    }
 
     // 表头样式设置
-    goVariableList() {
+    const goVariableList = () => {
       // 跳转至订单列表页面传参
       this.$router.push({
-        path: "../siteManage/variableList/index.vue",
-      });
+        path: '../siteManage/variableList/index.vue',
+      })
       // this.$router.push({ name:'variableList'})
-    },
-    headClass() {
-      return "background:#FAFAFA;";
-    },
+    }
+    const headClass = () => {
+      return 'background:#FAFAFA;'
+    }
 
     // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: "",
-        stationName: "",
-        watchName: "",
-        watchCode: "",
+    const addItem = () => {
+      tableItem.value = {
+        id: '',
+        stationName: '',
+        watchName: '',
+        watchCode: '',
         siteList: [],
-        done: "",
-        guaZai: "",
+        done: '',
+        guaZai: '',
         checked: true,
-      };
-      this.dialogTitle = "新增";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
+      }
+      dialogTitle.value = '新增'
+      showDialog.value = true
+      // this.$nextTick(() => {
+      //   this.$refs['dialogComponent'].showDialog = true
+      // })
+    }
     // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
+    const editRow = (row) => {
+      console.log(row)
+      this.tableItem = row
+      this.dialogTitle = '编辑'
+      this.showDialog = true
       this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
+        this.$refs['dialogComponent'].showDialog = true
+      })
+    }
     // 关闭操作
-    closeDialog(flag) {
+    const closeDialog = (flag) => {
       if (flag) {
         // 重新刷新表格内容
-        this.fetchData();
+        this.fetchData()
       }
-      this.showDialog = false;
-    },
+      showDialog.value = false
+    }
 
     //删除操作
-    handleDelete(index, row) {
-      console.log(index, row);
-      alert(index);
-    },
+    const handleDelete = (index, row) => {
+      console.log(index, row)
+      alert(index)
+    }
+    // 获取数据
+    const getVariableListone = () => {
+      console.log('hzy')
+    }
+
+    return {
+      cancelEvent,
+      handleSizeChange,
+      handleCurrentChange,
+      change,
+      goVariableList,
+      headClass,
+      addItem,
+      editRow,
+      closeDialog,
+      handleDelete,
+      getVariableListone,
+      query,
+      Select,
+
+      select,
+      showDialog,
+      dialogTitle,
+      total,
+      pageSize,
+      currentPage,
+      tableData,
+      input: '请输入状态',
+      variableName,
+      tableItem,
+    }
   },
-};
+})
 </script>
 
 <style lang="scss" scoped>