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

<template>
  <div class="all-con" style="position: relative;">
    <!-- 顶部图标和导航部分 -->
    <el-icon style="position: absolute;left: -15px;top: 17px;">
      <component style="color:#fff;background-color: #3d3dff;height: 2.5em;border-radius:5px 0 0 5px;"
        :is="showicon? CaretLeft : CaretRight" @click="onShowHide" />
    </el-icon>
    <el-card class="oilInfo-bottom one">
      <el-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em">
        <!-- 导航选项 -->
        <el-col :span="1">
          <div :style="isDisplay == 1? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览</div>
        </el-col>
        <el-col :span="2">
          <div :style="isDisplay == 2? 'border-bottom:1px solid blue' : 'border:none'" @click="display(2)">报警</div>
        </el-col>
        <el-col :span="3" class="oilInfo-bottom">
          <div :style="isDisplay == 3? 'border-bottom:1px solid blue' : 'border:none'" @click="display(3)">ECQS编码状态</div>
        </el-col>
        <el-col :span="3" class="oilInfo-bottom">
          <div :style="isDisplay == 4? 'border-bottom:1px solid blue' : 'border:none'" @click="display(4)">维修记录</div>
        </el-col>
        <el-row :span="15" class="oilInfo-bottom to-flex" style="position: absolute;right: 0;">
          <div style="margin-right: 1em;">图例：</div>
          <div style="margin-right: 2em;">
            <div class="status-point" style="background-color:#5b53f9;right: 18.5em;top: 0.75em;" />在线
          </div>
          <div style="margin-right: 0.75em;">
            <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />离线
          </div>
          <div style="margin-right: 0.75em;">
            <img :src="uurl" style="width: 1em;margin-right: 0.25em;">校验成功
          </div>
          <div style="margin-right: 2em;">
            <img :src="urrl" style="width: 1em;margin-right: 0.25em;">校验失败
          </div>
        </el-row>
      </el-row>
    </el-card>
    <div class="tip-con">
      <el-alert v-if="detailsData.list.onlineStatus === '离线'" title="加油机长时间离线" type="error" class="mb15"></el-alert>
      <el-alert v-if="detailsData.list.onlineStatus === '在线'" title="加油机长时间在线" type="success" class="mb15"></el-alert>
    </div>
    <!-- 新的父容器包裹油机内容，方便设置样式 -->
    <div class="engine-content-container">
      <el-card class="oilInfo-con oilInfo-bottom">
        <el-row class='oilInfo-bottom'>
          <img class="oilInfo-img" :src="url">
          <div>
            <el-col :span="24" class="oilInfo-bottom">
              <div class="status-point oilInfo-con-first"
                :style="detailsData.list.onlineStatus == '在线'? 'background-color:#5b53f9' : 'background-color:#9f9fa3'" />
              <span style="margin:0 0.5em 0 1em">{{ detailsData.list.name }}号机油机</span>
              <img :src="uurl" style="width: 1em;">
            </el-col>
            <el-col :span="24" class="oilInfo-bottom">
              <span class='oilInfo-item'>出厂编号：</span>{{ detailsData.list.serialNumber }}
            </el-col>
            <el-col :span="24" class="oilInfo-bottom">
              <span class='oilInfo-item'>制造商：</span>{{ detailsData.list.manufacturer }}
            </el-col>
          </div>
        </el-row>
        <div>
          <el-row :gutter="20">
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>机型：</span>{{ detailsData.list.model }}
            </el-col>
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>规格参数：</span>{{ detailsData.list.modelSpec }}
            </el-col>
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>测量范围：</span>{{ detailsData.list.measureRang }}
            </el-col>
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>准确度等级：</span>{{ detailsData.list.accuracyLevel }}
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>生产日期：</span>{{ detailsData.list.createdTime }}
            </el-col>
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>安装日期：</span>{{ detailsData.list.installationDate }}
            </el-col>
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>启用日期：</span>{{ detailsData.list.startupDate }}
            </el-col>
            <el-col :span="6" class="oilInfo-bottom">
              <span class='oilInfo-item'>累计在线时间：</span>{{ detailsData.list.onlineDesc }}
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <!-- 新的父容器包裹油枪信息，方便设置样式 -->
    <div class="nozzle-content-container">
      <el-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
        <el-col :span="8" v-for="(item, index) in listcom" v-bind:key="index">
          <el-card class="oilInfo-msg oilInfo-bottom"
            @click="toParts(item.name, item.mainBoard_NozzleNo, item.onlineStatus, item.fuelName, item.alarming, item.code)">
            <el-row class="oilInfo-bottom">
              <img :src="url" class="oilInfo-img">
              <div>
                <el-col :span="24" class="oilInfo-bottom">
                  <el-text tag="b">逻辑枪号：{{ item.name }}</el-text>
                  <div style="position: absolute;right: 10%;top: 5%;">
                    <div class="status-point"
                      :style="item.onlineStatus == '在线'? 'background-color:#5b53f9' : 'background-color:#9f9fa3'">
                    </div>
                    <img :src="uurl" style="width: 1em;">
                  </div>
                </el-col>
                <el-col :span="24" class="oilInfo-bottom">
                  <span class="oilInfo-item-two">物理枪号：</span>{{ item.mainBoard_NozzleNo }}
                </el-col>
                <el-col :span="24" class="oilInfo-bottom">
                  <span class="oilInfo-item-two">自锁功能：</span>{{ item.alarming }}
                </el-col>
              </div>
            </el-row>
            <el-row class="oilInfo-bottom">
              <span class="oilInfo-item-two">油品：</span>{{ item.fuelName }}
            </el-row>
            <el-row>
              <span class="oilInfo-item-two">ECQS编码：</span>{{ item.code }}
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
//import { CirclePlusFilled } from '@element-plus/icons-vue'
import { NozzlecontrolDtl } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsDto";
import { OilEngineDetailsApi } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsApi";
import { FuelDispenserEntity, AlarmHistoryDto } from "/@/api/admin/reportManagement/oilEngineDetails/oilEngineDetailsDto"
import router from "/@/router";
import { MoreOilEngineDetailsApi } from "/@/api/admin/reportManagement/moreOilEngineDetails/moreOilEngineDetailsApi";

