Merge pull request 'lukeyan' (#5) from lukeyan into master

Reviewed-on: #5

src/views/systemManagement/companyList/index.vue

@@ -1,12 +1,133 @@
 <template>
-<!-- 企业名单 -->
+  <!-- 企业名单 -->
-  <div>456</div>
+  <div>
+    <div class="main">
+      <!-- 卡片标题 -->
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>企业名单</span>
+        </div>
+        <div class="card_body">
+          <!-- 顶部搜索区域 -->
+          <div class="top">
+            <div class="top_search">
+              <span>关键词:</span>
+              <el-input
+                class="top_search_input"
+                placeholder="输入企业名称搜索"
+                v-model="searchCompany"
+              >
+              </el-input>
+              <div class="top_search_button">
+                <i class="el-icon-search"></i>
+              </div>
+            </div>
+            <div class="top_add_btn">
+              <el-button>新增企业</el-button>
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
 </template>
 <script>
 export default {
   name: "companyList",
   data() {
-    return {};
+    return {
+      searchCompany: "",
+    };
   },
 };
-</script>
+</script>
+<style lang="less" scoped>
+/* card统一样式 */
+.el-card.box-card.is-always-shadow {
+  height: calc(100vh - 116px); /* 控制card布局高度,用于适配 */
+  /* card统一样式 */
+  /deep/.el-card__header {
+    border-bottom: 1px solid #a1a1a1 !important;
+    .clearfix {
+      span {
+        font-size: 17px;
+        font-weight: 400;
+        color: #fff;
+      }
+    }
+  }
+}
+.main {
+  height: 100%;
+  .el-card.box-card.is-always-shadow {
+    background: url("~@/assets/companyFile/22136.png") no-repeat !important;
+    background-size: 100% 100% !important;
+    border: 0px;
+  }
+  .card_body {
+    .top {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      .top_search {
+        display: flex;
+        width: 40%;
+        height: 40px;
+        span {
+          width: 15%;
+          line-height: 40px;
+          text-align: center;
+          color: #fff;
+        }
+        .top_search_input ::v-deep {
+          /* 查询框 */
+          width: 75%;
+          .el-input__inner {
+            border-radius: 4px 0px 0px 4px;
+            background: #3c4b4a;
+            color: #fff;
+          }
+          /* 查询框点击颜色变化 */
+          .el-input__inner:focus,
+          .el-input__inner:hover {
+            border-color: #1b3736;
+          }
+        }
+        .top_search_button {
+          width: 10%;
+          height: 100%;
+          border-radius: 0px 4px 4px 0px;
+          background: #0e3936;
+          text-align: center;
+          font-size: 28px;
+          cursor: pointer;
+          .el-icon-search {
+            color: #fff;
+            padding: 12% 0;
+          }
+        }
+        .top_search_button:focus,
+        .top_search_button:hover {
+          /* 放大镜点击特效 */
+          background: #126a58;
+        }
+      }
+      .top_add_btn {
+        width: 10%;
+        .el-button {
+          border: 1px solid #4a6072;
+          color: #fff;
+          border-radius: 0px !important;
+          background: #323f43;
+        }
+        .el-button:focus,
+        .el-button:hover {
+          color: #34e1b3;
+          background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+          background-size: 100% 100% !important;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemManagement/correlationEquipment/components/addDIalog.vue

@@ -195,7 +195,7 @@ export default {
   .el-dialog__title {
     color: #fff;
   }
-  background-image: url("~@/assets/companyFile/22136.png");
+  background-image: url("~@/assets/companyFile/dialogBack.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
   height: 720px;

src/views/systemManagement/correlationEquipment/components/deriveDialog.vue

@@ -0,0 +1,85 @@
+<template>
+  <!-- 导出 -->
+  <el-dialog
+    class="dialog"
+    title="导出"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    <div class="text_body">
+      <div class="text">确认导出文件?</div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="confrim">确 定</el-button>
+      <el-button>取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+  <script>
+import { debounce } from "@/utils/publicMethod_lxy/debounce.js";
+export default {
+  name: "DeriveDialog",
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    confrim: debounce(function () {
+      this.$message.success("232324234");
+    }, 300),
+  },
+};
+</script>
+  <style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 400px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    .text_body {
+      margin: auto;
+      text-align: center;
+      line-height: 280px;
+      width: 100%;
+      height: 280px;
+      .text {
+        color: #fff;
+        font-size: 27px;
+        font-weight: 500;
+      }
+    }
+  }
+  .el-button {
+    width: 70px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+}
+</style>

src/views/systemManagement/correlationEquipment/components/equipmentTable.vue

@@ -68,16 +68,33 @@
         </el-table-column>
       </el-table>
     </div>
-    <div class="equipment_data_pagination"></div>
+    <div class="equipment_data_pagination">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[4]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
     <AddDialog ref="addDialog"></AddDialog>
+    <UploadDialog ref="uploadDialog"></UploadDialog>
+    <DeriveDialog ref="deriveDialog"></DeriveDialog>
   </div>
 </template>
 <script>
-import AddDialog from './addDialog';
+import AddDialog from "./addDialog";
+import UploadDialog from "./uploadDialog";
+import DeriveDialog from "./deriveDialog";
 export default {
   name: "EquipmentTable",
   components: {
     AddDialog,
+    UploadDialog,
+    DeriveDialog,
   },
   data() {
     return {
@@ -99,14 +116,22 @@ export default {
         { prop: "imageTypeCn", label: "设备维度" },
         { prop: "imageTypeC", label: "进出方向" },
       ],
+      total: 0, // 信息总数
     };
   },
   methods: {
     openDialog(num) {
-      console.log(num,'num');
+      console.log(num, "num");
       if (num === "1") {
-        console.log(num,'num');
+        // 新增弹窗
+        console.log(num, "num");
         this.$refs.addDialog.open();
+      } else if (num === "3") {
+        // 导入弹窗
+        this.$refs.uploadDialog.open();
+      } else if (num === "4") {
+        // 导出弹窗
+        this.$refs.deriveDialog.open();
       }
     },
     table_header({ row, rowIndex }) {
@@ -201,5 +226,29 @@ export default {
       height: 0px;
     }
   }
+  .el-pagination {
+    margin-left: 57%;
+    /deep/.el-input__inner {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    /deep/.btn-prev {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+    /deep/ul {
+      li {
+        background: #3c4b4a;
+        color: #fff;
+      }
+    }
+    /deep/.btn-next {
+      border-radius: 0px;
+      background: #3c4b4a;
+      color: #fff;
+    }
+  }
 }
 </style>

src/views/systemManagement/correlationEquipment/components/uploadDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <!-- 导入 -->
+  <el-dialog
+    class="dialog"
+    title="导入"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    123
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="confrim">确 定</el-button>
+      <el-button>取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import {debounce} from '@/utils/publicMethod_lxy/debounce.js'
+export default {
+  name: "UploadDialog",
+  data() {
+    return {
+      visible: false,
+    };
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    confrim:debounce(function() {
+        this.$message.success('232324234')
+    },300)
+  },
+};
+</script>
+<style lang="less" scoped>
+/deep/.el-dialog {
+  .el-dialog__title {
+    color: #fff;
+  }
+  background-image: url("~@/assets/companyFile/dialogBack.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 400px;
+  /* 关闭弹窗叉号 */
+  .el-dialog__headerbtn {
+    .el-dialog__close {
+      color: #fff;
+      font-size: 18px;
+    }
+  }
+  .el-dialog__body {
+    padding: 0px;
+    padding-left: 15px;
+    padding-right: 15px;
+    p {
+      font-size: 16px;
+      color: #fff;
+    }
+  }
+  .el-button {
+    width: 70px;
+    border: 1px solid #4a6072;
+    color: #fff;
+    border-radius: 0px !important;
+    background: #323f43;
+  }
+  .el-button:focus,
+  .el-button:hover {
+    color: #34e1b3;
+    background: url("~@/assets/companyFile/891771.png") no-repeat !important;
+    background-size: 100% 100% !important;
+  }
+}
+</style>