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

<template>
  <div class="powerEquip">
    <el-tabs
      v-model="activeName"
      type="card"
      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 != ''"
              >
                返回
              </el-button>
              <span class="firstTopLeftTitle">
                {{ deviceNumData.length != '' ? '设备或编号' : '名称或地址' }}:
              </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 == ''">
            <el-table
              :data="
                tableData.filter(
                  (data) =>
                    !filterText ||
                    data.siteName
                      .toLowerCase()
                      .includes(filterText.toLowerCase()) ||
                    data.siteAddress
                      .toLowerCase()
                      .includes(filterText.toLowerCase())
                )
              "
              border
              stripe
              :header-cell-style="headClass"
              :height="Height"
            >
              <el-table-column
                prop="siteName"
                label="站点名称"
                width=""
              ></el-table-column>
              <el-table-column
                prop="siteAddress"
                label="站点地址"
                width=""
              ></el-table-column>
              <el-table-column
                prop="userName"
                label="联系人"
                width=""
              ></el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
                width=""
              ></el-table-column>
              <el-table-column prop="deviceCount" label="设备数量" width="">
                <template #default="scope">
                  <div
                    style="margin-right: 15px; cursor: pointer; color: #409eff"
                    @click="
                      deviceNumSelect({
                        id: scope.row.id,
                        deviceCount: scope.row.deviceCount,
                      })
                    "
                  >
                    {{ scope.row.deviceCount }}
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="firstContent" v-if="deviceNumData.length != ''">
            <deviceDetails
              :filter_Text="filterText"
              :Height="Height"
              :refresh="refresh"
              @updateRow="update"
            ></deviceDetails>
          </div>

          <!-- 新增 -->
          <insert-Dialog
            :flag="show"
            :data_list="datalist"
            :deviceNumDataContent="deviceNumData"
            :updateTitle="updateTitle"
            @show="showValue"
          ></insert-Dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="视频监测设备" name="videoEquip">
        <video-Equip :Height="Height"></video-Equip>
      </el-tab-pane>
      <el-tab-pane label="通信设备" name="communicateEquip">
        <communicate-Equip :Height="Height"></communicate-Equip>
      </el-tab-pane>
      <el-tab-pane label="通道列表" name="channelList">
        <channel-List :Height="Height"></channel-List>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { defineComponent, ref, reactive, onMounted } 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'

import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'powerEquip',
  components: {
    deviceDetails,
    videoEquip,
    insertDialog,
    communicateEquip,
    channelList,
  },
  props: {},
  setup() {
    const store = useStore()
    const tableData = ref([])
    const deviceNumData = ref('') //判断设备列表详情是否显示
    const refresh = ref(false) //设备列表详情table 是否重新调用
    const activeName = ref('powerEquip')
    const filterText = ref('')
    const show = ref(false)
    const updateTitle = ref('')

    const datalist = reactive([])
    //新增 向子组件 参数传递
    const addItem = () => {
      refresh.value = false
      datalist.value = [
        {
          monitorDeviceCode: '',
          monitorDeviceName: '',
          loopMeterAddress: 1,
          ratedVoltage: null,
          ratedCurrent: 1,
          currentLoadRate: 0,
          siteId: '',
          variableListId: 0,
          qualityAnalysis: true,
        },
      ]
      if (deviceNumData.value.length > 0) {
        datalist.value[0].siteId = store.state.siteId
      }
      updateTitle.value = '新增设备信息'
      show.value = true
    }
    //修改 向子组件 参数传递
    const update = (row) => {
      datalist.value = [
        {
          id: row.id,
          monitorDeviceCode: row.monitorDeviceCode,
          monitorDeviceName: row.monitorDeviceName,
          loopMeterAddress: row.loopMeterAddress,
          ratedVoltage: row.ratedVoltage,
          ratedCurrent: row.ratedCurrent,
          currentLoadRate: row.currentLoadRate,
          siteId: row.siteId,
          variableListId: row.variableListId,
          qualityAnalysis: row.qualityAnalysis === '是' ? true : false,
        },
      ]
      updateTitle.value = '修改设备信息'
      show.value = true
    }
    //点击事件 查询设备详情
    const deviceNumSelect = (data) => {
      filterText.value = ''
      if (data.deviceCount != null && data.deviceCount != '') {
        store.state.siteId = data.id
        deviceNumData.value = JSON.stringify(data.id)
      } else {
        ElMessage({
          message: '此站点下暂无设备',
          type: 'warning',
        })
      }
    }
    //电力监测设备列表
    function monitorDeviceList() {
      api.monitorDeviceList({}).then((requset) => {
        if (requset.status === 'SUCCESS') {
          tableData.value = requset.data
          store.state.siteList = tableData
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    //新增弹窗控制
    const showValue = (value) => {
      show.value = value
      deviceNumData.value != '' ? (refresh.value = true) : monitorDeviceList()
    }
    //返回
    const goBack = () => {
      deviceNumData.value = ''
      monitorDeviceList()
    }
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }
    const Height = ref(0)
    Height.value = window.innerHeight - 300 + 'px'
    window.addEventListener('resize', () => {
      Height.value = window.innerHeight - 300 + 'px'
    })

    onMounted(() => {
      monitorDeviceList()
    })
    return {
      refresh,
      Height,
      deviceNumData,
      tableData,
      activeName,
      filterText,
      show,
      addItem,
      update,
      datalist,
      deviceNumSelect,
      showValue,
      updateTitle,
      goBack,
      headClass,
    }
  },
})
</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>