fiveFollowing-admin/src/views/deviceManage/powerEquip/index.vue

<template>
  <div class="powerEquip">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      style="background-color: #fff; height: 100%"
      class="tabsSizeColor"
    >
      <el-tab-pane label="电力监测设备" name="powerEquip">
        <div class="first">
          <div class="firstTop">
            <div class="firstTopLeft">
              <el-button
                class="goBack"
                @click="goBack"
                v-if="deviceNumData.length > 0"
                >返回</el-button
              >
              <span class="firstTopLeftTitle"
                >{{
                  deviceNumData.length > 0 ? "设备或编号" : "厂家或型号"
                }}:</span
              >
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText"
                class="firstTopLeftInput"
              >
                <template #suffix>
                  <i class="el-icon-search el-input__icon"></i>
                </template>
              </el-input>
              <!-- <el-button
                type="primary"
                icon="el-icon-search"
                class="search-button"
                >搜索</el-button
              > -->
              <el-button class="search-button" icon="el-icon-plus" type="success" @click="addItem()"
                >新增</el-button
              >
            </div>

            <div class="firstRight">
              <el-button type="primary">导入</el-button>
              <el-button type="primary">导出</el-button>
            </div>
          </div>

          <div class="firstContent" v-if="deviceNumData.length <= 0">
            <el-table
              :data="
                tableData.filter(
                  (data) =>
                    !filterText ||
                    data.manufactor
                      .toLowerCase()
                      .includes(filterText.toLowerCase()) ||
                    data.deviceModel
                      .toLowerCase()
                      .includes(filterText.toLowerCase())
                )
              "
              border
              stripe
              :header-cell-style="headClass"
            >
              <el-table-column fixed prop="manufactor" label="厂家" width="">
              </el-table-column>
              <el-table-column prop="deviceModel" label="型号" width="">
              </el-table-column>
              <el-table-column prop="deviceNum" label="设备数量" width="">
                <template #default="scope">
                  <div
                    style="margin-right: 15px; cursor: pointer; color: #409eff"
                    @click="deviceNumSelect({ id: scope.row.manufactor })"
                  >
                    {{ scope.row.deviceNum }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="250">
                <template #default="scope">
                  <el-button
                    type="text"
                    size="small"
                    style="color: #409eff"
                    @click.prevent="editRow(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    @click="handleDelete(scope.$index, scope.row)"
                    type="text"
                    size="small"
                    style="color: red"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="firstContent" v-if="deviceNumData.length > 0">
            <deviceDetails
              :device_NumData="deviceNumData"
              :filter_Text="filterText"
            ></deviceDetails>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频监测设备" name="videoEquip"> </el-tab-pane>
      <el-tab-pane label="通信设备" name="communicateEquip"> </el-tab-pane>
      <el-tab-pane label="通道列表" name="channelList"> </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from "vue";
import deviceDetails from "./deviceDetails.vue";

interface PowerEquipData {
  deviceNumData: Ref;
  tableData: Ref;
  activeName: Ref;
  filterText: Ref;
}

export default defineComponent({
  name: "powerEquip",
  components: {
    deviceDetails,
  },
  props: {},
  setup(): PowerEquipData {
    const deviceNumData = ref([]);
    const tableData = ref([
      {
        manufactor: "上海永天科技股份有限公司",
        deviceModel: "测试设备",
        deviceNum: "8",
      },
      {
        manufactor: "上海永天科技股份有限公司",
        deviceModel: "测试设备",
        deviceNum: "8",
      },
      {
        manufactor: "海永天科技股份有限公司",
        deviceModel: "试设备",
        deviceNum: "8",
      },
      {
        manufactor: "上海永天科技股份有限公司",
        deviceModel: "测试设备",
        deviceNum: "8",
      },
      {
        manufactor: "上海永天科技股份有限公司",
        deviceModel: "测试设备",
        deviceNum: "8",
      },
      {
        manufactor: "上海永天科技股份有限公司",
        deviceModel: "测试设备",
        deviceNum: "8",
      },
      {
        manufactor: "上海永天科技股份有限公司",
        deviceModel: "测试设备",
        deviceNum: "8",
      },
      {
        manufactor: "上海永天科技股份有限公司",
        deviceModel: "测试设备",
        deviceNum: "8",
      },
    ]);
    const activeName = ref("powerEquip");
    const filterText = ref("");

    return {
      deviceNumData,
      tableData,
      activeName,
      filterText,
    };
  },
  methods: {
    //返回
    goBack() {
      this.deviceNumData = [];
    },
    //新增
    addItem() {
      console.log("");
    },
    //设备数量查询
    deviceNumSelect(data) {
      console.log(data);
      this.filterText = "";
      this.deviceNumData = [
        {
          stationStatus: 0,
          deviceName: "测试设备",
          deviceCode: "cubbs",
          location: "站点1",
          ratedVoltage: 10,
          ratedCurrent: 58,
          currentLoRaTh: 80,
          powerQuAn: "开启",
          meterAddress: "1",
        },
        {
          stationStatus: 1,
          deviceName: "测试设备",
          deviceCode: "cubbs",
          location: "站点1",
          ratedVoltage: 10,
          ratedCurrent: 58,
          currentLoRaTh: 80,
          powerQuAn: "开启",
          meterAddress: "1",
        },
      ];
      console.log(this.deviceNumData);
    },

    // 表头样式设置
    headClass() {
      return "background:#FAFAFA !important;color: black;";
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
});
</script>

<style lang="scss">
.powerEquip {
  height: calc(100vh - 100px);
  padding: 30px;
  margin-top: 50px;
}
//firstInput样式
.first {
  margin: 15px;
  //顶部左侧样式
  .firstTop {
    display: flex;
    height: 32px;
    line-height: 32px;
    .firstTopLeft {
      width: 70%;
      .goBack {
        margin-right: 15px;
      }
      .firstTopLeftTitle {
        font-size: 14px;
        margin-right: 10px;
      }
      .firstTopLeftInput {
        width: 15rem;
      }
      .el-input__icon {
        color: #409eff;
      }
      .el-input__inner:hover {
        border-color: #409eff;
      }
      .el-input__inner:focus {
        border-color: #409eff;
      }
      .search-button {
        margin-left: 1rem;
      }
    }

    //顶部右侧样式
    .firstRight {
      width: 30%;
      button {
        margin-left: 1rem;
        float: right;
      }
    }
  }
  .firstContent {
    margin-top: 15px;
  }
}

// tab重置样式
.tabsSizeColor > .el-tabs__header .el-tabs__item {
  line-height: 50px;
  height: 50px;
  font-size: 16px;
}

.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 2px solid #409eff;
  color: #409eff;
}
.el-tabs__header {
  margin-bottom: 0;
}
.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>