新增table 加载loading 新增运行状态

src/api/device/index.ts

@@ -30,6 +30,7 @@ export default {
     detail: (id: number) => get('/product/device/detail', { id }),
     getLogList: (params: object) => get('/product/log/search', params),
     getlogcate: (params: object) => get('/product/log/type', params),
+    getrun_status: (params: object) => get('/product/device/run_status', params),
   },
   dept: {
     getList: (params: object) => get('/system/dept/tree', params),

src/components/devantd/index.vue

@@ -0,0 +1,40 @@
+<template>
+	<div :id="antdid"></div>
+</template>
+
+<script lang="ts" setup>
+import { TinyArea } from '@antv/g2plot';
+import { onMounted } from 'vue';
+
+const props = defineProps({
+	json: {
+		type: Object,
+		required: true,
+	},
+	antdid:{
+		type: String,
+		required: true,
+	}
+});
+
+onMounted(() => {
+	const tinyArea = new TinyArea(props.antdid, {
+		height: 60,
+		autoFit: false,
+		data: props.json,
+		smooth: true,
+		areaStyle: {
+			fill: '#873bf4',
+			
+		},
+	// 	tooltip: {
+	// 		customContent: (title, data) => {
+	// 			console.log(title,data);
+	// 		//return "<div>"+data2[index]+"</div><div>"+
+	// 	}
+    // },
+	});
+
+	tinyArea.render();
+});
+</script>

src/views/datahub/modeling/detail.vue

@@ -65,7 +65,7 @@
 					</el-form>
 				</div>
 
-				<el-table :data="tableData.data" style="width: 100%">
+				<el-table :data="tableData.data" style="width: 100%"  v-loading="tableData.loading">
 					<el-table-column label="ID" align="center" prop="id" width="80" />
 					<el-table-column label="字段节点标题" prop="key" :show-overflow-tooltip="true" />
 					<el-table-column label="字段节点名称" prop="name" :show-overflow-tooltip="true" />
@@ -158,10 +158,11 @@ export default defineComponent({
 
 
 		const typeList = () => {
+			state.tableData.loading = true;
 			api.tnode.getList(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.list;
 				//state.tableData.total = res.Total;
-			});
+			}).finally(() => (state.tableData.loading = false));
 		};
 
 		const handleClick = (tab: TabsPaneContext, event: Event) => {

src/views/datahub/modeling/index.vue

@@ -51,7 +51,7 @@
 					</el-form-item>
 				</el-form>
 			</div>
-			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
 				<el-table-column type="selection" width="55" align="center" />
 				<el-table-column label="ID" align="center" prop="id" width="80" />
 				<el-table-column label="模型标识" prop="key" :show-overflow-tooltip="true" />
@@ -148,10 +148,11 @@ export default defineComponent({
 			typeList();
 		};
 		const typeList = () => {
+			state.tableData.loading = true;
 			api.template.getList(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.list;
 				state.tableData.total = res.Total;
-			});
+			}).finally(() => (state.tableData.loading = false));
 		};
 		// 打开新增菜单弹窗
 		const onOpenAdd = (row?: TableDataRow) => {

src/views/datahub/source/component/list.vue

@@ -13,7 +13,7 @@
       </div>
     </template>
 
-			<el-table :data="tableData.data" style="width: 100%">
+			<el-table :data="tableData.data" style="width: 100%"  v-loading="tableData.loading">
 				<el-table-column v-for="(item, index) in jData" :key="item" :label="item" :prop="item" show-overflow-tooltip align="center" style="min-width:200px">
 					<template #header>
 					<div >
@@ -107,7 +107,7 @@ export default defineComponent({
 		};
 
 		const typeList = () => {
-			console.log(state.tableData.param);
+			state.tableData.loading = true;
 			api.common.getdata(state.tableData.param).then((res: any) => {
 				const jsonData = JSON.parse(res.data);
 				state.tableData.data = jsonData;
@@ -119,7 +119,7 @@ export default defineComponent({
 
 				state.tableData.total = res.Total;
 				//state.ruleForm = res.data.dictType
-			});
+			}).finally(() => (state.tableData.loading = false));
 
 			api.node.getList(state.tableData.param).then((res: any) => {
 				res.list.forEach((item, index) => {

src/views/datahub/source/detail.vue

@@ -80,7 +80,7 @@
 							<div v-if="developer_status==0"><el-button type="primary" @click="onOpenEdit()">添加</el-button></div>
 						</div>
 				
-						<el-table :data="tableData.data" style="width: 100%">
+						<el-table :data="tableData.data" style="width: 100%"  v-loading="tableData.loading">
 							<el-table-column label="ID" align="center" prop="nodeId" width="80" />
 							<el-table-column label="数据标识" prop="key" :show-overflow-tooltip="true" />
 							<el-table-column label="数据名称" prop="name" :show-overflow-tooltip="true" />
@@ -216,10 +216,11 @@ export default defineComponent({
 		});
 
 		const typeList = () => {
+			state.tableData.loading = true;
 			api.node.getList(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.list;
 				state.tableData.total = res.Total;
-			});
+			}).finally(() => (state.tableData.loading = false));
 		};
 
 		const CkOption = () => {

src/views/datahub/source/index.vue

@@ -58,7 +58,7 @@
 					</el-form-item>
 				</el-form>
 			</div>
-			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
 				<el-table-column type="selection" width="55" align="center" />
 				<el-table-column label="ID" align="center" prop="sourceId" width="80" />
 <!--				<el-table-column label="数据源标识" prop="key" :show-overflow-tooltip="true" />-->
@@ -190,10 +190,11 @@ export default defineComponent({
 			typeList();
 		};
 		const typeList = () => {
+			state.tableData.loading = true;
 			api.common.getList(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.list;
 				state.tableData.total = res.Total;
-			});
+			}).finally(() => (state.tableData.loading = false));
 		};
 
 		//打开数据记录

src/views/device/category/index.vue

@@ -23,7 +23,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="tableData.data" style="width: 100%" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+      <el-table :data="tableData.data" style="width: 100%" row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" v-loading="tableData.loading">
         <el-table-column prop="name" label="分类名称" show-overflow-tooltip> </el-table-column>
         
        
@@ -88,9 +88,10 @@ export default defineComponent({
 			getCateList();
 		};
 		const getCateList = () => {
+			state.tableData.loading = true;
 			api.category.getList(state.tableData.param).then((res: any) => {
 				state.tableData.data = res.category;
-			});
+			}).finally(() => (state.tableData.loading = false));
 		};
 		// 打开新增菜单弹窗
 		const onOpenAdd = (row?: TableDataRow) => {

src/views/device/instance/detail.vue

@@ -170,19 +170,58 @@
 						/>
 					</div>
 				</el-tab-pane>
-				<el-tab-pane label="运行状态" name="3"> </el-tab-pane>
+				<el-tab-pane label="运行状态" name="3">
+					<div style="background-color: rgb(240, 242, 245); display: flex; padding: 10px;flex-wrap: wrap;">
+						<div class="ant-card">
+							<div class="ant-card-body">
+								<div class="cardflex">
+									<div>设备状态</div>
+									<div @click="getrunData()" style="cursor: pointer;">
+										<el-icon>
+											<ele-Refresh />
+										</el-icon>
+									</div>
+								</div>
+
+								<div class="statusname" v-if="areaData.status==0">未启用</div>
+								<div class="statusname" v-if="areaData.status==1">离线</div>
+								<div class="statusname" v-if="areaData.status==2">在线</div>
+								<div class="cardflex comtest">
+									<div>最后上线时间</div>
+									<div>{{areaData.lastOnlineTime || '未启用'}}</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="ant-card" v-for="(item, index) in areaData.properties" :key="index">
+							<div class="ant-card-body">
+								<div class="cardflex">
+									<div>{{item.name}}</div>
+									<div @click="getrunData()" style="cursor: pointer;">
+										<el-icon >
+											<ele-Refresh />
+										</el-icon>
+									</div>
+								</div>
+
+								<div class="statusname">{{item.value}}</div>
+								<div class="cardflex">
+									<devantd :json="item.list" :antdid="item.key" v-if="item.type=='int'"/>
+								</div>
+							</div>
+						</div>
+
+						
+				
+					</div>
+				</el-tab-pane>
 
 				<el-tab-pane label="日志管理" name="4">
 					<div class="system-user-search mb15">
 						<el-form :model="logtableData.param" ref="queryRef" :inline="true" label-width="68px">
 							<el-form-item label="日志类型" prop="types">
 								<el-select v-model="logtableData.param.types" placeholder="日志类型" clearable size="default">
-									<el-option
-										v-for="item in logTypeData"
-										:key="item"
-										:label="item"
-										:value="item"
-									/>
+									<el-option v-for="item in logTypeData" :key="item" :label="item" :value="item" />
 								</el-select>
 							</el-form-item>
 
@@ -254,17 +293,16 @@
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 
-import "vue3-json-viewer/dist/index.css";
-
+import 'vue3-json-viewer/dist/index.css';
 
 import EditDic from '../product/component/editPro.vue';
 import EditAttr from '../product/component/editAttr.vue';
 import EditFun from '../product/component/editFun.vue';
 import EditEvent from '../product/component/editEvent.vue';
 import EditTab from '../product/component/editTab.vue';
+import devantd from '/@/components/devantd/index.vue';
 
 import { useRoute } from 'vue-router';
 
@@ -301,7 +339,7 @@ interface TableDataState {
 }
 export default defineComponent({
 	name: 'deviceEditPro',
-	components: { EditDic, EditAttr, EditFun, EditEvent, EditTab },
+	components: { EditDic, EditAttr, EditFun, EditEvent, EditTab,devantd },
 
 	setup(prop, context) {
 		const route = useRoute();
@@ -311,10 +349,11 @@ export default defineComponent({
 		const editEventRef = ref();
 		const editTabRef = ref();
 		const state = reactive<TableDataState>({
+			areaData:[],
 			isShowDialog: false,
 			dialogVisible: false,
-			logTypeData:[],
-			jsonData:'',
+			logTypeData: [],
+			jsonData: '',
 			activeName: '1', // 分类数据
 			activetab: 'attr', // 分类数据
 			detail: [],
@@ -368,11 +407,9 @@ export default defineComponent({
 		});
 
 		const onLogDetail = (row: TableDataRow) => {
-
-			state.jsonData=JSON.parse(row.content);
+			state.jsonData = JSON.parse(row.content);
 			console.log(JSON.parse(row.content));
-			state.dialogVisible=true;
-
+			state.dialogVisible = true;
 		};
 
 		//编辑属性
@@ -530,12 +567,22 @@ export default defineComponent({
 				//获取日志
 				getlog();
 				getlogtype();
-			}else if(tab.props.name==2){
+			} else if (tab.props.name == 2) {
 				getList();
+			} else if(tab.props.name==3){			
+				getrunData();
 			}
 		};
 
-		const getlogtype=()=>{
+		const getrunData=()=>{
+			api.instance.getrun_status({id:9}).then((res: any) => {
+					state.areaData=res
+				
+				});
+			
+		};
+
+		const getlogtype = () => {
 			api.instance.getlogcate({}).then((res: any) => {
 				state.logTypeData = res.list;
 			});
@@ -544,7 +591,7 @@ export default defineComponent({
 		const getlog = () => {
 			state.logtableData.param.deviceKey = state.detail.key;
 			api.instance.getLogList(state.logtableData.param).then((res: any) => {
-				console.log(res,"22222222");
+				console.log(res, '22222222');
 				state.logtableData.data = res.list;
 				state.logtableData.total = res.Total;
 			});
@@ -563,14 +610,28 @@ export default defineComponent({
 				});
 			}
 		};
-
+		const tinyAreas = () => {
+			var data=state.data;
+
+			const tinyArea = new TinyArea('container', {
+				height: 60,
+				autoFit: false,
+				data,
+				smooth: true,
+				areaStyle: {
+					fill: '#d6e3fd',
+				},
+				});
+				tinyArea.render();
+		}
 		return {
-			Edit,
+			tinyAreas,
 			editDicRef,
 			editAttrRef,
 			editFunRef,
 			editEventRef,
 			editTabRef,
+			getrunData,
 			getlog,
 			getlogtype,
 			onLogDetail,
@@ -725,6 +786,39 @@ tr {
 .wu-box .wu-title .title {
 	font-size: 18px;
 }
+.ant-card {
+	box-sizing: border-box;
+	margin: 10px;
+	width: 23.9%;
+	color: rgba(0, 0, 0, 0.65);
+	font-size: 14px;
+	font-variant: tabular-nums;
+	line-height: 1.5;
+	list-style: none;
+	font-feature-settings: 'tnum';
+	position: relative;
+	background: #fff;
+	border-radius: 2px;
+	transition: all 0.3s;
+}
+.ant-card-body {
+	padding: 24px;
+	zoom: 1;
+}
+.cardflex {
+	display: flex;
+	justify-content: space-between;
+}
+.statusname {
+	color: rgba(0, 0, 0, 0.85);
+	font-size: 30px;
+	margin-top: 10px;
+}
+.comtest{
+	margin-top: 20px;
+	height: 30px;
+	line-height: 30px;
+}
 </style>
 
 

src/views/device/instance/index.vue

@@ -49,7 +49,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="ID" align="center" prop="id" width="60" />
 	    <el-table-column label="标识" prop="key" :show-overflow-tooltip="true" />
@@ -147,11 +147,12 @@ export default defineComponent({
 			typeList();
 		};
 		const typeList = () => {
+			state.tableData.loading = true;
 			api.instance.getList(state.tableData.param).then((res: any) => {
 				console.log(res);
 				state.tableData.data = res.device;
 				state.tableData.total = res.total;
-			});
+			}).finally(() => (state.tableData.loading = false));
 		};
 
 		//查看详情

src/views/device/product/index.vue

@@ -46,7 +46,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange" v-loading="tableData.loading">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="ID" align="center" prop="id" width="60" />
         <el-table-column label="标识" prop="key" :show-overflow-tooltip="true" />
@@ -141,11 +141,12 @@ export default defineComponent({
 			typeList();
 		};
 		const typeList = () => {
+			state.tableData.loading = true;
 			api.product.getList(state.tableData.param).then((res: any) => {
 				console.log(res);
 				state.tableData.data = res.product;
 				state.tableData.total = res.total;
-			});
+			}).finally(() => (state.tableData.loading = false));
 		};
 		// 打开新增产品弹窗
 		const onOpenAddDic = () => {