完成测点、检测参数相关的前端功能

src/views/device/components/ModelReport_master104.vue

@@ -2,10 +2,10 @@
 <template>
   <div class="table-container" style="padding-top:20px;">
     <div class="buttons">
-      <div class="title-main">报文</div>
+      <div class="title-main" style="line-height: 2rem;">报文</div>
       <div class="left">
         <div class="search">
-          <el-form ref="searchForm" :model="searchForm" class="search-form" label-width="80px">
+          <el-form ref="searchForm" :model="searchForm" class="search-form" label-width="30px">
             <el-form-item class="search-parames">
               <el-select v-model="searchForm.selectVal" filterable @change="changeSelect">
                 <el-option
@@ -35,7 +35,7 @@
         </div>
       </div>
     </div>
-    <el-row type="flex">
+    <el-row type="flex" style="float:left;width: 100%;">
       <el-col :span="18">
         <div class="left-report">
           <!-- 表格 -->
@@ -297,11 +297,17 @@ export default {
 .title-main {
   color: #111;
   font-weight: bold;
+  float: left;
+  width: auto;
 }
 .buttons {
-  display: flex;
+  display: block;
+  height: 3.5rem;
+  width: 100%;
   justify-content: space-between;
   .left {
+    float: left;
+    width: auto;
     .search{
       display: flex;
       justify-content: left;
@@ -316,11 +322,16 @@ export default {
     }
   }
   .right{
-    display: flex;
+    float: right;
+    width: auto;
     justify-content: right;
     padding-bottom: 20px;
+    .export{
+      float: left;
+    }
     .clear,.refresh {
       padding-left: 20px;
+      float: left;
     }
   }
 }

src/views/device/tables/Sample_master104.vue

@@ -65,24 +65,30 @@
           </div>
           <div class="check-resaults" style="margin-left: 20px;">
             <el-button
-              icon="el-icon-plus"
-              type="primary"
+              icon="el-icon-postcard"
+              :type="cardModelTag"
               size="mini"
-              @click="refreshManual(true)"
+              @click="swicthCardModel(true)"
             >卡片</el-button>
           </div>
           <div class="check-resaults">
             <el-button
-              icon="el-icon-refresh-left"
-              class="light-button"
+              icon="el-icon-s-grid"
               size="mini"
-              @click="refreshManual(true)"
+              :type="tableModelTag"
+              @click="swicthCardModel(false)"
             >列表</el-button>
           </div>
         </div>
       </div>
+      <!-- 采样卡片 -->
+      <div v-if="showCard == true" class="table-container">
+        <div v-for="(item, index) in carddata" :key="index">
+          <div class="card">{{ item }}</div>
+        </div>
+      </div>
       <!-- 采样表格 -->
-      <div class="table-container">
+      <div v-if="showCard == false" class="table-container">
         <el-table :key="tableIsUpdate" v-loading="vLoading" :data="tableData" stripe max-height="300">
           <el-table-column prop="iec104" label="104点号" width="100px" />
           <el-table-column prop="name" label="测点名称" />
@@ -101,7 +107,7 @@
                 v-if="scope.row.range=='COIL_STATUS' && scope.row.relationTag!=''"
                 class="table-act"
                 type="text"
-                icon="el-icon-edit"
+                icon="el-icon-setting"
                 size="small"
                 @click="editRow(scope.$index)"
               >遥控操作</el-button>
@@ -222,6 +228,10 @@ export default {
   data() {
     return {
       vLoading: true,
+      showCard: true, // 卡片显示模式。false时为表格显示模式
+      cardModelTag: 'primary',
+      tableModelTag: 'default',
+      carddata: [],
       tableData: [],
       // 采样
       tablePrames: {
@@ -268,6 +278,16 @@ export default {
     })
   },
   methods: {
+    swicthCardModel(flag) {
+      this.showCard = flag
+      if (flag) {
+        this.cardModelTag = 'primary'
+        this.tableModelTag = 'default'
+      } else {
+        this.cardModelTag = 'default'
+        this.tableModelTag = 'primary'
+      }
+    },
     //
     async initFunctions() {
       // 所有需要加载时初始化的函数都放这里
@@ -470,6 +490,16 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.card{
+  float: left;
+  width: 10rem;
+  height: 5rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+.card_opt{
+  background-color: #ededed;
+}
 .title-container {
   display: flex;
   justify-content: space-between;