From a66f049894be0ab59bcee8ccf9b4328708f3e914 Mon Sep 17 00:00:00 2001
From: ailanyin <ailanyin4j@163.com>
Date: Fri, 17 Mar 2023 17:36:17 +0800
Subject: [PATCH] model

---
 package.json                                  |   1 +
 src/api/product/product.js                    |  56 +++
 src/assets/images/product.jpg                 | Bin 0 -> 24536 bytes
 src/components/ImageUpload/index.vue          |   2 +-
 src/constant/dict.js                          |  32 +-
 src/views/login.vue                           | 278 ++++++-----
 src/views/product/category/index.vue          |   3 +-
 src/views/product/product/components/edit.vue | 248 ++++++++++
 .../product/product/components/model.vue      | 139 ++++++
 src/views/product/product/index.vue           | 435 ++++++++++++++++++
 10 files changed, 1069 insertions(+), 125 deletions(-)
 create mode 100644 src/api/product/product.js
 create mode 100644 src/assets/images/product.jpg
 create mode 100644 src/views/product/product/components/edit.vue
 create mode 100644 src/views/product/product/components/model.vue
 create mode 100644 src/views/product/product/index.vue

diff --git a/package.json b/package.json
index 6c27fe3..515ab0c 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "fuse.js": "6.6.2",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.3.1",
+    "lodash-es": "^4.17.21",
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
     "vue": "3.2.45",
diff --git a/src/api/product/product.js b/src/api/product/product.js
new file mode 100644
index 0000000..3398132
--- /dev/null
+++ b/src/api/product/product.js
@@ -0,0 +1,56 @@
+import request from "@/utils/request";
+
+// 查询产品列表
+export function listProduct(query) {
+  return request({
+    url: "/product/product/list",
+    method: "get",
+    params: query
+  });
+}
+
+// 查询产品详细
+export function getProduct(productId) {
+  return request({
+    url: "/product/product/" + productId,
+    method: "get"
+  });
+}
+
+// 新增产品
+export function addProduct(data) {
+  return request({
+    url: "/product/product",
+    method: "post",
+    data: data
+  });
+}
+
+// 修改产品
+export function updateProduct(data) {
+  return request({
+    url: "/product/product",
+    method: "put",
+    data: data
+  });
+}
+
+// 删除产品
+export function delProduct(productId) {
+  return request({
+    url: "/product/product/" + productId,
+    method: "delete"
+  });
+}
+
+/**
+ * 检查产品SN是否唯一
+ * @param productSn
+ * @return {*}
+ */
+export function checkProductSn(productSn) {
+  return request({
+    url: `/product/product/check/${productSn}`
+    , method: "get"
+  });
+}
\ No newline at end of file
diff --git a/src/assets/images/product.jpg b/src/assets/images/product.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..263203a0ae2f14416075325555d65c961e792ea2
GIT binary patch
literal 24536
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
U#aHrw)eZJ9jOjliiPrId02<wH6951J

literal 0
HcmV?d00001

