admin-fiveFollowing/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
                class="search-button"
                icon="el-icon-plus"
                type="success"
                @click="addItem()"
              >
                新增
              </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"
              :height="Height"
            >
              <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="update(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>

          <!-- 新增 -->
          <insert-Dialog
            :flag="show"
            :data_list="datalist"
            :updateTitle="updateTitle"
            @show="showValue"
          ></insert-Dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频监测设备" name="videoEquip">
        <video-Equip></video-Equip>
      </el-tab-pane>
      <el-tab-pane label="通信设备" name="communicateEquip">
        <communicate-Equip></communicate-Equip>
      </el-tab-pane>
      <el-tab-pane label="通道列表" name="channelList">
        <channel-List></channel-List>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
import deviceDetails from './deviceDetails.vue'
import videoEquip from './videoEquip/index.vue'
import insertDialog from './powerDialog/insertDialog.vue'
import communicateEquip from './communicateEquip/index.vue'
import channelList from './channelList/index.vue'

export default defineComponent({
  name: 'powerEquip',
  components: {
    deviceDetails,
    videoEquip,
    insertDialog,
    communicateEquip,
    channelList,
  },
  props: {},
  data() {
    return {
      insertDialog_: false, //新增弹窗控制
      dialogTitle: '',
    }
  },
  setup() {
    const deviceNumData = ref([])
    const tableData = ref([
      {
        manufactor: '上海永天科技股份有限公司',
        deviceModel: '测试设备',
        deviceNum: '8',
      },
      {
        manufactor: '上海永天科技股份有限公司',
        deviceModel: '测试设备',
        deviceNum: '8',
      },
      {
        manufactor: '海永天科技股份有限公司',
        deviceModel: '试设备1',
        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('')
    const show = ref(false)
    const updateTitle = ref('')

    const deviceNumSelect = (data) => {
      data
      // console.log(data);
      filterText.value = ''

      deviceNumData.value = [
        {
          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',
        },
      ]
    }

    const datalist = reactive([])

    const addItem = () => {
      datalist.value = [
        {
          id: '',
          stationName: '',
          stationCode: '',
          stationAddress: '',
          siteList: [],
          done: '',
          guaZai: '',
          deviceAbty: true,
        },
      ]
      updateTitle.value = '新增设备信息'
      show.value = true
    }

    const update = (row) => {
      console.log(row)
      datalist.value = [
        {
          id: '',
          stationName: '',
          stationCode: '',
          stationAddress: '',
          siteList: [],
          done: '',
          guaZai: '',
          deviceAbty: true,
        },
      ]
      updateTitle.value = '修改设备信息'
      show.value = true
    }

    const handleDelete = (ind, row) => {
      console.log(ind, row)
    }

    const showValue = (value) => {
      show.value = value
    }

    //返回
    const goBack = () => {
      deviceNumData.value = []
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    const handleClick = (tab, event) => {
      console.log(tab, event)
    }

    const Height = ref(0)
    Height.value = window.innerHeight - 255 + 'px'
    window.addEventListener('resize', () => {
      Height.value = window.innerHeight - 255 + 'px'
    })

    return {
      Height,
      deviceNumData,
      tableData,
      activeName,
      filterText,
      show,
      addItem,
      datalist,
      deviceNumSelect,
      showValue,
      updateTitle,
      handleDelete,
      update,
      goBack,
      headClass,
      handleClick,
    }
  },
})
</script>

<style lang="scss">
.powerEquip {
  height: calc(100vh - 130px);
  min-width: 810px;
  // padding: 30px;
  // margin-top: 50px;
}
//first样式
.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;
      }
    }
  }
  .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>