import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    CaretRight,
    CaretLeft,
} from '@element-plus/icons-vue'

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

const url = '/src/assets/logo-com.png'
const uurl = '/src/assets/map/IconParkSolidCheckOne.png'
const urrl = '/src/assets/map/IconParkSolidCloseOne.png'

/**
 * 接收index.vue传的id,传递 菜单栏控制参数
 */
const props = defineProps({
    id: String,
})

const emit = defineEmits(['getIcon'])

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

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

/**
 * 油机列表详情数据对象
 */
const oilListData = reactive({
    loading: false,
    list: [] as Array<NozzlecontrolDtl>
})
/**
 * 油机列表初始ID
 */
const initID = ref()
const toPage = () => {
    const id = props.id
    router.push({ path: `/statement/${id}/more/moreAlert` })
}

/**
 * 油枪列表相关数据
 */
let listcom = JSON.parse(JSON.stringify(oilListData.list))
let flagData = reactive({
    keyData: 0,
    isFlag: '所有'
})
/******************************数据对象***************************************/

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

// /**
//  * 变换时改样式
//  * @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()
})
watch(props, (val) => {
    init()
})
/*******************************方法**************************************/

/**********************************初始化***********************************/
/**
 * 格式化日期
 */
const formatDate = (val) => {
    const date = new Date(val)
    const year: number = date.getFullYear();
    const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
    const day: string = date.getDate().toString().padStart(2, '0');
    const hours: string = date.getHours().toString().padStart(2, '0');
    const minutes: string = date.getMinutes().toString().padStart(2, '0');
    const seconds: string = date.getSeconds().toString().padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
/**
 * 初始化油机列表详情数据对象
 */
const initOilListData = async () => {
    oilListData.loading = true
    const fuelId = props.id
    const { data } = await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: fuelId })
    oilListData.list = data
    oilListData.loading = false
    listcom = data
    flagData.keyData = Math.random()
}