diff --git a/src/components/ImageUpload/index.vue b/src/components/ImageUpload/index.vue
index d1976b8..79c1644 100644
--- a/src/components/ImageUpload/index.vue
+++ b/src/components/ImageUpload/index.vue
@@ -152,7 +152,7 @@ function handleExceed() {
 // 上传成功回调
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
-    uploadList.value.push({ name: res.fileName, url: res.fileName });
+    uploadList.value.push({ name: res.fileName, url: res.url });
     uploadedSuccessfully();
   } else {
     number.value--;
diff --git a/src/constant/dict.js b/src/constant/dict.js
index 529a0ce..73e7646 100644
--- a/src/constant/dict.js
+++ b/src/constant/dict.js
@@ -1,4 +1,34 @@
 export const statusMap = new Map([
   ["0", "正常"],
-  ["1", "禁用"],
+  ["1", "禁用"]
 ]);
+
+export const deviceTypeMap = new Map([
+  [1, "直连设备"],
+  [2, "网关子设备"],
+  [3, "网关子设备"]
+]);
+export const vertificateMethodOptions = [
+  {
+    label: "简单认证",
+    value: 1
+  }, {
+    label: "加密认证",
+    value: 2
+  }, {
+    label: "简单+加密",
+    value: 3
+  }
+];
+
+export const isTopMap = new Map([
+  [0, "是"],
+  [1, "否"]
+]);
+
+export const isMonitor = new Map([
+  [0, "是"],
+  [1, "否"]
+]);
+
+
diff --git a/src/views/login.vue b/src/views/login.vue
index c303dbd..cadf3d6 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -11,127 +11,133 @@
         <el-tab-pane label="密码登录" name="password"></el-tab-pane>
         <el-tab-pane label="验证码登录" name="captcha"></el-tab-pane>
       </el-tabs>
-      <Transition> </Transition>
-      <div v-if="loginMethod === 'password'">
-        <el-form-item prop="username">
-          <el-input
-            v-model="loginForm.username"
-            auto-complete="off"
-            placeholder="请输入用户名"
-            size="large"
-            type="text"
-          >
-            <template #prefix>
-              <svg-icon class="el-input__icon input-icon" icon-class="user" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginForm.password"
-            auto-complete="off"
-            placeholder="请输入密码"
-            size="large"
-            type="password"
-            @keyup.enter="handleLogin"
-          >
-            <template #prefix>
-              <svg-icon
-                class="el-input__icon input-icon"
-                icon-class="password"
-              />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item v-if="captchaEnabled" prop="code">
-          <el-input
-            v-model="loginForm.code"
-            auto-complete="off"
-            placeholder="请输入验证码"
-            size="large"
-            style="width: 63%"
-            @keyup.enter="handleLogin"
-          >
-            <template #prefix>
-              <svg-icon
-                class="el-input__icon input-icon"
-                icon-class="validCode"
-              />
-            </template>
-          </el-input>
-          <div class="login-code">
-            <img :src="codeUrl" class="login-code-img" @click="getCode" />
-          </div>
-        </el-form-item>
-        <el-checkbox
-          v-model="loginForm.rememberMe"
-          style="margin: 0px 0px 25px 0px"
-          >记住密码
-        </el-checkbox>
-      </div>
-      <div v-if="loginMethod === 'captcha'">
-        <el-form-item prop="phone">
-          <el-input
-            v-model="loginForm.phone"
-            auto-complete="off"
-            placeholder="请输入手机号"
-            size="large"
-            type="text"
-          >
-            <template #prefix>
-              <svg-icon class="el-input__icon input-icon" icon-class="user" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item v-if="captchaEnabled" prop="code">
-          <el-input
-            v-model="loginForm.code"
-            auto-complete="off"
-            placeholder="请输入图形验证码"
-            size="large"
-            style="width: 63%"
-          >
-            <!--                @keyup.enter="handleLogin"-->
-            <template #prefix>
-              <svg-icon
-                class="el-input__icon input-icon"
-                icon-class="validCode"
-              />
-            </template>
-          </el-input>
-          <div class="login-code">
-            <img :src="codeUrl" class="login-code-img" @click="getCode" />
-          </div>
-        </el-form-item>
-        <el-form-item prop="smsCode">
-          <el-input
-            v-model="loginForm.smsCode"
-            auto-complete="off"
-            class="sms-code-input"
-            placeholder="请输入短信验证码"
-            size="large"
-            @keyup.enter="handleLogin"
-          >
-            <template #prefix>
-              <svg-icon class="el-input__icon input-icon" icon-class="email" />
-            </template>
-            <template #append>
-              <el-button
-                :disabled="getSMSCodeCountDown > 0"
-                link
-                type="info"
-                @click="getSMSCode"
-              >
-                {{
-                  getSMSCodeCountDown > 0
-                    ? `${getSMSCodeCountDown}秒后重新获取`
-                    : "获取短信验证码"
-                }}
-              </el-button>
-            </template>
-          </el-input>
-        </el-form-item>
-      </div>
+      <Transition name="slide-left">
+        <div v-if="loginMethod === 'password'" class="password-input">
+          <el-form-item prop="username">
+            <el-input
+              v-model="loginForm.username"
+              auto-complete="off"
+              placeholder="请输入用户名"
+              size="large"
+              type="text"
+            >
+              <template #prefix>
+                <svg-icon class="el-input__icon input-icon" icon-class="user" />
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input
+              v-model="loginForm.password"
+              auto-complete="off"
+              placeholder="请输入密码"
+              size="large"
+              type="password"
+              @keyup.enter="handleLogin"
+            >
+              <template #prefix>
+                <svg-icon
+                  class="el-input__icon input-icon"
+                  icon-class="password"
+                />
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="captchaEnabled" prop="code">
+            <el-input
+              v-model="loginForm.code"
+              auto-complete="off"
+              placeholder="请输入验证码"
+              size="large"
+              style="width: 63%"
+              @keyup.enter="handleLogin"
+            >
+              <template #prefix>
+                <svg-icon
+                  class="el-input__icon input-icon"
+                  icon-class="validCode"
+                />
+              </template>
+            </el-input>
+            <div class="login-code">
+              <img :src="codeUrl" class="login-code-img" @click="getCode" />
+            </div>
+          </el-form-item>
+          <el-checkbox
+            v-model="loginForm.rememberMe"
+            style="margin: 0px 0px 25px 0px"
+            >记住密码
+          </el-checkbox>
+        </div>
+      </Transition>
+      <Transition name="slide-right">
+        <div v-if="loginMethod === 'captcha'" class="captcha-input">
+          <el-form-item prop="phone">
+            <el-input
+              v-model="loginForm.phone"
+              auto-complete="off"
+              placeholder="请输入手机号"
+              size="large"
+              type="text"
+            >
+              <template #prefix>
+                <svg-icon class="el-input__icon input-icon" icon-class="user" />
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item v-if="captchaEnabled" prop="code">
+            <el-input
+              v-model="loginForm.code"
+              auto-complete="off"
+              placeholder="请输入图形验证码"
+              size="large"
+              style="width: 63%"
+            >
+              <!--                @keyup.enter="handleLogin"-->
+              <template #prefix>
+                <svg-icon
+                  class="el-input__icon input-icon"
+                  icon-class="validCode"
+                />
+              </template>
+            </el-input>
+            <div class="login-code">
+              <img :src="codeUrl" class="login-code-img" @click="getCode" />
+            </div>
+          </el-form-item>
+          <el-form-item prop="smsCode">
+            <el-input
+              v-model="loginForm.smsCode"
+              auto-complete="off"
+              class="sms-code-input"
+              placeholder="请输入短信验证码"
+              size="large"
+              @keyup.enter="handleLogin"
+            >
+              <template #prefix>
+                <svg-icon
+                  class="el-input__icon input-icon"
+                  icon-class="email"
+                />
+              </template>
+              <template #append>
+                <el-button
+                  :disabled="getSMSCodeCountDown > 0"
+                  link
+                  type="info"
+                  @click="getSMSCode"
+                >
+                  {{
+                    getSMSCodeCountDown > 0
+                      ? `${getSMSCodeCountDown}秒后重新获取`
+                      : "获取短信验证码"
+                  }}
+                </el-button>
+              </template>
+            </el-input>
+          </el-form-item>
+        </div>
+      </Transition>
 
       <el-form-item style="width: 100%">
         <el-button
@@ -408,4 +414,34 @@ getCookie();
   height: 40px;
   padding-left: 12px;
 }
