Web/admin.ui.plus-master/src/views/admin/statement/moreOilEngineDetails/index.vue

<template>
  <div class="layout-pd">
    <el-row>
      <el-col :xs="24">
        <el-card style="height: 86vh"   class="mt8 my-fill all-con" shadow="hover">
          <div class="tip-con">
            <el-alert
              title="加油机长时间离线"
              type="error"
              class="mb15"
            ></el-alert>
          </div>
          <div class="ma-con">
            <div class="top-con" id="top-conId" v-loading="oilListData.loading">
              <el-scrollbar>
                <div class="scrollbar-flex-content" >
                  <div :class="{'card':true,'active-card':index === 0} " name="card" @click="onCardChange($event,item)"  v-for="(item,index) in oilListData.list" v-bind:key="index"  >
                    <div class="info-con">
                      <span>{{item.oilEngineName}}&nbsp;&nbsp;
                        <span :style="{color:item.oilEngineStatus === '在线' ? '#67C23A' : '#F56C6C'}">
                          {{item.oilEngineStatus}}
                        </span>
                      </span>
                      <span >{{item.oilSpecifications}}</span>
                    </div>
                    <div class="info-con">
                      <span>油品:&nbsp;{{item.oils}}</span>
                      <span>自锁状态:&nbsp;
                        <span :style="{color:item.selfLockingState === '已启动' ? '#67C23A' : '#F56C6C'}">{{item.selfLockingState}}</span>
                      </span>
                    </div>
                    <div class="info-con">
                      <span>ESQS编码:&nbsp;{{item.ECQSCode}}</span>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
            <div class="bom-con">
              <div class="bomCon-lef">3D</div>
              <div class="bomCon-rig">
                <div class="bomConR-lef">
                  <el-card v-loading="detailsData.loading"  style="height:100%;" :header="detailsData.list.oilEngineName+'号机油机'">
                      <div class="oilInfo-con" >
                        <div class="oilInfo-item">出厂编号:&nbsp;{{detailsData.list.factoryNumber}}</div>
                        <div class="oilInfo-item">机型:&nbsp;{{detailsData.list.model}}</div>
                        <div class="oilInfo-item">制造商:&nbsp;{{detailsData.list.manufacture}}</div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>规格参数:&nbsp;{{detailsData.list.specifications}}</span>
                          <span>生产日期:&nbsp;{{detailsData.list.dateOfManufacture}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>测量范围:&nbsp;{{detailsData.list.measuringRange}}</span>
                          <span>安装日期:&nbsp;{{detailsData.list.installDate}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>准确度等级:&nbsp;{{detailsData.list.accuracyLevel}}</span>
                          <span>启用日期:&nbsp;{{detailsData.list.dateOfActivation}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>设备状态:&nbsp;{{detailsData.list.equipmentStatus}}</span>
                          <span>在线状态:&nbsp;{{detailsData.list.onlineStatus}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>报警状态:&nbsp;{{detailsData.list.alarmStatus}}</span>
                          <span>报警次数:&nbsp;{{detailsData.list.numberOfAlarms}}</span>
                        </div>
                        <div class="oilInfo-item oilInfo-item-two">
                          <span>累计在线时间:&nbsp;{{detailsData.list.accumulatedOnline}}</span>
                        </div>
                      </div>
                  </el-card>
                </div>
                <div class="bomConR-rig">
                  <el-card v-loading="tableData.loading"  style="height:100%" >
                    <el-table  :data="tableData.list" stripe  row-key="id" style="width: 100%">
                      <el-table-column prop="time" label="时间"  />
                      <el-table-column prop="refuelingGun" label="加油枪" />
                      <el-table-column prop="alarmSource" label="报警来源" />
                      <el-table-column prop="alarmDescription" label="报警描述" />
                      <el-table-column prop="alarmType" label="报警类型" />
                    </el-table>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup lang="ts">

import {onMounted, reactive, ref, watch} from "vue";
import {
  moreOilEngineDetails_DetailsData, moreOilEngineDetails_OilListData,
  moreOilEngineDetails_TableData
} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
import {MoreOilEngineDetailsApi} from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";

/******************************数据对象***************************************/

/**
 * 表格数据对象
 */
const tableData = reactive({
  loading: false,
  list: [] as Array<moreOilEngineDetails_TableData>
})

/**
 * 油机详情数据对象
 */
const detailsData = reactive({
  loading: false,
  list: {} as moreOilEngineDetails_DetailsData
})

/**
 * 油机列表详情数据对象
 */
const oilListData = reactive({
  loading: false,
  list: [] as Array<moreOilEngineDetails_OilListData>
})

/**
 * 油机列表初始ID
 */
const initID = ref()
/******************************数据对象***************************************/

/*******************************方法**************************************/

/**
 * 变换时改样式
 * @param event
 * @param item
 */
const onCardChange = (event, item) => {
  // console.log(event)
  // console.log(item);
  let ele = event.target

  if( ele.getAttribute('name') !== 'card') {
    ele = ele.closest('.card')
  }

  if(ele.classList.contains("active-card")) return

  initID.value = item.oilEngineName

  const parentElement = document.getElementById('top-conId')
  const myElement = parentElement.querySelector('.active-card')

  if(myElement){
    myElement.classList.remove('active-card')
  }

  ele.classList.add("active-card")
}

watch(() => initID.value, ()=>{
  initTableData()
  initDetailsData()
})

/*******************************方法**************************************/

/**********************************初始化***********************************/

/**
 * 初始化油机列表详情数据对象
 */
const initOilListData = async () => {
  oilListData.loading = true
  const { data } = await new MoreOilEngineDetailsApi().getOilListData()
  oilListData.list = data
  initID.value = data[0].oilEngineName
  oilListData.loading = false
}

/**
 * 初始化表格数据对象
 */
const initTableData = async () => {
  tableData.loading = true
  const { data } = await new MoreOilEngineDetailsApi().getTableData()
  tableData.list = data
  tableData.loading = false
}

/**
 * 初始化油机详情数据对象
 */
const initDetailsData = async () => {
  detailsData.loading = true
  const { data } = await new MoreOilEngineDetailsApi().getDetailsData()
  detailsData.list = data
  detailsData.loading = false
}

const init = () => {
  initOilListData()
}

onMounted(() => {
  init()
})

/**********************************初始化***********************************/



</script>

<style scoped lang="scss">
  .all-con {

    .ma-con {
      height: 100%;
      .top-con {
        height: 18%;
        .scrollbar-flex-content {
          display: flex;
          height: 100%;
        }

        .card {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          padding: 10px;
          width: 240px;
          margin: 14px;
          border-radius: 4px;
          box-shadow: var(--el-box-shadow-light);
          cursor: pointer;
          font-size: 12px;
          font-weight: 600;

          .info-con {
            display: flex;
            justify-content: space-between;
          }
        }

        .active-card {
          background-color: #9fcaf3;
        }
      }
      .bom-con {
        display: flex;
        height: 82%;

        .bomCon-lef {
          width: 24%;
        }

        .bomCon-rig {
          display: flex;
          width: 80%;

          .bomConR-lef {
            width: 50%;

            .oilInfo-con {

              .oilInfo-item {
                margin-bottom: 25px;
              }
              .oilInfo-item-two > span {
                display: inline-block;
                width: 50%;
              }
            }
          }

          .bomConR-rig {
            width: 50%;
          }

          .bomConR-lef, .bomConR-rig {
            padding: 20px;
          }
        }
      }
    }
  }
</style>