mirror of
https://gitee.com/pnoker/iot-dc3.git
synced 2026-09-24 15:13:04 +08:00
feat(ui): add skeleton-card component and integrate loading skeletons across list views
This commit is contained in:
pnoker
+12
-13
@@ -9,36 +9,35 @@
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"axios": "^0.24.0",
|
||||
"clipboard": "^2.0.8",
|
||||
"core-js": "^3.15.1",
|
||||
"echarts": "^5.1.2",
|
||||
"core-js": "^3.20.2",
|
||||
"echarts": "^5.2.2",
|
||||
"element-ui": "^2.15.2",
|
||||
"highlight.js": "^11.2.0",
|
||||
"insert-css": "^2.0.0",
|
||||
"js-base64": "^3.6.1",
|
||||
"highlight.js": "^11.4.0",
|
||||
"js-base64": "^3.7.2",
|
||||
"js-cookie": "latest",
|
||||
"js-md5": "^0.7.3",
|
||||
"nprogress": "latest",
|
||||
"vue": "^2.6.14",
|
||||
"vue-axios": "^3.2.4",
|
||||
"vue-axios": "^3.4.0",
|
||||
"vue-baidu-map": "^0.21.22",
|
||||
"vue-gemini-scrollbar": "^2.0.1",
|
||||
"vue-highlightjs": "^1.3.3",
|
||||
"vue-router": "^3.5.2",
|
||||
"vue-router": "^3.5.3",
|
||||
"vue-sparklines": "^0.2.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.5.13",
|
||||
"@vue/cli-plugin-router": "^4.5.13",
|
||||
"@vue/cli-plugin-vuex": "^4.5.13",
|
||||
"@vue/cli-service": "^4.5.13",
|
||||
"@vue/cli-plugin-babel": "~4.5.15",
|
||||
"@vue/cli-plugin-router": "~4.5.15",
|
||||
"@vue/cli-plugin-vuex": "~4.5.15",
|
||||
"@vue/cli-service": "~4.5.15",
|
||||
"node-sass": "^4.14.1 ",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-cli-plugin-element": "^1.0.1",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"webpack": "^4.36.0"
|
||||
"webpack": "^5.0.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<el-skeleton :loading="loading" animated>
|
||||
<template slot="template">
|
||||
<div class="things-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="things-card-content">
|
||||
<div v-if="!header" class="things-card__header">
|
||||
<el-skeleton-item class="things-card-header-icon skeleton" variant="image"/>
|
||||
<el-skeleton-item class="things-card-header-name skeleton" variant="text"/>
|
||||
</div>
|
||||
<div class="things-card__body">
|
||||
<div class="things-card-body-content" v-bind:class="{'left':header,'center':!header}">
|
||||
<ul>
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
<div v-if="header">
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
<el-skeleton-item class="nowrap-item skeleton" variant="text"/>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="!header" class="things-card-body-content">
|
||||
<el-skeleton-item class="nowrap-description skeleton" variant="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!footer" class="things-card__footer">
|
||||
<div class="things-card-footer-operation">
|
||||
<el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
|
||||
<el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
|
||||
<el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
|
||||
<el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
|
||||
<el-skeleton-item class="operation-tooltip skeleton" variant="button"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "skeleton-card",
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
header: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
footer: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~@/components/card/styles/things-card.scss";
|
||||
|
||||
.things-card-header-icon.skeleton {
|
||||
width: 55px !important;
|
||||
}
|
||||
|
||||
.things-card-header-name.skeleton {
|
||||
margin-top: 10px;
|
||||
height: 28px !important;
|
||||
}
|
||||
|
||||
.nowrap-item.skeleton {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.nowrap-description.skeleton {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.things-card-body-content.center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.things-card-body-content.left {
|
||||
margin-left: 30px;
|
||||
justify-content: left !important;
|
||||
}
|
||||
|
||||
.operation-tooltip.skeleton {
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -210,3 +210,8 @@
|
||||
.header-disable {
|
||||
border-bottom: 1px solid #fbc4c4;
|
||||
}
|
||||
|
||||
.el-popover.el-popper {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
<el-popconfirm title="是否确定启用该设备？" placement="top" icon="el-icon-remove-outline">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference" :disabled="data.enable">启用</el-button>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm title="是否确定删除该设备？" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
|
||||
<el-popconfirm title="是否确定删除该设备？该设备下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
<el-button type="text" @click="edit(data.id, data.driverId)">编辑</el-button>
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="包含模板" name="profile">
|
||||
<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="profileLoading" :footer="true"></skeleton-card>
|
||||
</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"
|
||||
@@ -27,6 +30,9 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="包含位号" name="point">
|
||||
<el-row>
|
||||
<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-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
|
||||
<point-card
|
||||
:data="data"
|
||||
@@ -35,9 +41,15 @@
|
||||
></point-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备模型" name="deviceCModel">
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备数据" name="pointValue">
|
||||
<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="pointValueLoading" :footer="true"></skeleton-card>
|
||||
</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"
|
||||
@@ -51,6 +63,9 @@
|
||||
></point-value-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备指令" name="deviceCommand">
|
||||
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="设备事件" name="deviceEvent">
|
||||
<el-timeline>
|
||||
@@ -93,6 +108,7 @@
|
||||
<script>
|
||||
import baseCard from '@/components/card/base-card';
|
||||
import detailCard from '@/components/card/detail-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import deviceCard from './DeviceCard';
|
||||
import profileCard from '../profile/ProfileCard';
|
||||
import pointCard from '../point/PointCard';
|
||||
@@ -106,7 +122,7 @@
|
||||
import {pointByDeviceId, pointValueByDeviceId} from "@/api/point";
|
||||
|
||||
export default {
|
||||
components: {baseCard, detailCard, deviceCard, profileCard, pointCard, pointValueCard, pointValueEditForm, pointValueDetail},
|
||||
components: {baseCard, detailCard, skeletonCard, deviceCard, profileCard, pointCard, pointValueCard, pointValueEditForm, pointValueDetail},
|
||||
props: {
|
||||
name: String
|
||||
},
|
||||
@@ -114,6 +130,9 @@
|
||||
return {
|
||||
id: this.$route.query.id,
|
||||
active: this.$route.query.active,
|
||||
profileLoading: true,
|
||||
pointLoading: true,
|
||||
pointValueLoading: true,
|
||||
data: {
|
||||
profileIds: []
|
||||
},
|
||||
@@ -148,16 +167,23 @@
|
||||
deviceById(this.id).then(res => {
|
||||
this.data = res.data;
|
||||
this.deviceTable[this.data.id] = this.data.name;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
profiles() {
|
||||
profileByDeviceId(this.id).then(res => {
|
||||
this.listProfileData = res.data;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.profileLoading = false;
|
||||
});
|
||||
},
|
||||
points() {
|
||||
pointByDeviceId(this.id).then(res => {
|
||||
this.listPointData = res.data;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.pointLoading = false;
|
||||
});
|
||||
},
|
||||
pointValues() {
|
||||
@@ -173,6 +199,9 @@
|
||||
this.listPointValueHistoryData[pointValue.pointId] = pointValue.children.reverse().map(pointValue => pointValue.value);
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.pointValueLoading = false;
|
||||
});
|
||||
},
|
||||
status() {
|
||||
|
||||
@@ -170,6 +170,9 @@
|
||||
</div>
|
||||
<div class="content-edit-point">
|
||||
<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="loading" :footer="true"></skeleton-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-if="data" v-for="data in pointInfoData">
|
||||
<point-info-card
|
||||
:data="data"
|
||||
@@ -185,6 +188,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import {driverDictionary, profileDictionary} from "@/api/dictionary";
|
||||
import {deviceById, deviceUpdate} from "@/api/device";
|
||||
import {driverAttributeByDriverId, pointAttributeByDriverId} from "@/api/attribute";
|
||||
@@ -193,12 +197,13 @@
|
||||
import pointInfoCard from "../point/info/PointInfoCard"
|
||||
|
||||
export default {
|
||||
components: {pointInfoCard},
|
||||
components: {skeletonCard, pointInfoCard},
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.query.id,
|
||||
driverId: this.$route.query.driverId,
|
||||
active: +this.$route.query.active,
|
||||
loading: true,
|
||||
driverDictionary: [],
|
||||
profileDictionary: [],
|
||||
driverTable: {},
|
||||
@@ -285,6 +290,7 @@
|
||||
this.changeDriver(this.driverId);
|
||||
this.changePoint();
|
||||
this.oldDeviceFormData = {...res.data};
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
driver() {
|
||||
@@ -336,9 +342,12 @@
|
||||
});
|
||||
return pointInfo;
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
profileName(profileId) {
|
||||
@@ -375,6 +384,7 @@
|
||||
this.oldDriverFormData = JSON.parse(JSON.stringify(formData));
|
||||
}).catch(() => {
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
changePoint() {
|
||||
@@ -397,7 +407,9 @@
|
||||
return pointInfo;
|
||||
});
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
changePointInfo(row) {
|
||||
@@ -425,6 +437,7 @@
|
||||
this.changeDriver(this.driverId);
|
||||
this.changePoint(this.id);
|
||||
this.oldDeviceFormData = {...res.data};
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -441,7 +454,15 @@
|
||||
value: this.driverFormData[attribute.name].value
|
||||
};
|
||||
|
||||
driverInfo.id ? driverInfoUpdate(driverInfo).then(res => loadFormData(formData, res, this)) : driverInfoAdd(driverInfo).then(res => loadFormData(formData, res, this));
|
||||
driverInfo.id ?
|
||||
driverInfoUpdate(driverInfo)
|
||||
.then(res => loadFormData(formData, res, this))
|
||||
.catch(() => {
|
||||
}) :
|
||||
driverInfoAdd(driverInfo)
|
||||
.then(res => loadFormData(formData, res, this))
|
||||
.catch(() => {
|
||||
});
|
||||
|
||||
function loadFormData(formData, res, that) {
|
||||
formData[attribute.name] = {
|
||||
@@ -466,7 +487,15 @@
|
||||
value: this.pointFormData[attribute.name].value
|
||||
};
|
||||
|
||||
pointInfo.id ? pointInfoUpdate(pointInfo).then(res => loadTableData(res, attribute, this)) : pointInfoAdd(pointInfo).then(res => loadTableData(res, attribute, this));
|
||||
pointInfo.id ?
|
||||
pointInfoUpdate(pointInfo)
|
||||
.then(res => loadTableData(res, attribute, this))
|
||||
.catch(() => {
|
||||
}) :
|
||||
pointInfoAdd(pointInfo)
|
||||
.then(res => loadTableData(res, attribute, this))
|
||||
.catch(() => {
|
||||
});
|
||||
|
||||
function loadTableData(res, attribute, that) {
|
||||
that.pointInfoData = that.pointInfoData.map(tableData => {
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
|
||||
<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="loading"></skeleton-card>
|
||||
</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"
|
||||
@@ -38,6 +41,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import blankCard from '@/components/card/blank-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import deviceTool from './DeviceTool'
|
||||
import deviceAddForm from './DeviceAddForm'
|
||||
import deviceCard from './DeviceCard'
|
||||
@@ -45,9 +49,10 @@
|
||||
import {driverDictionary, profileDictionary} from "@/api/dictionary";
|
||||
|
||||
export default {
|
||||
components: {blankCard, deviceTool, deviceAddForm, deviceCard},
|
||||
components: {blankCard, skeletonCard, deviceTool, deviceAddForm, deviceCard},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
driverDictionary: [],
|
||||
profileDictionary: [],
|
||||
driverTable: {},
|
||||
@@ -78,6 +83,8 @@
|
||||
this.page.total = data.total;
|
||||
this.listData = data.records;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
deviceStatus({
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="关联设备" name="device">
|
||||
<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>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
|
||||
<device-card
|
||||
:data="data"
|
||||
@@ -25,6 +28,10 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="驱动模型" name="model">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="驱动事件" name="event">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</base-card>
|
||||
</div>
|
||||
@@ -32,6 +39,7 @@
|
||||
<script>
|
||||
import baseCard from '@/components/card/base-card';
|
||||
import detailCard from '@/components/card/detail-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import deviceCard from '../device/DeviceCard';
|
||||
import pointCard from '../point/PointCard';
|
||||
import {dateFormat, setCopyContent} from "@/util/util";
|
||||
@@ -40,11 +48,12 @@
|
||||
import {driverById} from "@/api/driver";
|
||||
|
||||
export default {
|
||||
components: {baseCard, detailCard, deviceCard, pointCard},
|
||||
components: {baseCard, detailCard, skeletonCard, deviceCard, pointCard},
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.query.id,
|
||||
active: this.$route.query.active,
|
||||
deviceLoading: true,
|
||||
driverTable: {},
|
||||
profileTable: {},
|
||||
statusTable: {},
|
||||
@@ -62,12 +71,15 @@
|
||||
driver() {
|
||||
driverById(this.id).then(res => {
|
||||
this.data = res.data;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
device() {
|
||||
deviceByDriverId(this.id).then(res => {
|
||||
this.listDeviceData = res.data;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.deviceLoading = false;
|
||||
});
|
||||
|
||||
deviceStatusByDriverId(this.id).then(res => {
|
||||
|
||||
@@ -14,6 +14,9 @@
|
||||
|
||||
<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="loading"></skeleton-card>
|
||||
</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"
|
||||
@@ -26,14 +29,16 @@
|
||||
</template>
|
||||
<script>
|
||||
import blankCard from '@/components/card/blank-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import driverTool from './DriverTool'
|
||||
import driverCard from './DriverCard'
|
||||
import {driverList, driverStatus} from "@/api/driver";
|
||||
|
||||
export default {
|
||||
components: {blankCard, driverTool, driverCard},
|
||||
components: {blankCard, skeletonCard, driverTool, driverCard},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
statusTable: {},
|
||||
listData: [],
|
||||
query: {
|
||||
@@ -60,6 +65,8 @@
|
||||
this.page.total = data.total;
|
||||
this.listData = data.records;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
driverStatus({
|
||||
|
||||
@@ -62,6 +62,7 @@
|
||||
driver() {
|
||||
driverById(this.id).then(res => {
|
||||
this.data = res.data;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
device() {
|
||||
|
||||
@@ -13,6 +13,9 @@
|
||||
</el-row>
|
||||
|
||||
<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="loading"></skeleton-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listData">
|
||||
<gateway-card
|
||||
:data="data"
|
||||
@@ -23,14 +26,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import gatewayTool from './GatewayTool'
|
||||
import gatewayCard from './GatewayCard'
|
||||
import {driverList, driverStatus} from "@/api/driver";
|
||||
|
||||
export default {
|
||||
components: {gatewayTool, gatewayCard},
|
||||
components: {skeletonCard, gatewayTool, gatewayCard},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
statusTable: {},
|
||||
listData: [],
|
||||
query: {
|
||||
@@ -57,6 +62,8 @@
|
||||
this.page.total = data.total;
|
||||
this.listData = data.records;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
driverStatus({
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<div>
|
||||
<title-card class="home-app" title="导航">
|
||||
<div class="app-item">
|
||||
<application-card v-for="i in 12" :name="'应用 '+i"></application-card>
|
||||
<application-card :key="i" v-for="i in 12" :name="'应用 '+i"></application-card>
|
||||
</div>
|
||||
</title-card>
|
||||
<title-card class="home-dashboard" title="看板">
|
||||
<div class="dashboard-item">
|
||||
<dashboard-card v-for="i in 6" :name="'数据看板 '+i"></dashboard-card>
|
||||
<dashboard-card :key="i" v-for="i in 6" :name="'数据看板 '+i"></dashboard-card>
|
||||
</div>
|
||||
</title-card>
|
||||
<title-card class="home-count" title="统计">
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<el-popconfirm title="是否确定启用该位号？" placement="top" icon="el-icon-remove-outline">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference" :disabled="data.enable">启用</el-button>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm title="是否确定删除该位号？" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
|
||||
<el-popconfirm title="是否确定删除该位号？该位号下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
<el-button type="text" @click="edit(data.id)">编辑</el-button>
|
||||
|
||||
@@ -62,6 +62,7 @@
|
||||
driver() {
|
||||
driverById(this.id).then(res => {
|
||||
this.data = res.data;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
device() {
|
||||
|
||||
@@ -195,6 +195,7 @@
|
||||
pointById(id).then(res => {
|
||||
this.pointFormData = res.data;
|
||||
this.oldPointFormData = {...res.data};
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
pointUpdate() {
|
||||
@@ -202,6 +203,7 @@
|
||||
if (valid) {
|
||||
pointUpdate(this.pointFormData).then(res => {
|
||||
this.oldPointFormData = {...res.data};
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -18,6 +18,9 @@
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<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-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listData">
|
||||
<point-card
|
||||
:data="data"
|
||||
@@ -35,6 +38,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import pointTool from './PointTool'
|
||||
import pointAddForm from './PointAddForm'
|
||||
import pointCard from './PointCard'
|
||||
@@ -62,9 +66,10 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {pointTool, pointAddForm, pointCard},
|
||||
components: {skeletonCard, pointTool, pointAddForm, pointCard},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
profileDictionary: [],
|
||||
profileTable: {},
|
||||
listData: [],
|
||||
@@ -92,6 +97,8 @@
|
||||
this.page.total = data.total;
|
||||
this.listData = data.records;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
profile() {
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</div>
|
||||
<div v-if="!embedded" class="things-card__footer">
|
||||
<div class="things-card-footer-operation">
|
||||
<el-popconfirm title="是否确定删除该数据？" placement="top" icon="el-icon-remove-outline">
|
||||
<el-popconfirm title="是否确定删除该数据？该数据下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-remove-outline">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
<el-button type="text">编辑</el-button>
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
|
||||
<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="loading"></skeleton-card>
|
||||
</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"
|
||||
@@ -30,15 +33,17 @@
|
||||
|
||||
<script>
|
||||
import blankCard from '@/components/card/blank-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import pointValueTool from './PointValueTool';
|
||||
import pointValueCard from './PointValueCard';
|
||||
import {pointUnit, pointValueList} from "@/api/point";
|
||||
import {deviceDictionary, pointDictionary} from "@/api/dictionary";
|
||||
|
||||
export default {
|
||||
components: {blankCard, pointValueTool, pointValueCard},
|
||||
components: {blankCard, skeletonCard, pointValueTool, pointValueCard},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
deviceDictionary: [],
|
||||
pointDictionary: [],
|
||||
deviceTable: {},
|
||||
@@ -80,6 +85,8 @@
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
device() {
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<el-popconfirm title="是否确定启用该模板？" placement="top" icon="el-icon-remove-outline">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference" :disabled="data.enable">启用</el-button>
|
||||
</el-popconfirm>
|
||||
<el-popconfirm title="是否确定删除该模板？" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
|
||||
<el-popconfirm title="是否确定删除该模板？该模板下的配置将会被全部删除，且该操作不可恢复！" placement="top" icon="el-icon-circle-close" icon-color="red" @confirm="deleteThing(data.id)">
|
||||
<el-button class="operation-tooltip" type="text" slot="reference">删除</el-button>
|
||||
</el-popconfirm>
|
||||
<el-button type="text" @click="edit(data.id)">编辑</el-button>
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="包含位号" name="point">
|
||||
<el-row>
|
||||
<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-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6" :key="data.id" v-for="data in listPointData">
|
||||
<point-card
|
||||
:data="data"
|
||||
@@ -26,6 +29,9 @@
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="关联设备" name="device">
|
||||
<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>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :key="data.id" v-for="data in listDeviceData">
|
||||
<device-card
|
||||
:data="data"
|
||||
@@ -37,6 +43,8 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="模板模型" name="model">
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</base-card>
|
||||
</div>
|
||||
@@ -44,6 +52,7 @@
|
||||
<script>
|
||||
import baseCard from '@/components/card/base-card';
|
||||
import detailCard from '@/components/card/detail-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import deviceCard from '../device/DeviceCard';
|
||||
import pointCard from '../point/PointCard';
|
||||
import {dateFormat, setCopyContent} from "@/util/util";
|
||||
@@ -53,11 +62,13 @@
|
||||
import {driverDictionary, profileDictionary} from "@/api/dictionary";
|
||||
|
||||
export default {
|
||||
components: {baseCard, detailCard, deviceCard, pointCard},
|
||||
components: {baseCard, detailCard, skeletonCard, deviceCard, pointCard},
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.query.id,
|
||||
active: this.$route.query.active,
|
||||
deviceLoading: true,
|
||||
pointLoading: true,
|
||||
driverTable: {},
|
||||
profileTable: {},
|
||||
statusTable: {},
|
||||
@@ -77,11 +88,15 @@
|
||||
profile() {
|
||||
profileById(this.id).then(res => {
|
||||
this.data = res.data;
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
device() {
|
||||
deviceByProfileId(this.id).then(res => {
|
||||
this.listDeviceData = res.data;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.deviceLoading = false;
|
||||
});
|
||||
|
||||
deviceStatusByProfileId(this.id).then(res => {
|
||||
@@ -93,6 +108,8 @@
|
||||
pointByProfileId(this.id).then(res => {
|
||||
this.listPointData = res.data;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.pointLoading = false;
|
||||
});
|
||||
},
|
||||
drivers() {
|
||||
|
||||
@@ -123,6 +123,7 @@
|
||||
profileById(id).then(res => {
|
||||
this.profileFormData = res.data;
|
||||
this.oldProfileFormData = {...res.data};
|
||||
}).catch(() => {
|
||||
});
|
||||
},
|
||||
profileUpdate() {
|
||||
@@ -130,6 +131,7 @@
|
||||
if (valid) {
|
||||
profileUpdate(this.profileFormData).then(res => {
|
||||
this.oldProfileFormData = {...res.data};
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -15,6 +15,9 @@
|
||||
|
||||
<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="loading"></skeleton-card>
|
||||
</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"
|
||||
@@ -33,6 +36,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import blankCard from '@/components/card/blank-card';
|
||||
import skeletonCard from '@/components/card/skeleton-card';
|
||||
import profileTool from './ProfileTool'
|
||||
import profileAddForm from './ProfileAddForm'
|
||||
import profileCard from './ProfileCard'
|
||||
@@ -40,9 +44,10 @@
|
||||
import {pointDictionary} from "@/api/dictionary";
|
||||
|
||||
export default {
|
||||
components: {blankCard, profileTool, profileAddForm, profileCard},
|
||||
components: {blankCard, skeletonCard, profileTool, profileAddForm, profileCard},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
pointDictionary: [],
|
||||
pointTable: {},
|
||||
listData: [],
|
||||
@@ -69,6 +74,8 @@
|
||||
this.page.total = data.total;
|
||||
this.listData = data.records;
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
point() {
|
||||
|
||||
Reference in New Issue
Block a user