修改其他页面的缩略图列表

src/views/Others/index.vue

@@ -16,9 +16,18 @@
         <div class="itemBox">
           <p class="itemTitle">
             原始数据查询
-            <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
+            <i
+              class="itemMoreBtn el-icon-more"
+              @click="jumpUrl('/realSearch')"
+            ></i>
           </p>
-          <div class="imageBox">
+          <div class="df-table">
+            <ComTable height="30vh" :data="tableData1" :pageSize="20" >
+            </ComTable>
+             <ComTable height="30vh" :data="tableData2" :pageSize="20">
+            </ComTable>
+          </div>
+          <!-- <div class="imageBox">
             <div class="imgItem" @click="jumpUrl('/realSearch')">
               <el-image class="img" src="./static/img/oa日报.png" fit="fill" />
               <p class="imgTitle">测点数据查询</p>
@@ -31,7 +40,7 @@
               />
               <p class="imgTitle">测点历史数据查询</p>
             </div>
-          </div>
+          </div> -->
         </div>
       </el-carousel-item>
 
@@ -42,7 +51,13 @@
             预警记录
             <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
           </p>
-          <div class="imageBox1">
+          <div class="df-table">
+            <ComTable height="30vh" :data="tableData3" :pageSize="20">
+            </ComTable>
+            <ComTable height="30vh" :data="tableData4" :pageSize="20">
+            </ComTable>
+          </div>
+          <!-- <div class="imageBox1">
             <div class="imgItem1" @click="jumpUrl('/new/alarmcenter')">
               <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
               <p class="imgTitle">预警管理</p>
@@ -79,7 +94,7 @@
               />
               <p class="imgTitle">自定义报警</p>
             </div>
-          </div>
+          </div> -->
         </div>
       </el-carousel-item>
 
@@ -90,151 +105,87 @@
             专家知识
             <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
           </p>
-          <div class="imageBox1">
-            <div class="imgItem1" @click="jumpUrl('/knowledge')">
-              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">故障知识列表</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/knowledge2')">
-              <el-image
-                class="img1"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">安全措施知识</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/knowledge6')">
-              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">排查检修方案</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/knowledge7')">
-              <el-image
-                class="img1"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">预警知识</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/knowledge5')">
-              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">特征参数</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/knowledge3')">
-              <el-image
-                class="img1"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">风险辨识知识</p>
-            </div>
-          </div>
+           <div class="df-table">
+                <ComTable height="30vh" :data="tableData5" :pageSize="20">
+            </ComTable>
+           </div>
+       
         </div>
       </el-carousel-item>
 
       <!-- card-4 -->
-      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+      <!-- <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
         <div class="itemBox">
           <p class="itemTitle">
             统计分析
-            <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
+            <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i>
           </p>
-          <div class="imageBox">
-            <div class="imgItem" @click="jumpUrl('/tjfx')">
-              <el-image class="img" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">统计分析</p>
-            </div>
-            <div class="imgItem" @click="jumpUrl('/bdzcx')">
-              <el-image
-                class="img"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">表底值查询</p>
-            </div>
-          </div>
+           <ComTable height="30vh" :data="tableData7" :pageSize="20">
+            </ComTable>
+            <ComTable height="30vh" :data="tableData8" :pageSize="20">
+            </ComTable>
         </div>
-      </el-carousel-item>
-        <!-- card-5 -->
-            <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+      </el-carousel-item> -->
+      <!-- card-5 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
         <div class="itemBox">
           <p class="itemTitle">
-           报表管理
+            报表管理
             <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
           </p>
           <div class="imageBox1">
-            <div class="imgItem1" @click="jumpUrl('/oafd')">
+            <div class="imgItem1" @click="jumpUrl('/tjfx')">
               <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">OA日报</p>
+              <p class="imgTitle">统计分析</p>
             </div>
-            <div class="imgItem1" @click="jumpUrl('/oagf')">
+            <div class="imgItem1" @click="jumpUrl('/bdzcx')">
               <el-image
                 class="img1"
                 src="./static/img/新能源日报.png"
                 fit="fill"
               />
-              <p class="imgTitle">OA日报(光伏)</p>
+              <p class="imgTitle">表底值查询</p>
             </div>
             <div class="imgItem1" @click="jumpUrl('/xnyrb')">
               <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
               <p class="imgTitle">新能源日报</p>
             </div>
