|
|
@@ -1,173 +1,135 @@
|
|
|
<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>
|
|
|
- <!-- 油机内容 -->
|
|
|
- <el-text tag="b" style="color: #000">油机详情</el-text>
|
|
|
- <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>
|
|
|
- <el-row :gutter="10" class="oilInfo-bottom">
|
|
|
- <el-col :span="0.5" class="oilInfo-bottom">
|
|
|
- <el-text tag="b" style="color: #000">油枪列表</el-text>
|
|
|
+ <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="0.5" class="oilInfo-bottom">
|
|
|
- <div class="oilLabel-con" @click="isOnline('所有')"
|
|
|
- :style="flagData.isFlag == '所有' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
|
|
|
- 所有
|
|
|
- </div>
|
|
|
+ <el-col :span="24" class="oilInfo-bottom">
|
|
|
+ <span class='oilInfo-item'>出厂编号：</span>{{ detailsData.list.serialNumber }}
|
|
|
</el-col>
|
|
|
- <el-col :span="0.5" class="oilInfo-bottom">
|
|
|
- <div class="oilLabel-con" @click="isOnline('在线')"
|
|
|
- :style="flagData.isFlag == '在线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
|
|
|
- 在线</div>
|
|
|
+ <el-col :span="24" class="oilInfo-bottom">
|
|
|
+ <span class='oilInfo-item'>制造商：</span>{{ detailsData.list.manufacturer }}
|
|
|
</el-col>
|
|
|
- <el-col :span="0.5" class="oilInfo-bottom">
|
|
|
- <div class="oilLabel-con" @click="isOnline('离线')"
|
|
|
- :style="flagData.isFlag == '离线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
|
|
|
- 离线</div>
|
|
|
+ </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="0.5" class="oilInfo-bottom">
|
|
|
- <div class="oilLabel-con" style="background-color: #89898b; width: 6em;">校验通过</div>
|
|
|
+ <el-col :span="6" class="oilInfo-bottom">
|
|
|
+ <span class='oilInfo-item'>规格参数：</span>{{ detailsData.list.modelSpec }}
|
|
|
</el-col>
|
|
|
- <el-col :span="0.5" class="oilInfo-bottom">
|
|
|
- <div class="oilLabel-con" style="background-color: #89898b; width: 6em;">校验失败</div>
|
|
|
+ <el-col :span="6" class="oilInfo-bottom">
|
|
|
+ <span class='oilInfo-item'>测量范围：</span>{{ detailsData.list.measureRang }}
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
- <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 :span="6" class="oilInfo-bottom">
|
|
|
+ <span class='oilInfo-item'>准确度等级：</span>{{ detailsData.list.accuracyLevel }}
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
+ </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">
|
