mky-vent-base/src/views/vent/safetyList/index.vue

<template>
  <div class="safetyList">
    <customHeader>安全监控分站管理</customHeader>
    <div class="content">
      <div class="left-box">
        <div class="left-title">
          <div class="title-fz">
            <span>分站：</span>
            <span>
              [通讯正常]
              <span class="zd-open">{{ openNum || 0 }}</span>
            </span>
            <span>
              [通讯中断]
              <span class="zd-close">{{ clsoeNum || 0 }}</span>
            </span>
          </div>
          <!-- <div class="title-cd">
            <span>测点：</span>
            <span>
              [通讯正常]
              <span class="zd-open">407</span>
            </span>
            <span>
              [通讯中断]
              <span class="zd-close">0</span>
            </span>
          </div> -->
        </div>
        <div class="left-content">
          <div class="card-box" v-for="(item, index) in cardList" :key="index">
            <div :class="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'"
              @click="cardClick(item, index)">
              <div class="card-item-label">{{ item.strname }}</div>
            </div>
            <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex==index && isShow" >
              <div class="modal-name">站点名称：</div>
              <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
              <div class="modal-lj">连接状态：</div>
              <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="right-title">详细信息：</div>
        <a-table size="small" :scroll="{ y: 680 }" :columns="columns" :data-source="tableData" :pagination="pagination" @change="pageChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, onMounted } from 'vue';
import customHeader from '/@/components/vent/customHeader.vue';
import { subStationList, getList,getEdit } from './safetyList.api';
import { columns } from './safetyList.data'

let isShow=ref(false)
let stationName = ref('')
let stationStatus = ref(null)
let stationId=ref(null)
let ljList = reactive<any[]>([
  { value: 0, label: '断开' },
  { value: 1, label: '连接' }
])
let activeIndex = ref(null)
let cardList = ref<any[]>()
let openNum = ref(0)
let clsoeNum = ref(0)

//分页参数配置
let pagination = reactive({
  current: 1, // 当前页码
  pageSize: 20, // 每页显示条数
  total: 0, // 总条目数，后端返回
  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
  showSizeChanger: true, // 是否可改变每页显示条数
  pageSizeOptions: ['10', '20', '30', '40', '50', '100'], // 可选的每页显示条数
});
let tableData = ref<any[]>([])


//获取分站信息
async function getSubStationList() {
  let res = await subStationList({})
  console.log(res, '分站-----------')
  if (res.length != 0) {
    cardList.value = res
    openNum.value = cardList.value?.filter(v => v.linkstatus == 1)['length']
    clsoeNum.value = cardList.value?.filter(v => v.linkstatus == 0)['length']
  } else {
    cardList.value = []
  }
}
//站点选项点击
function cardClick(item, index) {
  console.log(item, '站点选项------------')
  activeIndex.value = item.isNewAccess ? index : null
  stationName.value = item.strname
  stationStatus.value=item.linkstatus
  stationId.value=item.id
  isShow.value=true
}
//站点名称编辑
function changeName(val){
  getChangeStation()
}
//站点连接状态修改
function changeStatus(val){
  getChangeStation()
}
async function getChangeStation(){
  let res=await getEdit({id:stationId.value,strname:stationName.value,linkstatus:stationStatus.value})
  console.log(res,'站点编辑')
  getSubStationList()
  isShow.value=false
}
//获取详细信息列表
async function getStationList() {
  let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, })
  console.log(res, '详细信息列表--------')
  let data = res.records
  data.forEach(el => {
    el.linkstatusC = el.linkstatus ? '连接' : '未连接'
    el.children = el.devInfoList
    el.children.forEach(v => {
      v.linkstatus = v.netStatus
      v.linkstatusC = v.linkstatus ? '连接' : '未连接'
      v.updateTime = v.time
    })
  })
  tableData.value = data
  pagination.total = res.total
}
//分页切换
function pageChange(val) {
  pagination.current = val.current;
  pagination.pageSize = val.pageSize;
  getStationList();
}

onMounted(() => {
  getSubStationList()
  getStationList()
})
</script>

<style lang="less" scoped>
.safetyList {
  width: calc(100% - 20px);
  height: calc(100% - 90px);
  position: relative;
  margin: 80px 10px 10px 10px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-box {
      width: 40%;
      height: 100%;
      margin-right: 15px;
      padding: 10px;
      box-sizing: border-box;
      background: url('@/assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;

      .left-title {
        display: flex;
        height: 30px;
        align-items: center;
        font-size: 14px;
        margin-bottom: 10px;

        span {
          color: #fff;
        }

        .zd-open {
          color: rgb(0, 242, 255);
        }

        .zd-close {
          color: #ff0000;
        }

        .title-fz {
          margin-right: 25px;
        }
      }

      .left-content {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        height: calc(100% - 40px);
        overflow-y: auto;

        .card-box {
          position: relative;
          // width: 242px;
          width: 182px;
          height: 110px;
          margin-bottom: 15px;
          display: flex;
          justify-content: center;

          .card-itemN {
            position: relative;
            width: 85px;
            height: 110px;
            background: url('../../../assets/images/zd-2.png') no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;

            .card-item-label {
              width: 100%;
              position: absolute;
              bottom: 5px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
          }

          .card-itemL {
            position: relative;
            width: 85px;
            height: 110px;
            background: url('../../../assets/images/zd-3.png') no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;

            .card-item-label {
              width: 100%;
              position: absolute;
              bottom: 5px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
          }

          .card-itemD {
            position: relative;
            width: 85px;
            height: 110px;
            background: url('../../../assets/images/zd-1.png') no-repeat center;
            background-size: 100% 100%;
            cursor: pointer;

            .card-item-label {
              width: 100%;
              position: absolute;
              bottom: 5px;
              font-size: 12px;
              color: #fff;
              text-align: center;
            }
          }

          .card-modal {
            width: 86px;
            position: absolute;
            left: 140px;
            color: #FFF;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 12px;
          }

          .card-modal1 {
            width: 86px;
            position: absolute;
            left: -42px;
            color: #FFF;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 12px;
          }

        }
      }
    }

    .right-box {
      width: calc(60% - 15px);
      height: 100%;
      padding: 10px;
      box-sizing: border-box;
      background: url('@/assets/images/fire/bj1.png') no-repeat center;
      background-size: 100% 100%;

      .right-title {
        display: flex;
        height: 30px;
        align-items: center;
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;
      }
    }
  }
}

::v-deep(.zxm-radio-wrapper) {
  font-size: 12px;
}

::v-deep(.zxm-input) {
  font-size: 12px;
}
</style>