-            <div class="imgItem1" @click="jumpUrl('/missfdrb')">
+                     <div class="imgItem1" @click="jumpUrl('/xnyfdscyb')">
               <el-image
                 class="img1"
                 src="./static/img/新能源日报.png"
                 fit="fill"
               />
-              <p class="imgTitle">国电电力MISS日报(风电)</p>
-            </div>
-            <div class="imgItem1" @click="jumpUrl('/missgfrb')">
-              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">国电电力MISS日报(光伏)</p>
+              <p class="imgTitle">新能源风电生产月报</p>
             </div>
-            <div class="imgItem1" @click="jumpUrl('/xnyfdscyb')">
+            <div class="imgItem1" @click="jumpUrl('/missfdrb')">
               <el-image
                 class="img1"
                 src="./static/img/新能源日报.png"
                 fit="fill"
               />
-              <p class="imgTitle">新能源风电生产月报</p>
+              <p class="imgTitle">动态报表</p>
+            </div>
+            <div class="imgItem1" @click="jumpUrl('/missgfrb')">
+              <el-image class="img1" src="./static/img/oa日报.png" fit="fill" />
+              <p class="imgTitle">项目动态报表</p>
             </div>
+   
           </div>
         </div>
       </el-carousel-item>
-        <!-- card-6 -->
-                 <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
+      <!-- card-6 -->
+      <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
         <div class="itemBox">
           <p class="itemTitle">
-          自定制报表管理
+            自定制报表管理
             <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
           </p>
-          <div class="imageBox2">
-            <div class="imgItem2" @click="jumpUrl('/fdczzdy')">
-              <el-image class="img2" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">风电场站自定义</p>
-            </div>
-            <div class="imgItem2" @click="jumpUrl('/fdxmzdy')">
-              <el-image
-                class="img2"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">风电项目自定义</p>
-            </div>
-            <div class="imgItem2" @click="jumpUrl('/gfczzdy')">
-              <el-image class="img2" src="./static/img/oa日报.png" fit="fill" />
-              <p class="imgTitle">光伏场站自定义</p>
-            </div>
-            <div class="imgItem2" @click="jumpUrl('/gfxmzdy')">
-              <el-image
-                class="img2"
-                src="./static/img/新能源日报.png"
-                fit="fill"
-              />
-              <p class="imgTitle">光伏项目自定义</p>
-            </div>
-         
-          </div>
+           <div class="df-table">
+                     <ComTable height="30vh" :data="tableData6" :pageSize="20">
+            </ComTable>
+           </div>
+
         </div>
       </el-carousel-item>
     </el-carousel>
@@ -243,14 +194,154 @@
 
 <script>
 import $ from "jquery";
