|
@@ -1,178 +1,377 @@
|
|
|
<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 style="position: absolute;left: -15px;top: 17px;z-index: 10;">
|
|
|
+ <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-row :gutter="10" style="text-align: center;line-height: 2em;height: 2em;position: relative;">
|
|
|
<el-col :span="1">
|
|
|
- <div :style="isDisplay == 1 ? 'border-bottom:1px solid blue' : 'border:none'" @click="display(1)">概览
|
|
|
- </div>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ <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;" />
|
|
|
+ <!-- 右侧图例 -->
|
|
|
+ <el-col :span="15" class="oilInfo-bottom to-flex" style="display: flex;justify-content: flex-end;">
|
|
|
+ <div style="margin-right: 1em;">图例:</div>
|
|
|
+ <div style="margin-right: 2em;display: flex;align-items: center;">
|
|
|
+ <div class="status-point" style="background-color:#5b53f9;margin-right: 5px;" />
|
|
|
在线
|
|
|
</div>
|
|
|
- <div style="margin-right: 0.75em;">
|
|
|
- <div class="status-point" style="background-color:#9f9fa3;right: 14.5em;top: 0.75em;" />
|
|
|
+ <div style="margin-right: 0.75em;display: flex;align-items: center;">
|
|
|
+ <div class="status-point" style="background-color:#9f9fa3;margin-right: 5px;" />
|
|
|
离线
|
|
|
</div>
|
|
|
- <div style="margin-right: 0.75em;">
|
|
|
+ <div style="margin-right: 0.75em;display: flex;align-items: center;">
|
|
|
<img :src="uurl" style="width: 1em;margin-right: 0.25em;">
|
|
|
校验成功
|
|
|
</div>
|
|
|
- <div style="margin-right: 2em;">
|
|
|
+ <div style="margin-right: 0.75em;display: flex;align-items: center;">
|
|
|
<img :src="urrl" style="width: 1em;margin-right: 0.25em;">
|
|
|
校验失败
|
|
|
</div>
|
|
|
- </el-row>
|
|
|
+ </el-col>
|
|
|
</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>
|
|
|
+ <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">
|
|
|
+
|
|
|
+ <!-- 概览内容 -->
|
|
|
+ <template v-if="isDisplay == 1">
|
|
|
+ <!-- 油机内容 -->
|
|
|
+ <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: 1.5em;margin-top: 0.3vh;">
|
|
|
+ </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-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: 1.5em;margin-top: 0.3vh;">
|
|
|
- </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>
|
|
|
+ <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" style="align-items: center;">
|
|
|
+ <el-col :span="2" class="oilInfo-bottom">
|
|
|
+ <el-text tag="b" style="color: #000">油枪列表</el-text>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" class="oilInfo-bottom">
|
|
|
+ <div class="oilLabel-con" @click="isOnline('所有')"
|
|
|
+ :style="flagData.isFlag == '所有' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
|
|
|
+ 所有
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" class="oilInfo-bottom">
|
|
|
+ <div class="oilLabel-con" @click="isOnline('在线')"
|
|
|
+ :style="flagData.isFlag == '在线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
|
|
|
+ 在线
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2" class="oilInfo-bottom">
|
|
|
+ <div class="oilLabel-con" @click="isOnline('离线')"
|
|
|
+ :style="flagData.isFlag == '离线' ? 'background-color:#4d4dff' : 'background-color:#89898b'">
|
|
|
+ 离线
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="oilInfo-bottom">
|
|
|
+ <div class="oilLabel-con" style="background-color: #89898b; width: 6em;">校验通过</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3" class="oilInfo-bottom">
|
|
|
+ <div class="oilLabel-con" style="background-color: #89898b; width: 6em;">校验失败</div>
|
|
|
+ </el-col>
|
|
|
</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-row :gutter="16" style="margin-top:10px;" :key="flagData.keyData">
|
|
|
+ <el-col :span="8" v-for="(item, index) in listcom" :key="index">
|
|
|
+ <el-card class="oilInfo-msg oilInfo-bottom"
|
|
|
+ @click="toParts(item)">
|
|
|
+ <el-row class="oilInfo-bottom">
|
|
|
+ <img :src="urll" 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: 1.5em;margin-top: 0.3vh;margin-left: 1vh;">
|
|
|
+ </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>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 报警内容 -->
|
|
|
+ <template v-if="isDisplay == 2">
|
|
|
+ <el-text tag="b" style="color: #000">报警记录</el-text>
|
|
|
+ <el-card class="oilInfo-con oilInfo-bottom">
|
|
|
+ <el-table
|
|
|
+ :data="tableData.list"
|
|
|
+ border
|
|
|
+ style="width: 100%;"
|
|
|
+ v-loading="tableData.loading"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="alarmType"
|
|
|
+ label="报警类型"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="alarmContent"
|
|
|
+ label="报警内容"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createdDate"
|
|
|
+ label="报警时间"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="status"
|
|
|
+ label="处理状态"
|
|
|
+ width="120"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">
|
|
|
+ {{ scope.row.status }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- ECQS编码状态内容 -->
|
|
|
+ <template v-if="isDisplay == 3">
|
|
|
+ <el-text tag="b" style="color: #000">ECQS编码状态</el-text>
|
|
|
+ <el-card class="oilInfo-con oilInfo-bottom">
|
|
|
+ <!-- ECQS筛选条件 -->
|
|
|
+ <el-row :gutter="20" class="oilInfo-bottom" style="margin-bottom: 15px;">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-input
|
|
|
+ v-model="ecqsFilter.code"
|
|
|
+ placeholder="请输入ECQS编码"
|
|
|
+ clearable
|
|
|
+ ></el-input>
|
|
|
</el-col>
|
|
|
- <el-col :span="6" class="oilInfo-bottom">
|
|
|
- <span class='oilInfo-item'>安装日期:</span>{{ detailsData.list.installationDate }}
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select
|
|
|
+ v-model="ecqsFilter.status"
|
|
|
+ placeholder="请选择ECQS状态"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option label="校验成功" value="success"></el-option>
|
|
|
+ <el-option label="校验失败" value="fail"></el-option>
|
|
|
+ <el-option label="待校验" value="pending"></el-option>
|
|
|
+ </el-select>
|
|
|
</el-col>
|
|
|
- <el-col :span="6" class="oilInfo-bottom">
|
|
|
- <span class='oilInfo-item'>启用日期:</span>{{ detailsData.list.startupDate }}
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button type="primary" @click="searchEcqs">搜索</el-button>
|
|
|
</el-col>
|
|
|
- <el-col :span="6" class="oilInfo-bottom">
|
|
|
- <span class='oilInfo-item'>累计在线时间:</span>{{ detailsData.list.onlineDesc }}
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button @click="resetEcqsFilter">重置</el-button>
|
|
|
</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>
|
|
|
- </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>
|
|
|
- <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>
|
|
|
- <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>
|
|
|
- <el-col :span="0.5" class="oilInfo-bottom">
|
|
|
- <div class="oilLabel-con" style="background-color: #89898b; width: 6em;">校验通过</div>
|
|
|
- </el-col>
|
|
|
- <el-col :span="0.5" class="oilInfo-bottom">
|
|
|
- <div class="oilLabel-con" style="background-color: #89898b; width: 6em;">校验失败</div>
|
|
|
- </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="urll" 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: 1.5em;margin-top: 0.3vh;margin-left: 1vh;">
|
|
|
- </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>
|
|
|
|
|
|
+ <!-- ECQS编码状态表格 -->
|
|
|
+ <el-table
|
|
|
+ :data="ecqsTableData"
|
|
|
+ border
|
|
|
+ style="width: 100%;"
|
|
|
+ v-loading="ecqsLoading"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="id"
|
|
|
+ label="加油机"
|
|
|
+ width="80"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="id"
|
|
|
+ label="油机序列号"
|
|
|
+ width="80"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="name"
|
|
|
+ label="加油枪"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="code"
|
|
|
+ label="ECQS编码"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="status"
|
|
|
+ label="编码状态"
|
|
|
+ width="120"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag
|
|
|
+ :type="scope.row.status === 'success' ? 'success' :
|
|
|
+ scope.row.status === 'fail' ? 'danger' : 'warning'"
|
|
|
+ >
|
|
|
+ {{ scope.row.status === 'success' ? '校验成功' :
|
|
|
+ scope.row.status === 'fail' ? '校验失败' : '待校验' }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="lastCheckTime"
|
|
|
+ label="最后校验时间"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="description"
|
|
|
+ label="描述"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ width="120"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ @click="viewEcqsDetails(scope.row)"
|
|
|
+ >
|
|
|
+ 详情
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-pagination
|
|
|
+ class="oilInfo-bottom"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="ecqsPagination.currentPage"
|
|
|
+ :page-sizes="[5, 10, 20, 50]"
|
|
|
+ :page-size="ecqsPagination.pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="ecqsPagination.total"
|
|
|
+ ></el-pagination>
|
|
|
+ </el-card>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 维修记录内容 -->
|
|
|
+ <template v-if="isDisplay == 4">
|
|
|
+ <el-text tag="b" style="color: #000">维修记录</el-text>
|
|
|
+ <el-card class="oilInfo-con oilInfo-bottom">
|
|
|
+ <el-table
|
|
|
+ :data="maintenanceData"
|
|
|
+ border
|
|
|
+ style="width: 100%;"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="maintainNo"
|
|
|
+ label="维修单号"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="maintainType"
|
|
|
+ label="维修类型"
|
|
|
+ width="120"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="content"
|
|
|
+ label="维修内容"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="maintainTime"
|
|
|
+ label="维修时间"
|
|
|
+ width="180"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="person"
|
|
|
+ label="维修人员"
|
|
|
+ width="120"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="status"
|
|
|
+ label="状态"
|
|
|
+ width="120"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag :type="scope.row.status === '已完成' ? 'success' : 'info'">
|
|
|
+ {{ scope.row.status }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </template>
|
|
|
+ </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"
|
|
@@ -183,114 +382,134 @@ import urll from "/@/assets/youqiang.png";
|
|
|
import uurl from "/@/assets/map/IconParkSolidCheckOne.png";
|
|
|
import urrl from "/@/assets/map/IconParkSolidCloseOne.png";
|
|
|
|
|
|
-
|
|
|
import {
|
|
|
Document,
|
|
|
Menu as IconMenu,
|
|
|
Location,
|
|
|
Setting,
|
|
|
- CaretRight,
|
|
|
CaretLeft,
|
|
|
+ CaretRight,
|
|
|
} from '@element-plus/icons-vue'
|
|
|
|
|
|
/******************************数据对象***************************************/
|
|
|
-
|
|
|
-
|
|
|
-/**
|
|
|
- * 接收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
|
|
|
- */
|
|
|
+
|
|
|
+// ECQS编码状态相关数据
|
|
|
+const ecqsFilter = reactive({
|
|
|
+ code: '',
|
|
|
+ status: ''
|
|
|
+})
|
|
|
+
|
|
|
+const ecqsPagination = reactive({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+})
|
|
|
+
|
|
|
+// 模拟ECQS表格数据
|
|
|
+const ecqsTableData = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ code: 'ECQS123456',
|
|
|
+ name: '1号枪',
|
|
|
+ status: 'success',
|
|
|
+ lastCheckTime: '2023-10-01 10:30:00',
|
|
|
+ description: 'ECQS编码校验成功'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ code: 'ECQS123457',
|
|
|
+ name: '2号枪',
|
|
|
+ status: 'fail',
|
|
|
+ lastCheckTime: '2023-10-01 11:15:00',
|
|
|
+ description: 'ECQS编码校验失败,编码格式错误'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ code: 'ECQS123458',
|
|
|
+ name: '3号枪',
|
|
|
+ status: 'pending',
|
|
|
+ lastCheckTime: '',
|
|
|
+ description: '等待ECQS编码校验'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ code: 'ECQS123459',
|
|
|
+ name: '4号枪',
|
|
|
+ status: 'success',
|
|
|
+ lastCheckTime: '2023-10-01 09:45:00',
|
|
|
+ description: 'ECQS编码校验成功'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ code: 'ECQS123460',
|
|
|
+ name: '5号枪',
|
|
|
+ status: 'fail',
|
|
|
+ lastCheckTime: '2023-10-01 14:20:00',
|
|
|
+ description: 'ECQS编码校验失败,编码已过期'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
+// 模拟维修记录数据
|
|
|
+const maintenanceData = ref([
|
|
|
+ {
|
|
|
+ maintainNo: 'MT202310001',
|
|
|
+ maintainType: '常规保养',
|
|
|
+ content: '更换密封圈,清洁过滤器',
|
|
|
+ maintainTime: '2023-10-01 09:00:00',
|
|
|
+ person: '张三',
|
|
|
+ status: '已完成'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ maintainNo: 'MT202309015',
|
|
|
+ maintainType: '故障维修',
|
|
|
+ content: '修复计量不准问题',
|
|
|
+ maintainTime: '2023-09-15 14:30:00',
|
|
|
+ person: '李四',
|
|
|
+ status: '已完成'
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
const initID = ref()
|
|
|
-const toPage = () => {
|
|
|
+const toPage = (path: string) => {
|
|
|
const id = props.id
|
|
|
- router.push({ path: `/statement/${id}/more/moreAlert` })
|
|
|
+ if (id) {
|
|
|
+ router.push({ path: `/statement/${id}/more/${path}` })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-/**
|
|
|
- * 油枪列表相关数据
|
|
|
- */
|
|
|
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 formatDate = (val: any) => {
|
|
|
+ if (!val) return ''
|
|
|
const date = new Date(val)
|
|
|
const year: number = date.getFullYear();
|
|
|
const month: string = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
@@ -300,195 +519,243 @@ const formatDate = (val) => {
|
|
|
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
|
|
|
+ if (fuelId) {
|
|
|
+ try {
|
|
|
+ const { data } = await new MoreOilEngineDetailsApi().getOilListData({ Fuelid: fuelId })
|
|
|
+ oilListData.list = data || []
|
|
|
+ listcom = [...oilListData.list]
|
|
|
+ flagData.keyData = Math.random()
|
|
|
+ } catch (error) {
|
|
|
+ console.error('初始化油枪列表失败:', error)
|
|
|
+ }
|
|
|
+ }
|
|
|
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)
|
|
|
+ if (fuelId) {
|
|
|
+ try {
|
|
|
+ const { data } = await new OilEngineDetailsApi().getAlarmHistoryDto({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ filter: { fuelId }
|
|
|
+ })
|
|
|
+ tableData.list = (data.list || []).map((item) => ({
|
|
|
+ ...item,
|
|
|
+ createdDate: item.createdDate ? formatDate(item.createdDate) : '',
|
|
|
+ status: item.status ? '已处理' : '未处理'
|
|
|
+ }))
|
|
|
+ } catch (error) {
|
|
|
+ console.error('初始化报警记录失败:', error)
|
|
|
}
|
|
|
- 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 = '备案'
|
|
|
+ if (fuelId) {
|
|
|
+ try {
|
|
|
+ const { data } = await new OilEngineDetailsApi().getBasicInfoDto({ Fuelid: fuelId })
|
|
|
+ detailsData.list = {
|
|
|
+ ...data,
|
|
|
+ createdTime: data.createdTime ? formatDate(data.createdTime) : '',
|
|
|
+ installationDate: data.installationDate ? formatDate(data.installationDate) : '',
|
|
|
+ startupDate: data.startupDate ? formatDate(data.startupDate) : '',
|
|
|
+ onlineStatus: data.onlineStatus === 'offline' ? '离线' : '在线'
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('初始化油机详情失败:', error)
|
|
|
}
|
|
|
}
|
|
|
detailsData.loading = false
|
|
|
}
|
|
|
|
|
|
+// 初始化ECQS数据
|
|
|
+const initEcqsData = () => {
|
|
|
+ ecqsPagination.total = ecqsTableData.value.length
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化所有数据
|
|
|
const init = () => {
|
|
|
initDetailsData()
|
|
|
initTableData()
|
|
|
initOilListData()
|
|
|
+ initEcqsData()
|
|
|
}
|
|
|
|
|
|
+// 页面挂载时初始化
|
|
|
onMounted(() => {
|
|
|
init()
|
|
|
})
|
|
|
|
|
|
-// 路由跳转 -- 部件信息图
|
|
|
-const toParts = ((name: any, NozzleNo: any, status: any, fuelName: any, alarming: any, code: any) => {
|
|
|
+// 油枪点击事件
|
|
|
+const toParts = (item: NozzlecontrolDtl) => {
|
|
|
+ if (!item || !item.name || !item.mainBoard_NozzleNo) {
|
|
|
+ console.warn('油枪数据不完整,无法跳转')
|
|
|
+ return
|
|
|
+ }
|
|
|
router.push({
|
|
|
path: `/statement/partInformation`,
|
|
|
query: {
|
|
|
- name: name,
|
|
|
- NozzleNo: NozzleNo,
|
|
|
- status: status,
|
|
|
- fuelName: fuelName,
|
|
|
- alarming: alarming,
|
|
|
- code: code
|
|
|
+ name: item.name,
|
|
|
+ NozzleNo: item.mainBoard_NozzleNo,
|
|
|
+ status: item.onlineStatus,
|
|
|
+ fuelName: item.fuelName,
|
|
|
+ alarming: item.alarming,
|
|
|
+ code: item.code
|
|
|
}
|
|
|
})
|
|
|
-})
|
|
|
-/**********************************初始化***********************************/
|
|
|
+}
|
|
|
|
|
|
+// 油枪在线状态筛选
|
|
|
const isOnline = (statu: string) => {
|
|
|
- if (statu == '所有') {
|
|
|
- listcom = JSON.parse(JSON.stringify(oilListData.list))
|
|
|
+ if (statu === '所有') {
|
|
|
+ listcom = [...oilListData.list]
|
|
|
} else {
|
|
|
- listcom = oilListData.list.filter((data) => {
|
|
|
- return data.onlineStatus === statu
|
|
|
- })
|
|
|
+ listcom = oilListData.list.filter(data => 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()
|
|
|
+ switch(num) {
|
|
|
+ case 2:
|
|
|
+ toPage('moreAlert')
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ // ECQS编码状态在当前页面显示,不跳转
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ toPage('maintenanceRecord')
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ // 概览页面逻辑
|
|
|
+ break
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 菜单栏的显示与隐藏
|
|
|
+// ECQS相关方法
|
|
|
+const searchEcqs = () => {
|
|
|
+ console.log('搜索ECQS编码状态', ecqsFilter)
|
|
|
+ ecqsPagination.currentPage = 1
|
|
|
+ // 实际项目中这里会根据筛选条件调用API获取数据
|
|
|
+}
|
|
|
+
|
|
|
+const resetEcqsFilter = () => {
|
|
|
+ ecqsFilter.code = ''
|
|
|
+ ecqsFilter.status = ''
|
|
|
+}
|
|
|
+
|
|
|
+const viewEcqsDetails = (row: any) => {
|
|
|
+ console.log('查看ECQS详情', row)
|
|
|
+ // 可以跳转到详情页或显示详情弹窗
|
|
|
+}
|
|
|
+
|
|
|
+const handleSizeChange = (val: number) => {
|
|
|
+ ecqsPagination.pageSize = val
|
|
|
+ // 实际项目中这里会根据新的页大小重新获取数据
|
|
|
+}
|
|
|
+
|
|
|
+const handleCurrentChange = (val: number) => {
|
|
|
+ ecqsPagination.currentPage = val
|
|
|
+ // 实际项目中这里会根据新的页码重新获取数据
|
|
|
+}
|
|
|
+
|
|
|
+// 显示/隐藏侧边栏
|
|
|
let showicon = ref(true)
|
|
|
const onShowHide = () => {
|
|
|
showicon.value = !showicon.value
|
|
|
emit('getIcon', showicon.value)
|
|
|
}
|
|
|
|
|
|
+// 监听ID变化,重新初始化数据
|
|
|
+watch(() => props.id, () => {
|
|
|
+ init()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.all-con {
|
|
|
flex: 1;
|
|
|
margin-left: 20px;
|
|
|
-
|
|
|
-
|
|
|
+ padding-right: 20px;
|
|
|
}
|
|
|
|
|
|
.oilInfo-bottom {
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
-.oilInfo-top {
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-
|
|
|
.oilInfo-con {
|
|
|
width: 100%;
|
|
|
- height: 25%;
|
|
|
+ min-height: 250px;
|
|
|
border-radius: 10px;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.oilInfo-item {
|
|
|
- color: rgb(173, 171, 171)
|
|
|
+ color: rgb(173, 171, 171);
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
|
|
|
.oilInfo-img {
|
|
|
margin-right: 20px;
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
- // 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;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.oilInfo-msg {
|
|
|
- height: 200px;
|
|
|
+ height: 280px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
|
|
|
.oilInfo-item-two {
|
|
|
- color: rgb(173, 171, 171)
|
|
|
+ color: rgb(173, 171, 171);
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 小圆点
|
|
|
.status-point {
|
|
|
display: inline-block;
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
border-radius: 50%;
|
|
|
- margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.oilInfo-con-first {
|
|
|
- left: 7em;
|
|
|
- top: 0.5em;
|
|
|
+ position: relative;
|
|
|
+ top: 0.3em;
|
|
|
+}
|
|
|
+
|
|
|
+.to-flex {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
</style>
|