grgw_vue_2025/src/views/home/home.vue

<template>
  <div class="index-body2">
    <div class="index_header">
      <span class="index_header-word">磐石市供热信息化平台</span>
    </div>
    <div class="index-central">
      <div style="width: 20px;height: 20px;position: absolute;cursor: pointer;" @click="showList"></div>
      <div class="index-center-home">
        <div class="real-time-line">
          <span class="real-time-title">实时数据监测</span>
          <div style="float:right;margin-right: 50px;">
            <a-switch checkedChildren="卡片" unCheckedChildren="列表" v-model:checked="twoShowType" />
          </div>
        </div>
        <div v-show="twoShowType">
          <div>
            <a-row>
              <a-col :span="6" v-for="(item ,index) in list1" :key="index">
                <a-card :title="item.view001Name" :hoverable=true :headStyle="headStyle" class="acolclass" >
                  <template #extra><div style="float:right;cursor: pointer;color: #00feff;;font-size: 18px;" @click="showMore(item.view002)">换热站</div></template>
                  <a-row style="line-height: 30px;">
                    <a-col :span="24" style="padding:0 10px;text-align: right;font-size: 18px;">
                        <span>{{item.datatime}}</span>
                    </a-col>
                    <a-col :span="6" style="text-align: center;font-size: 18px;">
                      <div>供水温度</div>
                      <div>{{item.view005}}</div>
                    </a-col>
                    <a-col :span="6" style="text-align: center;font-size: 18px;">
                      <div>回水温度</div>
                      <div>{{item.view006}}</div>
                    </a-col>
                    <a-col :span="6" style="text-align: center;font-size: 18px;">
                      <div>供水压力</div>
                      <div>{{item.view007}}</div>
                    </a-col>
                    <a-col :span="6" style="text-align: center;font-size: 18px;">
                      <div>回水压力</div>
                      <div>{{item.view008}}</div>
                    </a-col>
                  </a-row>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </div>
        <div v-show="!twoShowType">
          <table class="tableleft">
            <thead class="data-list-header-home">
            <tr class="data-list-header-home2">
              <td style="width:20%;">热力公司</td>
              <td style="width:10%;">热源</td>
              <td style="width:20%;">数据时间</td>
              <td style="width:10%;">供水温度</td>
              <td style="width:10%;">回水温度</td>
              <td style="width:10%;">供水压力</td>
              <td style="width:10%;">回水压力</td>
              <td style="width:10%;"></td>
            </tr>
            </thead>
            <tbody class="data-list1-home">
              <tr v-for="(item,index) in list1" :key="item.id" :class="index%2==0?'data-list-data-home':'data-list-data3-home'">
                <td class="Hot-Title">{{ item.view001Name }}</td>
                <td class="tabulation">{{ item.view002Name }}</td>
                <td style="width:20%; text-align: center;">{{ item.datatime }}</td>
                <td style="width:10%; text-align: center;">{{ item.view005 }}</td>
                <td style="width:10%; text-align: center;">{{ item.view006 }}</td>
                <td style="width:10%; text-align: center;">{{ item.view007 }}</td>
                <td style="width:10%; text-align: center;">{{ item.view008 }}</td>
                <td style="width:10%; text-align: center;cursor: pointer;color: #00feff;" @click="showMore(item.view002)">换热站</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="photoModal" ref="refModal">
    <a-modal
      v-model:visible="detailVisible"
      width="1600px"
      :wrap-style="{ overflow: 'hidden' }"
      :destroyOnClose="true"
      :footer="null"
      :maskStyle="{ backgroundColor: 'rgb(209,204,204,.45)'}"
      :getContainer="()=> refModal"
    >
      <template #title>
        <div ref="modalTitleRef" style="width: 100%; cursor: move;color: #ffffff">实时数据监测</div>
      </template>
      <div class="index-body2">
        <div class="">
          <table class="tableleft">
            <thead class="data-list-header-detail">
            <tr class="data-list-header2">
              <td style="width:11%;">热力公司</td>
              <td style="width:11%;">热源</td>
              <td style="width:11%;">换热站</td>
              <td style="width:15%;">数据时间</td>
              <td style="width:6%;">供水温度</td>
              <td style="width:6%;">回水温度</td>
              <td style="width:6%;">供水压力</td>
              <td style="width:6%;">回水压力</td>
              <td style="width:6%;">供水温度</td>
              <td style="width:6%;">回水温度</td>
              <td style="width:6%;">供水压力</td>
              <td style="width:6%;">回水压力</td>
            </tr>
            </thead>
            <tbody class="data-list1">
              <tr v-for="(item,index) in list2" :key="item.id" :class="index%2==0?'data-list-data-detail':'data-list-data3-detail'">
                <td class="Hot-Title-detail">{{ item.view001Name }}</td>
                <td class="tabulation-detail">{{ item.view002Name }}</td>
                <td class="tabulation-detail">{{ item.view004Name }}</td>
                <td style="width:15%; text-align: center;">{{ item.datatime }}</td>
                <td style="width:6%; text-align: center;">{{ item.view005 }}</td>
                <td style="width:6%; text-align: center;">{{ item.view006 }}</td>
                <td style="width:6%; text-align: center;">{{ item.view007 }}</td>
                <td style="width:6%; text-align: center;">{{ item.view008 }}</td>
                <td style="width:6%; text-align: center;">{{ item.view009 }}</td>
                <td style="width:6%; text-align: center;">{{ item.view010 }}</td>
                <td style="width:6%; text-align: center;">{{ item.view011 }}</td>
                <td style="width:6%; text-align: center;">{{ item.view012 }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </a-modal>
  </div>
  <HeatanalysisListModal ref="listModal"></HeatanalysisListModal>
</template>

<script lang="ts" name="home-screen" setup>
import { onMounted, ref  } from 'vue';
import { Modal as AModal } from 'ant-design-vue';
import HeatanalysisListModal from '@/views/heating/heatanalysis/HeatanalysisListModal.vue'
import { sourceList,heatanalysisList } from './home.api';

const list1 = ref();
const list2 = ref();
const detailVisible = ref<boolean>(false);
const twoShowType = ref(true);
const listModal = ref();
const headStyle = ref({
  'font-size':'18px',
  'font-weight':'700',
  'color':'#fff261'
});
const refModal = ref<any>();

async function getSource(){
  const resData = await sourceList();
  list1.value = resData;
}

async function showMore(view002){
  const resData = await heatanalysisList({"view002":view002});
  console.log(resData);
  list2.value = resData;
  detailVisible.value = true;
}

function showList(){
  listModal.value.list();
}

//定时2分钟
setInterval(()=>{
  getSource();
},1000 * 60 * 2)

onMounted(() => {
  getSource();
});

</script>

<style lang="less" scoped>
  @import '/@/assets/loginmini/style/screen.less';

  ::v-deep .ant-card-head{
    min-height: 45px
  }

  ::v-deep .ant-card-body{
    color: #fff;
    padding: 0px;
  }

  .acolclass{
    background: linear-gradient(180deg, rgba(7, 58, 152, 0.1), rgba(7, 58, 152, 0.6));
    margin: 10px;
    padding: 5px;
  }

  .photoModal ::v-deep .ant-modal{
    .ant-modal-header{
      background: #071b3d;
    }
    .ant-modal-close{
      color: #ffffff;
    }
  }


</style>