+import ComTable from "@com/coms/table/table.vue";
 export default {
   // 名称
   name: "cutAnalyse",
-
+  // 使用组件
+  components: {
+    ComTable,
+  },
   // 数据
   data() {
     const that = this;
-    return {};
+    return {
+      tableData1: {
+        column: [
+          {
+            name: "名称",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "发电量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+      tableData2: {
+        column: [
+          {
+            name: "设备结构",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "关键参数",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+       tableData3: {
+        column: [
+          {
+            name: "状态",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "当日数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+      
+        ],
+        data: [],
+      },
+             tableData4: {
+        column: [
+          {
+            name: "类型",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "当日数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+      
+        ],
+        data: [],
+      },
+          tableData5: {
+        column: [
+          {
+            name: "名称",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+              tableData6: {
+        column: [
+          {
+            name: "名称",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },         tableData7: {
+        column: [
+          {
+            name: "名称",
+            field: "pointId",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+          {
+            name: "数量",
+            field: "pointName",
+            is_num: false,
+            is_light: false,
+            sortable: true,
+          },
+        ],
+        data: [],
+      },
+
+    };
   },
 
   // 函数
@@ -283,14 +374,193 @@ export default {
     jumpUrl(url) {
       this.$router.push(url);
     },
+    //获取表格数据
+    getTableData() {
+      let that = this;
+      let tableArr1 = [
+        {
+          index: 1,
+          pointId: "青山风电场",
+          pointName: 3763,
+        },
+        {
+          index: 2,
+          pointId: "石板泉风电场",
+          pointName: 4500,
+        },
+        {
+          index: 3,
+          pointId: "牛首山风电场",
+          pointName: 3863,
+        },
+        {
+          index: 4,
+          pointId: "香山风电场",
+          pointName: 3654,
+        },
+        {
+          index: 5,
+          pointId: "麻黄山风电场",
+          pointName: 1863,
+        },
+      ];
+      that.tableData1.data = tableArr1;
+      console.log("tableData1:", that.tableData1);
+          let tableArr2 = [
+        {
+          index: 1,
+          pointId: "1号机",
+          pointName: 16.93,
+        },
+        {
+          index: 2,
+          pointId: "2号机",
+          pointName: 20.56,
+        },
+        {
+          index: 3,
+          pointId: "3号机",
+          pointName: 38,
+        },
+        {
+          index: 4,
+          pointId: "4号机",
+          pointName: 54,
+        },
+        {
+          index: 5,
+          pointId: "5号机",
+          pointName: 18,
+        },
+      ];
+      that.tableData2.data = tableArr2;
+      console.log("tableData2:", that.tableData2);
+                let tableArr3 = [
+        {
+          index: 1,
+          pointId: "停机事件管理",
+          pointName: 16.93,
+        },
+        {
+          index: 2,
+          pointId: "限电管理",
+          pointName: 20.56,
+        },
+        {
+          index: 3,
+          pointId: "状态转换记录",
+          pointName: 38,
+        },
+        {
+          index: 4,
+          pointId: "操作记录",
+          pointName: 54,
+        },
+      ];
+      that.tableData3.data = tableArr3;
+
+                let tableArr4 = [
+        {
+          index: 1,
+          pointId: "升压站动作",
+          pointName: 16.93,
+        },
+        {
+          index: 2,
+          pointId: "升压站告警",
+          pointName: 20.56,
+        },
+        {
+          index: 3,
+          pointId: "风机告警",
+          pointName: 38,
+        },
+        {
+          index: 4,
+          pointId: "风机预警",
+          pointName: 54,
+        },
+      ];
+      that.tableData4.data = tableArr4;
+
+         let tableArr5 = [
+        {
+          index: 1,
+          pointId: "故障指示列表",
+          pointName: 16.93,
+        },
+        {
+          index: 2,
+          pointId: "安全措施知识",
+          pointName: 20.56,
+        },
+        {
+          index: 3,
+          pointId: "排查检修方案",
+          pointName: 38,
+        },
+        {
+          index: 4,
+          pointId: "预警知识",
+          pointName: 54,
+        },
+             {
+          index: 5,
+          pointId: "特征参数",
+          pointName: 44,
+        },
+             {
+          index: 6,
+          pointId: "风险辨识知识",
+          pointName: 24,
+        },
+             {
+          index: 7,
+          pointId: "作业指导知识",
+          pointName: 14,
+        },
+      ];
+      that.tableData5.data = tableArr5;
+
+      
+         let tableArr6 = [
+        {
+          index: 1,
+          pointId: "风电场站自定义",
+          pointName: 16.93,
+        },
+        {
+          index: 2,
+          pointId: "风电项目自定义",
+          pointName: 20.56,
+        },
+        {
+          index: 3,
+          pointId: "光伏场站自定义",
+          pointName: 38,
+        },
+        {
+          index: 4,
+          pointId: "光伏项目自定义",
+          pointName: 54,
+        },
+      ];
+      that.tableData6.data = tableArr6;
+
+      
+
+    },
+
   },
 
   created() {},
 
   mounted() {
+    let that = this;
     this.$nextTick(() => {
       this.changeSwiper(1);
     });
+    that.getTableData();
   },
 
   unmounted() {},
@@ -303,7 +573,30 @@ export default {
   width: 100%;
   height: 100%;
   font-size: 20px;
+.df-table{
+  /deep/ .com-table thead tr th {
+    background-color: rgba(83, 98, 104, 0.2);
+    height: 30px;
+    line-height: 30px;
+    color: #9ca5a8;
+    font-weight: 400;
+    font-size: 20px !important;
+    position: sticky;
+    top: 0;
+    cursor: pointer;
+}
+/deep/ .com-table tbody tr td {
+    padding: 4px;
+    color: #393a3a;
+    text-align: center;
+    font-size: 20px !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 
+
+}
   .itemTitle {
     width: 100%;
     display: flex;
@@ -484,7 +777,7 @@ export default {
       }
     }
   }
-    .imageBox2 {
+  .imageBox2 {
     width: 100%;
     display: flex;
     justify-content: space-around;