设备详情-增加设备功能显示，设备功能的执行操作还没加好，明天 继续弄

.prettierrc.js

@@ -6,7 +6,7 @@ module.exports = {
 	// 使用制表符而不是空格缩进行
 	useTabs: true,
 	// 在语句末尾打印分号
-	semi: true,
+	semi: false,
 	// 使用单引号而不是双引号
 	singleQuote: true,
 	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"

src/api/device/index.ts

@@ -40,6 +40,9 @@ export default {
   dept: {
     getList: (params: object) => get('/system/dept/tree', params),
   },
+  tabDeviceFucntion: {
+    getList: (params: object) => get('/product/tsl/function/all', params),
+  },
 
   model: {
     property: (params: object) => get('/product/tsl/property/list', params),

src/views/iot/device/instance/component/function.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class="device-function">
+		<el-tabs tab-position="left">
+			<el-tab-pane :label="item.name" v-for="item in list" :key="item.key">
+				<div class="table-wrapper">
+					<el-table :data="item.inputs || []" border>
+						<el-table-column prop="name" label="参数名称" />
+						<el-table-column prop="valueType.type" label="输入类型" />
+						<el-table-column prop="name" label="值" min-width="200">
+							<template #default="{ row }">
+								<el-input v-model="row.value" clearable>
+									<template v-if="row.valueType.unit" #append>{{ row.valueType.unit }}</template>
+								</el-input>
+							</template>
+						</el-table-column>
+					</el-table>
+					<el-input type="textarea" :value="item.result" class="result"> </el-input>
+				</div>
+				<div class="btn">
+					<el-button type="primary" @click="run(item)">执行</el-button>
+					<el-button @click="clear(item)">清空</el-button>
+				</div>
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import api from '/@/api/device'
+
+const props = defineProps({
+	funKey: String,
+})
+
+interface IListItem {
+	key: string
+	name: string
+	inputs: any[]
+	result: string
+}
+
+const list = ref<IListItem[]>([])
+
+api.tabDeviceFucntion.getList({ key: props.funKey }).then((res: IListItem[]) => {
+	console.log(res)
+	console.log(res[0])
+	res.forEach((item) => (item.result = ''))
+	list.value = res
+})
+
+function run(row: IListItem) {
+  row.result = JSON.stringify(row, null, 2)
+ }
+
+function clear(row: IListItem) {
+  row.result = ''
+}
+
+</script>
+
+<style scoped lang="scss">
+.table-wrapper {
+	width: 100%;
+	padding: 10px;
+	display: flex;
+	align-items: stretch;
+	justify-content: space-between;
+	gap: 20px;
+	.el-table {
+		flex: 3;
+	}
+	.result {
+		flex: 2;
+	}
+	::v-deep(.el-textarea__inner) {
+		height: 100%;
+	}
+}
+</style>

src/views/iot/device/instance/detail.vue

@@ -55,15 +55,8 @@
 								</div>
 							</div>
 						</div>
-
-
-
 					</div>
 				</el-tab-pane>
-
-
-
-
 				<el-tab-pane label="设备信息" name="1">
 					<div class="pro-box">
 						<div class="protitle">设备信息</div>
@@ -239,8 +232,9 @@
             <pagination v-show="tableData.total > 0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="getList" />
           </div>
         </el-tab-pane>
-
-
+        <el-tab-pane label="设备功能" name="5">
+          <functionCom :fun-key="prodetail.key" v-if="prodetail.key"></functionCom>
+        </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">
@@ -306,6 +300,7 @@
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import functionCom from './component/function.vue';
 
 import 'vue3-json-viewer/dist/index.css';
 
@@ -353,7 +348,7 @@ interface TableDataState {
 }
 export default defineComponent({
   name: 'deviceEditPro',
-  components: { EditDic, EditAttr, EditFun, EditEvent, EditTab, devantd, ListDic },
+  components: { EditDic, EditAttr, EditFun, EditEvent, EditTab, devantd, ListDic, functionCom },
 
 	setup(prop, context) {
 		const route = useRoute();
@@ -411,7 +406,7 @@ export default defineComponent({
 				getrunData();
 				api.product.detail(res.data.product.id).then((res: any) => {
 					state.prodetail = res.data;
-					console.log(res.data);
+					// console.log(res.data);
 				});
 
 				//第一次加载
@@ -600,12 +595,12 @@ export default defineComponent({
     const getrunData = () => {
       api.instance.getrun_status({ id: state.detail.id }).then((res: any) => {
           state.areaData = res
-          let properties=state.areaData.properties;
+          let properties=state.areaData.properties || [];
 
           var temp = new Array();
 
           properties.forEach(function (item, index) {
-              let datalist=item.list;
+              let datalist=item.list || [];
               temp[index] = [];
               var temps = new Array();
               datalist.forEach(function (a, b) {

src/views/iot/device/template/detail.vue

@@ -603,12 +603,12 @@ export default defineComponent({
 		const getrunData = () => {
 			api.instance.getrun_status({ id: state.detail.id }).then((res: any) => {
 				state.areaData = res;
-				let properties = state.areaData.properties;
+				let properties = state.areaData.properties || [];
 
 				var temp = new Array();
 
 				properties.forEach(function (item, index) {
-					let datalist = item.list;
+					let datalist = item.list || [];
 					temp[index] = [];
 					var temps = new Array();
 					datalist.forEach(function (a, b) {