+
+.slide-left-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-left-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  transform: translateX(-500px);
+  position: relative;
+  left: -500px;
+  opacity: 0;
+}
+
+.slide-right-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-right-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(500px);
+  opacity: 0;
+}
 </style>
diff --git a/src/views/product/category/index.vue b/src/views/product/category/index.vue
index db66c2c..a530087 100644
--- a/src/views/product/category/index.vue
+++ b/src/views/product/category/index.vue
@@ -177,7 +177,7 @@
                 children: categoryList,
               },
             ]"
-            :default-expanded-keys="[0]"
+            :default-expanded-keys="[form.parentId]"
             node-key="categoryId"
             :props="{
               value: 'categoryId',
@@ -185,7 +185,6 @@
               children: 'children',
             }"
             check-strictly
-            clearable
             placeholder="选择上级分类"
             value-key="categoryId"
           />
diff --git a/src/views/product/product/components/edit.vue b/src/views/product/product/components/edit.vue
new file mode 100644
index 0000000..bc50f6f
--- /dev/null
+++ b/src/views/product/product/components/edit.vue
@@ -0,0 +1,248 @@
+<template>
+  <div class="app-container">
+    <el-tabs tab-position="left">
+      <el-tab-pane label="基本信息">
+        <el-form
+          ref="productRef"
+          :model="form"
+          :rules="rules"
+          label-width="120px"
+        >
+          <el-row :gutter="100">
+            <el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">
+              <el-form-item label="产品名称" prop="productName">
+                <el-input
+                  v-model="form.productName"
+                  placeholder="请输入产品名称"
+                />
+              </el-form-item>
+              <el-form-item label="选择产品分类" prop="categoryId">
+                <el-tree-select
+                  v-model="form.categoryId"
+                  :data="categoryOptions"
+                  :props="{
+                    value: 'categoryId',
+                    label: 'name',
+                    children: 'children',
+                  }"
+                  check-strictly
+                  placeholder="请选择产品分类"
+                  value-key="categoryId"
+                />
+              </el-form-item>
+
+              <el-form-item label="租户ID" prop="tenantId">
+                <el-select v-model="form.tenantId" :remote-method="getTenantList" filterable>
+                  <el-option v-for="item in tenantOptions" :key="item.tenantId" :label="item.tenantName"
+                             :value="item.tenantId" />
+                </el-select>
+
+              </el-form-item>
+              <el-form-item label="备注" prop="remark">
+                <el-input
+                  v-model="form.remark"
+                  placeholder="请输入内容"
+                  type="textarea"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">
+              <el-form-item label="产品编码SN" prop="productSn">
+                <el-input
+                  v-model="form.productSn"
+                  placeholder="请输入产品编码SN"
+                  @input="checkProductSnUnique"
+                >
+                  <template #suffix>
+                    <el-icon v-if="isProductSnUnique===true" color="green">
+                      <SuccessFilled />
+                    </el-icon>
+                    <el-icon v-else-if="isProductSnUnique===false" color="red">
+                      <CircleCloseFilled />
+                    </el-icon>
+                    <el-icon v-else>
+                      <InfoFilled />
+                    </el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item label="mqtt账号" prop="mqttAccount">
+                <el-input
+                  v-model="form.mqttAccount"
+                  placeholder="请输入mqtt账号"
+                />
+              </el-form-item>
+              <el-form-item label="mqtt密码" prop="mqttPassword">
+                <el-input
+                  v-model="form.mqttPassword"
+                  placeholder="请输入mqtt密码"
+                  type="password"
+                />
+              </el-form-item>
+              <el-form-item label="产品秘钥" prop="mqttSecret">
+                <el-input
+                  v-model="form.mqttSecret"
+                  placeholder="请输入产品秘钥"
+                  type="password"
+                />
+              </el-form-item>
+              <el-form-item label="认证方式" prop="vertificateMethod">
+                <el-select v-model="form.vertificateMethod"
+                           placeholder="请选择认证方式">
+                  <el-option v-for="item in vertificateMethodOptions" :key="item.value" :label="item.label"
+                             :value="item.value" />
+                </el-select>
+
+              </el-form-item>
+
+
+            </el-col>
+            <el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">
+              <el-form-item label="图片地址" prop="imgUrl">
+                <!--                <el-input v-model="form.imgUrl" placeholder="请输入图片地址" />-->
+                <image-upload v-model="form.imgUrl" :limit="1"></image-upload>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-col :span="20">
+            <el-form-item style="text-align: center;margin:40px 0px;">
+              <el-button v-if="form.status!==2" type="primary" @click="submitForm">提交</el-button>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="产品模型">
+        <model ref="modelRef" :model-json="form.thingsModelsJson" :product="form" />
+      </el-tab-pane>
+      <el-tab-pane label="固件管理"></el-tab-pane>
+      <el-tab-pane label="设备授权"></el-tab-pane>
+      <el-tab-pane label="告警配置"></el-tab-pane>
+      <el-tab-pane label="控制界面"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref, toRefs } from "vue";
+import Model from "@/views/product/product/components/model.vue";
+import { useRoute } from "vue-router";
+import { addProduct, checkProductSn, getProduct, updateProduct } from "@/api/product/product";
+import { listCategory } from "@/api/product/category";
+import { listTenant } from "@/api/system/tenant";
+import ImageUpload from "@/components/ImageUpload/index.vue";
+import { ElMessage } from "element-plus";
+import tab from "@/plugins/tab";
+import { vertificateMethodOptions } from "@/constant/dict";
+import { debounce } from "lodash-es";
+
+const route = useRoute();
+const data = reactive({
+  form: {},
+  rules: {
+    productName: [
+      { required: true, message: "产品名称不能为空", trigger: "blur" }
+    ],
+    categoryId: [
+      { required: true, message: "产品分类ID不能为空", trigger: "blur" }
+    ],
+    tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+const productRef = ref();
+const categoryOptions = ref([]);  // 产品分类树形选择
+const tenantOptions = ref([]);
+const isProductSnUnique = ref();
+
+
+
+const checkProductSnUnique = debounce((sn) => {
+  console.log(sn);
+  checkProductSn(sn).then(response => {
+    console.log(response);
+    isProductSnUnique.value = response.empty;
+  });
+}, 500);
+
+// 表单重置
+function reset() {
+  form.value = {
+    productId: null,
+    productSn: null,
+    productName: null,
+    categoryId: null,
+    tenantId: null,
+    mqttAccount: null,
+    mqttPassword: null,
+    mqttSecret: null,
+    status: null,
+    thingsModelsJson: null,
+    deviceType: null,
+    vertificateMethod: null,
+    imgUrl: null,
+    createBy: null,
+    createTime: null,
+    remark: null
+  };
+  // proxy.resetForm("productRef");
+  if (productRef.value) {
+    productRef.value.resetFields();
+  }
+}
+
+// 获取产品详情, 回显表单
+const getData = () => {
+  reset();
+  const _productId = route.query.productId;
+  if (_productId) {
+    const tabObj = Object.assign({}, route, { title: "修改产品" });
+    tab.updatePage(tabObj);
+    getProduct(_productId).then((response) => {
+      form.value = response.data;
+    });
+  } else {
+    const tabObj = Object.assign({}, route, { title: "新增产品" });
+    tab.updatePage(tabObj);
+  }
+};
+const getCategoryList = async () => {
+  const response = await listCategory();
+  categoryOptions.value = response.data;
+};
+
+const getTenantList = async (keyword) => {
+  const response = await listTenant({
+    pageNum: 1, pageSize: 20, tenantName: keyword
+  });
+  tenantOptions.value = response.rows;
+};
+const submitForm = () => {
+  productRef.value.validate((valid) => {
+    if (valid) {
+      if (valid) {
+        if (form.value.productId != null) {
+          updateProduct(form.value).then((response) => {
+            ElMessage.success("修改成功");
+          });
+        } else {
+          addProduct(form.value).then((response) => {
+            ElMessage.success("新增成功");
+            form.value = response.data;
+            const tabObj = Object.assign({}, route, { title: "修改产品" });
+            tab.updatePage(tabObj);
+          });
+        }
+      }
+    }
+  });
+};
+onMounted(() => {
+  getData();
+});
+
+getCategoryList();
+getTenantList();
+</script>
+
+<style scoped></style>
diff --git a/src/views/product/product/components/model.vue b/src/views/product/product/components/model.vue
new file mode 100644
index 0000000..4769457
--- /dev/null
+++ b/src/views/product/product/components/model.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:add']"
+          icon="plus"
+          plain
+          size="small"
+          type="primary"
+          @click="open=true"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:add']"
+          icon="upload"
+          plain
+          size="small"
+          type="success"
+          @click=""
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:add']"
+          icon="refresh"
+          plain
+          size="small"
+          type="warning"
+          @click=""
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:add']"
+          icon="view"
+          plain
+          size="small"
+          type="info"
+          @click=""
+        >新增
+        </el-button>
+      </el-col>
+    </el-row>
+    <el-table :data="modelList" size="small">
+      <el-table-column align="center" label="名称" prop="name" />
+      <el-table-column align="center" label="首页显示" prop="isTop">
+        <template #default="{row}">
+          {{ isTopMap.get(row.isTop) ?? "未知" }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="实时监测" prop="isMonitor">
+        <template #default="{row}">
+          {{ isMonitor.get(row.isMonitor) ?? "未知" }}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="物模型类别" prop="isMonitor">
+        <template #default="{row}">
+          <el-tag v-if="row.modelType==='events'">事件</el-tag>
+          <el-tag v-else-if="row.modelType==='functions'">函数</el-tag>
+          <el-tag v-else-if="row.modelType==='properties'">属性</el-tag>
+          <el-tag v-else>未知</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改物模型对话框 -->
+    <el-dialog v-model="open" append-to-body title="" width="600px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="模型名称" prop="modelName">
+          <el-input v-model="form.modelName" placeholder="请输入物模型名称，例如：温度" style="width:385px;" />
+        </el-form-item>
+        <el-form-item label="标识符" prop="identifier">
+          <el-input v-model="form.identifier" placeholder="请输入标识符，例如：temperature" style="width:385px;" />
+        </el-form-item>
+        <el-form-item label="模型类别" prop="type">
+          <el-radio-group v-model="form.type" @change="typeChange(form.type)">
+            <el-radio-button label="1">属性</el-radio-button>
+            <el-radio-button label="2">功能</el-radio-button>
+            <el-radio-button label="3">事件</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-show="form.type != 3" label="首页显示" prop="isTop">
+          <el-switch v-model="form.isTop" :active-value="1" :inactive-value="0" active-color="#13ce66" active-text=""
+                     inactive-text="">
+          </el-switch>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from "vue-router";
+import { reactive, ref, toRefs, watch } from "vue";
+import { isMonitor, isTopMap } from "@/constant/dict";
+
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  }, modelJson: {
+    type: String
+  }
+});
+const { product, modelJson } = toRefs(props);
+
+
+const route = useRoute();
+const data = reactive({
+  form: {}
+});
+const modelList = ref([]);
+const { form } = toRefs(data);
+
+const open = ref(false);  // 是否显示编辑对话框
+
+watch(modelJson, (value) => {
+  if (value) {
+    const { functions, events, properties } = JSON.parse(value);
+    modelList.value = [...functions.map(el => ({
+      ...el, modelType: "functions"
+    })), ...events.map(el => ({
+      ...el, modelType: "events"
+    })), ...properties.map(el => ({
+      ...el, modelType: "properties"
+    }))];
+  }
+});
+
+function getModelData() {
+}
+</script>
+
+<style scoped></style>
diff --git a/src/views/product/product/index.vue b/src/views/product/product/index.vue
new file mode 100644
index 0000000..3618652
--- /dev/null
+++ b/src/views/product/product/index.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <el-form
+      v-show="showSearch"
+      ref="queryRef"
+      :inline="true"
+      :model="queryParams"
+      label-position="left"
+      label-width="100px"
+    >
+      <!--      <el-form-item label="产品编码SN" prop="productSn">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.productSn"-->
+      <!--          clearable-->
+      <!--          placeholder="请输入产品编码SN"-->
+      <!--          @keyup.enter="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <el-form-item label="产品名称" prop="productName">
+        <el-input
+          v-model="queryParams.productName"
+          clearable
+          placeholder="请输入产品名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="产品分类ID" prop="categoryId">
+        <el-input
+          v-model="queryParams.categoryId"
+          clearable
+          placeholder="请输入产品分类ID"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <!--      <el-form-item label="租户ID" prop="tenantId">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.tenantId"-->
+      <!--          clearable-->
+      <!--          placeholder="请输入租户ID"-->
+      <!--          @keyup.enter="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <!--      <el-form-item label="mqtt账号" prop="mqttAccount">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.mqttAccount"-->
+      <!--          clearable-->
+      <!--          placeholder="请输入mqtt账号"-->
+      <!--          @keyup.enter="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <!--      <el-form-item label="mqtt密码" prop="mqttPassword">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.mqttPassword"-->
+      <!--          clearable-->
+      <!--          placeholder="请输入mqtt密码"-->
+      <!--          @keyup.enter="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <!--      <el-form-item label="产品秘钥" prop="mqttSecret">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.mqttSecret"-->
+      <!--          clearable-->
+      <!--          placeholder="请输入产品秘钥"-->
+      <!--          @keyup.enter="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <!--      <el-form-item label="认证方式" prop="vertificateMethod">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.vertificateMethod"-->
+      <!--          clearable-->
+      <!--          placeholder="请输入认证方式"-->
+      <!--          @keyup.enter="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <!--      <el-form-item label="图片地址" prop="imgUrl">-->
+      <!--        <el-input-->
+      <!--          v-model="queryParams.imgUrl"-->
+      <!--          clearable-->
+      <!--          placeholder="请输入图片地址"-->
+      <!--          @keyup.enter="handleQuery"-->
+      <!--        />-->
+      <!--      </el-form-item>-->
+      <el-form-item>
+        <el-button icon="Search" type="primary" @click="handleQuery"
+        >搜索
+        </el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:add']"
+          icon="Plus"
+          plain
+          type="primary"
+          @click="handleAdd"
+        >新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:edit']"
+          :disabled="single"
+          icon="Edit"
+          plain
+          type="success"
+          @click="handleUpdate"
+        >修改
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:remove']"
+          :disabled="multiple"
+          icon="Delete"
+          plain
+          type="danger"
+          @click="handleDelete"
+        >删除
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['product:product:export']"
+          icon="Download"
+          plain
+          type="warning"
+          @click="handleExport"
+        >导出
+        </el-button>
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="productList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column align="center" type="selection" width="55" />
+      <el-table-column align="center" label="产品ID" prop="productId" />
+      <el-table-column align="center" label="产品编码SN" prop="productSn" />
+      <el-table-column align="center" label="产品名称" prop="productName" />
+      <el-table-column align="center" label="产品分类ID" prop="categoryId" />
+      <el-table-column align="center" label="租户ID" prop="tenantId" />
+      <el-table-column align="center" label="mqtt账号" prop="mqttAccount" />
+      <el-table-column align="center" label="mqtt密码" prop="mqttPassword" />
+      <el-table-column align="center" label="产品秘钥" prop="mqttSecret" />
+      <el-table-column align="center" label="状态" prop="status" />
+      <!--      <el-table-column align="center" label="物模型JSON" prop="thingsModelsJson" />-->
+      <el-table-column align="center" label="设备类型" prop="deviceType" />
+      <el-table-column
+        align="center"
+        label="认证方式"
+        prop="vertificateMethod"
+      />
+      <el-table-column align="center" label="图片地址" prop="imgUrl" />
+      <el-table-column align="center" label="备注" prop="remark" />
+      <el-table-column
+        align="center"
+        class-name="small-padding fixed-width"
+        label="操作"
+      >
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['product:product:edit']"
+            icon="Edit"
+            link
+            type="primary"
+            @click="handleUpdate(scope.row)"
+          >修改
+          </el-button>
+          <el-button
+            v-hasPermi="['product:product:remove']"
+            icon="Delete"
+            link
+            type="primary"
+            @click="handleDelete(scope.row)"
+          >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改产品对话框 -->
+    <el-dialog v-model="open" :title="title" append-to-body width="500px">
+      <el-form ref="productRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="产品编码SN" prop="productSn">
+          <el-input v-model="form.productSn" placeholder="请输入产品编码SN" />
+        </el-form-item>
+        <el-form-item label="产品名称" prop="productName">
+          <el-input v-model="form.productName" placeholder="请输入产品名称" />
+        </el-form-item>
+        <el-form-item label="产品分类ID" prop="categoryId">
+          <el-input v-model="form.categoryId" placeholder="请输入产品分类ID" />
+        </el-form-item>
+        <el-form-item label="租户ID" prop="tenantId">
+          <el-input v-model="form.tenantId" placeholder="请输入租户ID" />
+        </el-form-item>
+        <el-form-item label="mqtt账号" prop="mqttAccount">
+          <el-input v-model="form.mqttAccount" placeholder="请输入mqtt账号" />
+        </el-form-item>
+        <el-form-item label="mqtt密码" prop="mqttPassword">
+          <el-input v-model="form.mqttPassword" placeholder="请输入mqtt密码" />
+        </el-form-item>
+        <el-form-item label="产品秘钥" prop="mqttSecret">
+          <el-input v-model="form.mqttSecret" placeholder="请输入产品秘钥" />
+        </el-form-item>
+        <el-form-item label="认证方式" prop="vertificateMethod">
+          <el-input
+            v-model="form.vertificateMethod"
+            placeholder="请输入认证方式"
+          />
+        </el-form-item>
+        <el-form-item label="图片地址" prop="imgUrl">
+          <el-input v-model="form.imgUrl" placeholder="请输入图片地址" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            placeholder="请输入内容"
+            type="textarea"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script name="Product" setup>
+import { addProduct, delProduct, listProduct, updateProduct } from "@/api/product/product";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+const productList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    productSn: null,
+    productName: null,
+    categoryId: null,
+    tenantId: null,
+    mqttAccount: null,
+    mqttPassword: null,
+    mqttSecret: null,
+    status: null,
+    thingsModelsJson: null,
+    deviceType: null,
+    vertificateMethod: null,
+    imgUrl: null
+  },
+  rules: {
+    productName: [
+      { required: true, message: "产品名称不能为空", trigger: "blur" }
+    ],
+    categoryId: [
+      { required: true, message: "产品分类ID不能为空", trigger: "blur" }
+    ],
+    tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询产品列表 */
+function getList() {
+  loading.value = true;
+  listProduct(queryParams.value).then((response) => {
+    productList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    productId: null,
+    productSn: null,
+    productName: null,
+    categoryId: null,
+    tenantId: null,
+    mqttAccount: null,
+    mqttPassword: null,
+    mqttSecret: null,
+    status: null,
+    thingsModelsJson: null,
+    deviceType: null,
+    vertificateMethod: null,
+    imgUrl: null,
+    createBy: null,
+    createTime: null,
+    remark: null
+  };
+  proxy.resetForm("productRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.productId);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  // reset();
+  // open.value = true;
+  // title.value = "添加产品";
+  router.push({
+    path: "/produc/product/edit"
+  });
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  const _productId = row.productId;
+  router.push({
+    path: "/produc/product/edit",
+    query: {
+      productId: _productId,
+      pageNum: queryParams.value.pageNum
+    }
+  });
+  // getProduct(_productId).then(response => {
+  //   form.value = response.data;
+  //   open.value = true;
+  //   title.value = "修改产品";
+  // });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["productRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.productId != null) {
+        updateProduct(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addProduct(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _productIds = row.productId || ids.value;
+  proxy.$modal
+    .confirm("是否确认删除产品编号为\"" + _productIds + "\"的数据项？")
+    .then(function() {
+      return delProduct(_productIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {
+    });
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "product/product/export",
+    {
+      ...queryParams.value
+    },
+    `product_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>
+<style lang="scss" scoped>
+.card-item {
+  border-radius: 15px;
+}
+</style>