智慧园区前端大屏
shuishen
2024-11-26 ecdffd165cf73c0e3c051c69d1dfdc71ba9331c8
src/views/supplies/components/box/dataContent.vue
@@ -3,7 +3,9 @@
    <template #content>
      <div class="content_box">
        <div class="list_box">
          <span class="content_span" @click="scrollLeft">《</span>
          <span class="content_span" @click="scrollLeft">
            <img src="@/assets/images/left.png" alt="">
          </span>
          <el-scrollbar ref="scrollbarRef" @scroll="scroll">
            <div class="scrollbar-flex-content">
              <p v-for="(item, index) in tilteList" @click="handleClick(item, index)" :key="index"
@@ -12,7 +14,9 @@
              </p>
            </div>
          </el-scrollbar>
          <span class="content_span" @click="scrollRight">》</span>
          <span class="content_span" @click="scrollRight">
            <img src="@/assets/images/right.png" alt="">
          </span>
        </div>
        <div class="page_box">
@@ -26,12 +30,11 @@
            </el-table>
            <el-table border empty-text="" v-else :data="tableData">
              <!-- <el-table-column prop="firmName" label="企业名称" /> -->
              <el-table-column prop="name" label="物资名称" />
              <!-- <el-table-column prop="personInCha" label="负责人" /> -->
              <!-- <el-table-column prop="personInChaPhone" label="负责人电话" /> -->
              <el-table-column prop="personInCha" label="负责人" width="150" />
              <el-table-column prop="personInChaPhone" label="负责人电话" width="250" />
              <el-table-column prop="stoLoc" label="物资地址" />
              <el-table-column prop="num" label="数量" />
              <el-table-column prop="numUnit" label="数量" />
            </el-table>
          </div>
        </div>
@@ -93,7 +96,7 @@
  ownership: 1,
})
function getCompanyPages (param = {}) {
function getCompanyPages(param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  getPage(param).then(res => {
@@ -109,7 +112,7 @@
  })
}
function handleClick (item, index) {
function handleClick(item, index) {
  currentIndex.value = index
  pages.page = 1
  pages.pageSize = 1000
@@ -161,7 +164,7 @@
// }
// 查询分页数据
function getLists (param = {}) {
function getLists(param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  loading.value = true
@@ -180,7 +183,7 @@
// 查询分页数据
function getComLists (param = {}) {
function getComLists(param = {}) {
  param.current = pages.page
  param.size = pages.pageSize
  loading.value = true
@@ -240,16 +243,27 @@
  margin: 10px;
  padding: 0 5px;
  text-align: center;
  border-radius: 4px;
  // background: var(--el-color-danger-light-9);
  background-color: rgba(117, 116, 116, 0.3);
  // color: var(--el-color-danger);
  // color: #000;
  border-radius: 10px;
  box-shadow: inset 0 0 40px #409eff;
  cursor: pointer;
}
.content_box .content_span {
  line-height: 70px;
  margin: 0 15px;
  cursor: pointer;
  & img {
    // 图片上下居中
    vertical-align: middle;
    width: 30px;
    height: 30px;
  }
  & img:hover {
    box-shadow: inset 0 0 40px #fff;
    border-radius: 10px;
  }
}
.page_box .el-table {
@@ -259,8 +273,8 @@
}
.active {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 10px;
  // color: #409eff;
  // border-radius: 10px;
  box-shadow: inset 0 0 100px #2a8ef1;
}
</style>