mirror of
https://gitee.com/pnoker/iot-dc3.git
synced 2026-09-24 15:13:04 +08:00
feat(driver): expand driver detail page with richer info and list refinements
This commit is contained in:
pnoker
@@ -19,7 +19,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="profileLoading" :footer="true"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listProfileData.length<1" description="暂无包含的模板数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listProfileData.length<1" description="暂无包含的模板数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listProfileData">
|
||||
<profile-card
|
||||
:data="data"
|
||||
@@ -34,7 +36,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="pointLoading" :footer="true"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
|
||||
<point-card
|
||||
:data="data"
|
||||
@@ -52,7 +56,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="pointValueLoading" :footer="true"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listPointValueData.length<1" description="暂无设备位号数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listPointValueData.length<1" description="暂无设备位号数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-if="data" v-for="data in listPointValueData">
|
||||
<point-value-card
|
||||
v-if="data"
|
||||
|
||||
@@ -19,7 +19,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="loading"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无设备数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无设备数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
|
||||
<device-card
|
||||
:data="data"
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<p class="nowrap-description">{{data.description?data.description:'无描述信息'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="things-card__footer">
|
||||
<div v-if="!footer" class="things-card__footer">
|
||||
<div class="things-card-footer-operation">
|
||||
<el-popconfirm title="是否确定停用该驱动？" placement="top" icon="el-icon-remove-outline">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference" disabled>停用</el-button>
|
||||
@@ -77,6 +77,12 @@
|
||||
icon: {
|
||||
type: String,
|
||||
default: 'images/common/driver.png'
|
||||
},
|
||||
footer: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -1,69 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<base-card>
|
||||
<el-tabs v-model="active" @tab-click="changeActive">
|
||||
<el-tab-pane label="驱动详情" name="detail">
|
||||
<detail-card>
|
||||
<ul>
|
||||
<li><i class="el-icon-data-line"></i> 驱动名称: {{data.name}}</li>
|
||||
<li><i class="el-icon-collection-tag"></i> 关联设备 [{{listDeviceData.length||0}} 个]: {{deviceName()}}</li>
|
||||
<li><i class="el-icon-edit-outline"></i> 修改日期: {{timestamp(data.createTime)}}</li>
|
||||
<li><i class="el-icon-sunset"></i> 创建日期: {{timestamp(data.updateTime)}}</li>
|
||||
</ul>
|
||||
</detail-card>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="关联设备" name="device">
|
||||
<el-row>
|
||||
<driver-tool
|
||||
:page="page"
|
||||
@search="search"
|
||||
@reset="reset"
|
||||
@refresh="refresh"
|
||||
@sort="sort"
|
||||
@size-change="sizeChange"
|
||||
@current-change="currentChange"
|
||||
></driver-tool>
|
||||
</el-row>
|
||||
<el-row :gutter="3">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
|
||||
<blank-card>
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
|
||||
<el-col :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="driverLoading"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
|
||||
<device-card
|
||||
<el-col>
|
||||
<el-empty v-if="listDriverData.length<1" description="暂无驱动数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :key="data.id" v-for="data in listDriverData">
|
||||
<driver-card
|
||||
:data="data"
|
||||
:driverTable="driverTable"
|
||||
:profileTable="profileTable"
|
||||
:statusTable="statusTable"
|
||||
:embedded="true"
|
||||
></device-card>
|
||||
:statusTable="driverStatusTable"
|
||||
:footer="true"
|
||||
></driver-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="驱动模型" name="model">
|
||||
<el-empty description="暂无驱动模型数据！"></el-empty>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="驱动事件" name="event">
|
||||
<el-empty description="暂无驱动事件数据！"></el-empty>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</base-card>
|
||||
</blank-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="16" :lg="18" :xl="20">
|
||||
<base-card>
|
||||
<el-tabs v-model="active" @tab-click="changeActive">
|
||||
<el-tab-pane label="驱动详情" name="detail">
|
||||
<detail-card>
|
||||
<ul>
|
||||
<li><i class="el-icon-data-line"></i> 驱动名称: {{data.name}}</li>
|
||||
<li><i class="el-icon-collection-tag"></i> 关联设备 [{{listDeviceData.length||0}} 个]: {{deviceName()}}</li>
|
||||
<li><i class="el-icon-edit-outline"></i> 修改日期: {{timestamp(data.createTime)}}</li>
|
||||
<li><i class="el-icon-sunset"></i> 创建日期: {{timestamp(data.updateTime)}}</li>
|
||||
</ul>
|
||||
</detail-card>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="关联设备" name="device">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listDeviceData">
|
||||
<device-card
|
||||
:data="data"
|
||||
:driverTable="driverTable"
|
||||
:profileTable="profileTable"
|
||||
:statusTable="deviceStatusTable"
|
||||
:embedded="true"
|
||||
></device-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="驱动模型" name="model">
|
||||
<el-empty description="暂无驱动模型数据！"></el-empty>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="驱动事件" name="event">
|
||||
<el-empty description="暂无驱动事件数据！"></el-empty>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</base-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import blankCard from '@/components/card/blank-card';
|
||||
import baseCard from '@/components/card/base-card';
|
||||
import detailCard from '@/components/card/detail-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import driverTool from './DriverTool';
|
||||
import deviceList from '../device/DeviceList';
|
||||
import driverCard from './DriverCard';
|
||||
import deviceCard from '../device/DeviceCard';
|
||||
import pointCard from '../point/PointCard';
|
||||
import {dateFormat, setCopyContent} from "@/util/util";
|
||||
import {deviceByDriverId, deviceStatusByDriverId} from "@/api/device";
|
||||
import {driverDictionary, profileDictionary} from "@/api/dictionary";
|
||||
import {driverById} from "@/api/driver";
|
||||
import DriverList from "@/views/driver/DriverList";
|
||||
import {driverById, driverList, driverStatus} from "@/api/driver";
|
||||
|
||||
export default {
|
||||
components: {DriverList, baseCard, detailCard, skeletonCard, deviceList, deviceCard, pointCard},
|
||||
components: {blankCard, baseCard, detailCard, skeletonCard, driverTool, deviceList, driverCard, deviceCard, pointCard},
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.query.id,
|
||||
active: this.$route.query.active,
|
||||
driverLoading: true,
|
||||
deviceLoading: true,
|
||||
driverTable: {},
|
||||
profileTable: {},
|
||||
statusTable: {},
|
||||
driverStatusTable: {},
|
||||
deviceStatusTable: {},
|
||||
data: {},
|
||||
listDeviceData: []
|
||||
listDriverData: [],
|
||||
listDeviceData: [],
|
||||
query: {
|
||||
type: 'driver'
|
||||
},
|
||||
order: false,
|
||||
page: {
|
||||
total: 0,
|
||||
size: 12,
|
||||
current: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -71,6 +121,7 @@
|
||||
this.device();
|
||||
this.drivers();
|
||||
this.profiles();
|
||||
this.list();
|
||||
},
|
||||
methods: {
|
||||
driver() {
|
||||
@@ -88,7 +139,7 @@
|
||||
});
|
||||
|
||||
deviceStatusByDriverId(this.id).then(res => {
|
||||
this.statusTable = res.data;
|
||||
this.deviceStatusTable = res.data;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
@@ -110,6 +161,55 @@
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
list() {
|
||||
driverList({
|
||||
page: this.page,
|
||||
...this.query
|
||||
}).then(res => {
|
||||
const data = res.data;
|
||||
this.page.total = data.total;
|
||||
this.listDriverData = data.records;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.driverLoading = false;
|
||||
});
|
||||
|
||||
driverStatus({
|
||||
page: this.page,
|
||||
...this.query
|
||||
}).then(res => {
|
||||
this.driverStatusTable = res.data;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
search(params) {
|
||||
this.query = {...params, type: 'driver'};
|
||||
this.list();
|
||||
},
|
||||
reset() {
|
||||
this.query = {type: 'driver'};
|
||||
this.list();
|
||||
},
|
||||
refresh() {
|
||||
this.list();
|
||||
},
|
||||
sort() {
|
||||
this.order = !this.order;
|
||||
if (this.order) {
|
||||
this.page.orders = [{column: 'create_time', asc: true}];
|
||||
} else {
|
||||
this.page.orders = [{column: 'create_time', asc: false}];
|
||||
}
|
||||
this.list();
|
||||
},
|
||||
sizeChange(size) {
|
||||
this.page.size = size;
|
||||
this.list();
|
||||
},
|
||||
currentChange(current) {
|
||||
this.page.current = current;
|
||||
this.list();
|
||||
},
|
||||
deviceName() {
|
||||
return this.listDeviceData.map(device => device.name).join(", ");
|
||||
},
|
||||
|
||||
@@ -17,7 +17,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="loading"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无驱动数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无驱动数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
|
||||
<driver-card
|
||||
:data="data"
|
||||
|
||||
@@ -52,7 +52,9 @@
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="tool-card-content-operation">
|
||||
<el-button type="success" size="small" icon="el-icon-plus" disabled>新增</el-button>
|
||||
<div>
|
||||
<el-button v-if="add" type="success" size="small" icon="el-icon-plus">新增</el-button>
|
||||
</div>
|
||||
<div class="tool-card-content-operation-page">
|
||||
<el-pagination background layout="total, prev, pager, next, sizes"
|
||||
:page-sizes="[12, 24, 36, 48]"
|
||||
@@ -83,6 +85,12 @@
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
add: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="loading"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无位号数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无位号数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listData">
|
||||
<point-card
|
||||
:data="data"
|
||||
|
||||
@@ -18,7 +18,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="loading"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无数据，请选择设备和位号！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无数据，请选择设备和位号！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
|
||||
<point-value-card
|
||||
:data="data"
|
||||
|
||||
@@ -18,7 +18,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="pointLoading" :footer="true"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listPointData.length<1" description="暂无包含的位号数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
|
||||
<point-card
|
||||
:data="data"
|
||||
@@ -33,7 +35,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="deviceLoading" :footer="true"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listDeviceData.length<1" description="暂无关联的设备数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
|
||||
<device-card
|
||||
:data="data"
|
||||
|
||||
@@ -18,7 +18,9 @@
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in 12">
|
||||
<skeleton-card :loading="loading"></skeleton-card>
|
||||
</el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无模板数据！"></el-empty>
|
||||
<el-col>
|
||||
<el-empty v-if="listData.length<1" description="暂无模板数据！"></el-empty>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
|
||||
<profile-card
|
||||
:data="data"
|
||||
|
||||
Reference in New Issue
Block a user