/**
 * 初始化表格数据对象
 */
const initTableData = async () => {
    tableData.loading = true
    const fuelId = props.id
    const filter = { fuelId: fuelId }
    const pageInput = { currentPage: 1, pageSize: 5 }
    const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({ ...pageInput, filter: filter })
    tableData.list = data.list
    tableData.list = tableData.list?.map((item) => {
        if (item.createdDate !== null) {
            item.createdDate = formatDate(item.createdDate)
        }
        return item
    })
    tableData.loading = false
}

/**
 * 初始化油机详情数据对象
 */
const initDetailsData = async () => {
    detailsData.loading = true
    const fuelId = props.id
    const { data } = await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: fuelId })
    detailsData.list = data
    if (detailsData.list.createdTime !== null) {
        detailsData.list.createdTime = formatDate(detailsData.list.createdTime)
    }
    if (detailsData.list.installationDate !== null) {
        detailsData.list.installationDate = formatDate(detailsData.list.installationDate)
    }
    if (detailsData.list.startupDate !== null) {
        detailsData.list.startupDate = formatDate(detailsData.list.startupDate)
    }
    if (detailsData.list.onlineStatus !== null) {
        if (detailsData.list.onlineStatus === 'offline') {
            detailsData.list.onlineStatus = '离线'
        } else {
            detailsData.list.onlineStatus = '在线'
        }
    }
    if (detailsData.list.deviceStatus !== null) {
        if (detailsData.list.deviceStatus === 'enable') {
            detailsData.list.deviceStatus = '启用'
        } else if (detailsData.list.deviceStatus === 'factory') {
            detailsData.list.deviceStatus = '出厂注册'
        } else {
            detailsData.list.deviceStatus = '备案'
        }
    }
    detailsData.loading = false
}

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

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

// 路由跳转 -- 部件信息图
const toParts = ((name: any, NozzleNo: any, status: any, fuelName: any, alarming: any, code: any) => {
    router.push({
        path: `/statement/partInformation`,
        query: {
            name: name,
            NozzleNo: NozzleNo,
            status: status,
            fuelName: fuelName,
            alarming: alarming,
            code: code
        }
    })
})
/**********************************初始化***********************************/

const isOnline = (statu: string) => {
    if (statu == '所有') {
        listcom = JSON.parse(JSON.stringify(oilListData.list))
    } else {
        listcom = oilListData.list.filter((data) => {
            return data.onlineStatus === statu
        })
    }
    flagData.keyData = Math.random()
    flagData.isFlag = statu
}


const isDisplay = ref(1)
// 内容区顶部导航 变换
const display = (num: number) => {
    isDisplay.value = num
    if (num == 2) {
        toPage()
    }
}

// 菜单栏的显示与隐藏
let showicon = ref(true)
const onShowHide = () => {
    showicon.value = !showicon.value
    emit('getIcon', showicon.value)
}

</script>

<style scoped lang="scss">
.all-con {
    flex: 1;
    margin-left: 20px;


}

.oilInfo-bottom {
    margin-bottom: 10px;
}

.oilInfo-top {
    margin-bottom: 10px;
}

.oilInfo-con {
    width: 100%;
    height: 25%;
    border-radius: 10px;

}

.oilInfo-item {
    color: rgb(173, 171, 171)
}

.oilInfo-img {
    margin-right: 20px;
    width: 75px;
    height: 75px;
    background-color: #ccc;
    border-radius: 8px;
}

.oilLabel-con {
    background-color: #89898b;
    height: 1.5em;
    width: 3.9em;
    line-height: 1.5em;
    text-align: center;
    border-radius: 999rem;
    color: #fff;
}

.oilInfo-msg {
    height: 200px;

    .oilInfo-item-two {
        color: rgb(173, 171, 171)
    }
}

// 小圆点
.status-point {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    right: 10%;
    top: 30%;
    margin-right: 30px;
}

.oilInfo-con-first {
    left: 7em;
    top: 0.5em;
}
</style>