|
|
@@ -24,6 +24,7 @@
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="设备状态">
|
|
|
<el-select v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态">
|
|
|
+ <el-option label="所有" :value="''"></el-option>
|
|
|
<el-option v-for="(value, key) in FuelDispenserEnum" :key="key" :label="value" :value="key" />
|
|
|
</el-select>
|
|
|
<!-- <el-input v-model="oilEngineData.filterModel.deviceStatus" placeholder="请输入设备状态" clearable></el-input> -->
|
|
|
@@ -32,6 +33,7 @@
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="在线状态">
|
|
|
<el-select v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态">
|
|
|
+ <el-option label="所有" :value="''"></el-option>
|
|
|
<el-option v-for="(value, key) in OnlineStatus" :key="key" :label="value" :value="key" />
|
|
|
</el-select>
|
|
|
<!-- <el-input v-model="oilEngineData.filterModel.onlineStatus" placeholder="请输入在线状态" clearable></el-input> -->
|
|
|
@@ -39,20 +41,19 @@
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="序列号">
|
|
|
- <el-input placeholder="请输入序列号" clearable></el-input>
|
|
|
+ <el-input v-model="oilEngineData.filterModel.serialNumber" placeholder="请输入序列号" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="安装时间">
|
|
|
<el-date-picker
|
|
|
- v-model="value1"
|
|
|
- format="YYYY-MM-DD"
|
|
|
+ v-model="oilEngineData.filterModel.createTimeRange"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
type="daterange"
|
|
|
+ range-separator="To"
|
|
|
start-placeholder="开始时间"
|
|
|
end-placeholder="结束时间"
|
|
|
:clearable="false"
|
|
|
- :shortcuts="shortcuts"
|
|
|
- @change="change"
|
|
|
></el-date-picker>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -68,6 +69,7 @@
|
|
|
<el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
<el-button type="primary" icon="ele-RefreshRight" @click="onReset"> 重置 </el-button>
|
|
|
</el-row>
|
|
|
+ <el-button type="primary" icon="ele-Document" @click="exportDataToExcel"> 导出 </el-button>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
@@ -75,7 +77,7 @@
|
|
|
<el-col :xs="24">
|
|
|
<el-card class="my-fill mt8" shadow="hover">
|
|
|
<el-table v-loading="oilEngineData.loading" stripe :data="oilEngineData.tableModel" row-key="id"
|
|
|
- style="width: 100%">
|
|
|
+ style="width: 100%" id="myTable" ref="myTable">
|
|
|
<el-table-column prop="name" label="油机号" />
|
|
|
<el-table-column prop="oilCompany" label="石油公司" />
|
|
|
<el-table-column prop="gasStation" label="加油站" />
|
|
|
@@ -89,14 +91,19 @@
|
|
|
<el-table-column prop="deviceStatus" label="设备状态">
|
|
|
<template #default="{ row }">
|
|
|
<div :style="{ color: getColor(getOilEngineStatus(row.deviceStatus)) }" class="bold-font">
|
|
|
- {{ getOilEngineStatus(row.deviceStatus) }}
|
|
|
+ <StatusBox :status="getOilEngineStatus(row.deviceStatus)" />
|
|
|
+
|
|
|
+ <!-- {{ getOilEngineStatus(row.deviceStatus) }} -->
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="onlineStatus" label="在线状态">
|
|
|
<template #default="{ row }">
|
|
|
<div :style="{ color: getColor(getOilEngineStatus(row.onlineStatus)) }" class="bold-font">
|
|
|
- {{ getOilEngineStatus(row.onlineStatus) }}
|
|
|
+ <StatusBox :status="getOilEngineStatus(row.onlineStatus)" />
|
|
|
+
|
|
|
+
|
|
|
+ <!-- {{ getOilEngineStatus(row.onlineStatus) }} -->
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -122,12 +129,16 @@
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
-import { onBeforeMount, onMounted, reactive, ref } from "vue";
|
|
|
+import { onBeforeMount, onMounted, reactive, ref, watch } from "vue";
|
|
|
import { ListOfOilEnginesApi } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesApi";
|
|
|
import { FuelDispenserDto_SearchFilter, PageInputFuelDispenserDto, FuelDispenserDto } from "/@/api/admin/reportManagement/listOfOilEngines/listOfOilEnginesDto";
|
|
|
import eventBus from "/@/utils/mitt";
|
|
|
import { useGlobalCacheStore } from "/@/stores/globalCacheStore";
|
|
|
import router from "/@/router";
|
|
|
+import StatusBox from "../../../../components/StatusBox.vue";
|
|
|
+import { BoardListApi } from '/@/api/admin/PCBA/boardListApi';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+
|
|
|
|
|
|
/**获取全局缓存*/
|
|
|
const globalCacheStore = useGlobalCacheStore()
|
|
|
@@ -136,25 +147,35 @@ const globalCacheStore = useGlobalCacheStore()
|
|
|
/**油机列表 - 列表设备状态、在线状态 */
|
|
|
const oilEngineStatus = ref(globalCacheStore.getGlobalStore().get('oilEngineStatus'))
|
|
|
|
|
|
-// 安装日期假数据
|
|
|
-const value1 = ref('')
|
|
|
+
|
|
|
|
|
|
/**
|
|
|
* 油机列表数据对象
|
|
|
*/
|
|
|
const oilEngineData = reactive({
|
|
|
+ time:'',
|
|
|
loading: false,
|
|
|
filterModel: {
|
|
|
/**油机号*/
|
|
|
name: "",
|
|
|
+ oilCompany:"",
|
|
|
/**加油站*/
|
|
|
gasStation: "",
|
|
|
+ createTimeRange: [], // 新增属性,用于存储时间范围
|
|
|
/**加油机机型*/
|
|
|
model: "",
|
|
|
/**设备状态*/
|
|
|
deviceStatus: "",
|
|
|
/**在线状态*/
|
|
|
onlineStatus: "",
|
|
|
+ /**序列号*/
|
|
|
+ serialNumber: "",
|
|
|
+ /**开始时间*/
|
|
|
+ startDate: null,
|
|
|
+ /**结束时间*/
|
|
|
+ endDate:null,
|
|
|
+ installationDate:"",
|
|
|
+ startupDate:"",
|
|
|
} as FuelDispenserDto_SearchFilter,
|
|
|
total: 0,
|
|
|
pageInput: {
|
|
|
@@ -193,6 +214,11 @@ const flattenObject = (obj, parentKey = '') => {
|
|
|
return result;
|
|
|
}
|
|
|
|
|
|
+/** 导出 */
|
|
|
+const exportDataToExcel = async () => {
|
|
|
+ const res: any = await new ListOfOilEnginesApi().onExportExcel({ ...oilEngineData.pageInput, filter: oilEngineData.filterModel })
|
|
|
+}
|
|
|
+
|
|
|
/**重置 */
|
|
|
const onReset = () => {
|
|
|
resetQuery()
|
|
|
@@ -214,6 +240,23 @@ const onCurrentChange = () => {
|
|
|
const toPage = (row) => {
|
|
|
router.push({ path: `/statement/${row.fuelId}` })
|
|
|
}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 监听时间变换
|
|
|
+ */
|
|
|
+ watch(
|
|
|
+ () => oilEngineData.filterModel.createTimeRange,
|
|
|
+ (newVal) => {
|
|
|
+ if (newVal && newVal.length === 2) {
|
|
|
+ oilEngineData.filterModel.startDate = newVal[0]; // yyyy-MM-dd 格式
|
|
|
+ oilEngineData.filterModel.endDate = newVal[1];
|
|
|
+ } else {
|
|
|
+ oilEngineData.filterModel.startDate = null;
|
|
|
+ oilEngineData.filterModel.endDate = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
// /**油机列表 - 列表状态 */
|
|
|
// const getOilEngineStatusType = (val) => {
|
|
|
// val = String(val)
|
|
|
@@ -248,6 +291,11 @@ const resetQuery = () => {
|
|
|
oilEngineData.filterModel.model = ''
|
|
|
oilEngineData.filterModel.deviceStatus = ''
|
|
|
oilEngineData.filterModel.onlineStatus = ''
|
|
|
+ oilEngineData.filterModel.installationDate = ''
|
|
|
+ oilEngineData.filterModel.serialNumber = ''
|
|
|
+ oilEngineData.filterModel.createTimeRange = null
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
//设置不同设备状态、在线状态字体颜色
|
|
|
@@ -284,6 +332,8 @@ onBeforeMount(() => {
|
|
|
eventBus.off('refreshView')
|
|
|
})
|
|
|
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|