zc

src/api/iotDevice/index.js

@@ -45,7 +45,72 @@ export function iotTypeDetail(query) {
   })
 }
 
-//物联参数列表
+//物联分类-配置-属性列表
+export function iotAttributeList(data) {
+  return request({
+    url: '/iot/attribute/list',
+    method: 'post',
+    data: data
+  })
+}
+
+//物联分类-配置-属性新增
+export function iotAttributeAdd(data) {
+  return request({
+    url: '/iot/attribute/add',
+    method: 'post',
+    data: data
+  })
+}
+
+//物联分类-配置-属性编辑
+export function iotAttributeUpdate(data) {
+  return request({
+    url: '/iot/attribute/update',
+    method: 'post',
+    data: data
+  })
+}
+
+//物联分类-配置-属性删除
+export function iotAttributeDelete(data) {
+  return request({
+    url: '/iot/attribute/delete',
+    method: 'post',
+    data: data
+  })
+}
+
+//物联分类-配置-属性详情
+export function iotAttributeDetail(query) {
+  return request({
+    url: '/iot/attribute/detail',
+    method: 'get',
+    params: query
+  })
+}
+
+//物联分类-配置-属性上移
+export function iotAttributeMoveUp(data) {
+  return request({
+    url: '/iot/attribute/moveUp',
+    method: 'post',
+    data: data
+  })
+}
+
+//物联分类-配置-属性下移
+export function iotAttributeMoveDown(data) {
+  return request({
+    url: '/iot/attribute/moveDown',
+    method: 'post',
+    data: data
+  })
+}
+
+/***********分类配置*************/
+
+//分类配置列表
 export function iotParamList(data) {
   return request({
     url: '/iot/param/list',
@@ -54,7 +119,7 @@ export function iotParamList(data) {
   })
 }
 
-//物联参数添加
+//分类配置添加
 export function iotParamAdd(data) {
   return request({
     url: '/iot/param/add',
@@ -63,7 +128,7 @@ export function iotParamAdd(data) {
   })
 }
 
-//物联参数编辑
+//分类配置编辑
 export function iotParamUpdate(data) {
   return request({
     url: '/iot/param/update',
@@ -72,7 +137,7 @@ export function iotParamUpdate(data) {
   })
 }
 
-//物联参数删除
+//分类配置删除
 export function iotParamDelete(data) {
   return request({
     url: '/iot/param/delete',
@@ -81,7 +146,7 @@ export function iotParamDelete(data) {
   })
 }
 
-//物联参数详情
+//分类配置详情
 export function iotParamDetail(query) {
   return request({
     url: '/iot/param/detail',
@@ -90,7 +155,16 @@ export function iotParamDetail(query) {
   })
 }
 
-//物联参数展示
+//分类配置获取模型
+export function iotTypeTypeModelAndAttr(query) {
+  return request({
+    url: '/iot/type/typeModelAndAttr',
+    method: 'get',
+    params: query
+  })
+}
+
+//分类配置展示
 export function iotParamAll(data) {
   return request({
     url: '/iot/param/all',
@@ -98,6 +172,65 @@ export function iotParamAll(data) {
     data: data
   })
 }
+
+//分类配置上移
+export function iotParamMoveUp(data) {
+  return request({
+    url: '/iot/param/moveUp',
+    method: 'post',
+    data: data
+  })
+}
+//分类配置下移
+export function iotParamMoveDown(data) {
+  return request({
+    url: '/iot/param/moveDown',
+    method: 'post',
+    data: data
+  })
+}
+
+//分类配置字典列表
+export function iotParamValueList(data) {
+  return request({
+    url: '/iot/paramValue/list',
+    method: 'post',
+    data: data
+  })
+}
+//分类配置字典新增
+export function iotParamValueAdd(data) {
+  return request({
+    url: '/iot/paramValue/add',
+    method: 'post',
+    data: data
+  })
+}
+//分类配置字典编辑
+export function iotParamValueUpdate(data) {
+  return request({
+    url: '/iot/paramValue/update',
+    method: 'post',
+    data: data
+  })
+}
+//分类配置字典删除
+export function iotParamValueDelete(data) {
+  return request({
+    url: '/iot/paramValue/delete',
+    method: 'post',
+    data: data
+  })
+}
+//分类配置字典详情
+export function iotParamValueDetail(query) {
+  return request({
+    url: '/iot/paramValue/detail',
+    method: 'get',
+    params: query
+  })
+}
+
 /***********告警方式*************/
 //方式列表
 export function iotAlarmType(query) {
@@ -199,4 +332,3 @@ export function iotAlarmTemplateChangeState(data) {
   })
 }
 
-/***********分类配置*************/

src/views/iotDevice/intelligenceIot/classConfig/addPage.vue

@@ -0,0 +1,300 @@
+<template>
+  <div class="organizationalStructure-addPage">
+    <div class="title-box">
+      <el-form :model="queryParams" class="form-box" ref="queryForm"
+               :inline="true" style="width:100%;">
+        <el-form-item label="关键词" prop="searchValue" label-width="90px">
+          <el-input
+            maxLength="30"
+            v-model="queryParams.searchValue"
+            placeholder="请输入关键词"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="state ">
+          <el-select v-model="queryParams.state " clearable placeholder="请选择" style="width: 200px">
+            <el-option
+              v-for="dict in options"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+          <p class="reset-button-one" @click="resetQuery">重置</p>
+        </el-form-item>
+        <el-form-item label="" prop="title" style="float: right">
+          <el-col :span="1.5" style="margin-right:10px;">
+            <p class="reset-button-one" style="width:90px;"
+               @click="backPage"
+            >返回</p>
+          </el-col>
+        </el-form-item>
+        <el-form-item label="" prop="title" style="float: right">
+          <el-col :span="1.5" style="margin-right:10px;">
+            <p class="add-button-one-90"
+               @click="dialogOpen"
+            >新增</p>
+          </el-col>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="content-box">
+      <el-table v-loading="loading" border :data="dataList">
+        <el-table-column label="序号" type="index" align="center" width="50"/>
+        <el-table-column label="名称" align="left" prop="dictKey"/>
+        <el-table-column label="关联值" align="left" prop="dictValue" show-overflow-tooltip/>
+        <el-table-column label="排序" align="left" prop="sort" width="80"  show-overflow-tooltip/>
+        <el-table-column label="状态" align="left" prop="state" width="120"  show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.state?'启用':'停用'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="left" prop="createTime" width="180"  show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260">
+          <template slot-scope="scope">
+            <div class="table-button-box">
+              <p class="table-button-null"></p>
+              <p class="table-button-p"
+                 @click="tableButton(1,scope.row)"
+              >编辑</p>
+              <p class="table-button-p"
+                 @click="tableButton(2,scope.row)"
+              >删除</p>
+              <p class="table-button-null"></p>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]"
+                  v-show="total>0"
+                  :total="total"
+                  :page.sync="queryParams.page"
+                  :limit.sync="queryParams.pageSize"
+                  @pagination="getList"
+      />
+    </div>
+    <el-dialog class="classConfig-dialog" :title='dialogTitle' width="540px" append-to-body
+               :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
+               :close-on-click-modal="false" :close-on-press-escape="false">
+      <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="dialogRules" class="addCheckPage-min" label-width="80px">
+        <el-form-item label="名称" prop="dictKey">
+          <el-input v-model="dialogForm.dictKey" placeholder="请输入名称" maxLength="10" style="width:320px;"/>
+        </el-form-item>
+        <el-form-item label="关联值" prop="dictValue">
+          <el-input v-model="dialogForm.dictValue" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="dialogForm.sort" controls-position="right" :min="1" :max="9999" style="width:320px;"></el-input-number>
+        </el-form-item>
+        <el-form-item label="状态" prop="state">
+          <el-radio-group v-model="dialogForm.state" style="width:320px;">
+            <el-radio :label="true">启用</el-radio>
+            <el-radio :label="false">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
+        <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
+        <p class="dialog-footer-button-null"></p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { iotParamValueList,iotParamValueAdd,
+    iotParamValueUpdate,iotParamValueDelete,iotParamValueDetail } from "@/api/iotDevice/index";
+  export default {
+    name: 'addPage',
+    props:{
+      propsData:{},
+    },
+    data(){
+      return{
+        loading:false,
+        showType:false,
+        newData:{},
+        options:[{label:'启用',value:true},{label:'停用',value:false}],
+        queryParams:{
+          page:1,
+          pageSize:20,
+          searchValue:"",
+          state :null,
+        },
+        dataList:[],
+        total:0,
+        dialogTitle:null,
+        dialogType:false,
+        dialogForm:{},
+        dialogRules:{
+          dictKey: [
+            { required: true, message: "请输入名称", trigger: "blur" },
+            { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          dictValue: [
+            { required: true, message: "请输入关联值", trigger: "blur" },
+            { required: true, message: "请输入关联值", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          sort: [
+            { required: true, message: "请输入排序", trigger: "blur" },
+            { required: true, message: "请输入排序", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          state: [
+            { required: true, message: "请选择状态", trigger: "blur" },
+          ],
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.getList();
+    },
+    methods:{
+      // 返回按钮
+      backPage(){
+        this.$parent.tableButton(4);
+      },
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      resetQuery(){
+        this.$set(this,'queryParams',{
+          page:1,
+          pageSize:20,
+          searchValue:"",
+          state :null,
+        });
+        this.getList();
+      },
+      //获取数据列表
+      getList(){
+        this.$set(this,'loading',true);
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        obj.paramId = this.propsData.id;
+        iotParamValueList(obj).then(response => {
+          this.$set(this,'loading',false);
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        });
+      },
+      dialogFormReset(){
+        this.$set(this,'dialogForm',{
+          dictKey:'',
+          dictValue:'',
+          sort:1,
+          state:true,
+        });
+      },
+      //弹层关闭
+      dialogOff(){
+        this.$set(this,'dialogType',false);
+      },
+      //弹层开启
+      dialogOpen(){
+        this.dialogFormReset();
+        this.$set(this,'dialogTitle','新增');
+        this.$set(this,'dialogType',true);
+      },
+      //弹层确定
+      dialogSubmit(){
+        this.$refs["dialogForm"].validate(valid => {
+          if (valid) {
+            if(this.dialogForm.id){
+              let obj = {
+                paramId:this.propsData.id,
+                id:this.dialogForm.id,
+                dictKey:this.dialogForm.dictKey,
+                dictValue:this.dialogForm.dictValue,
+                sort:this.dialogForm.sort,
+                state:this.dialogForm.state,
+              }
+              iotParamValueUpdate(obj).then(response => {
+                this.msgSuccess(response.message);
+                this.getList();
+                this.$set(this,'dialogType',false);
+              });
+            }else{
+              let obj = {
+                paramId:this.propsData.id,
+                dictKey:this.dialogForm.dictKey,
+                dictValue:this.dialogForm.dictValue,
+                sort:this.dialogForm.sort,
+                state:this.dialogForm.state,
+              }
+              iotParamValueAdd(obj).then(response => {
+                this.msgSuccess(response.message);
+                this.getList();
+                this.$set(this,'dialogType',false);
+              });
+            }
+          }
+        })
+      },
+      tableButton(type,row){
+        let self = this;
+        if(type == 1){
+          //编辑
+          iotParamValueDetail({id:row.id}).then(response => {
+            this.dialogFormReset();
+            this.$set(this,'dialogTitle','编辑');
+            this.$set(this,'dialogForm',{
+              id:response.data.id,
+              dictKey:response.data.dictKey,
+              dictValue:response.data.dictValue,
+              sort:response.data.sort,
+              state:response.data.state,
+            });
+            this.$set(this,'dialogType',true);
+          });
+        }else if(type == 2){
+          //删除
+          this.$confirm('是否确认删除?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+          }).then(() => {
+            iotParamValueDelete({id:row.id}).then(response => {
+              self.msgSuccess(response.message)
+              self.getList();
+            });
+          }).catch(() => {});
+        }
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .organizationalStructure-addPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .title-box{
+      padding-top:20px;
+      border-bottom:1px solid #dedede;
+      display: flex;
+    }
+    .content-box{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding:20px;
+      overflow: hidden;
+    }
+  }
+</style>

src/views/iotDevice/intelligenceIot/classConfig/index.vue

@@ -1,91 +1,96 @@
 <!--分类配置-->
 <template>
   <div class="app-container classConfig">
-    <div class="title-box">
-      <el-form :model="queryParams" class="form-box" ref="queryForm"
-               :inline="true" style="width:100%;">
-        <el-form-item label="关键词" prop="searchValue " label-width="90px">
-          <el-input
-            maxLength="30"
-            v-model="queryParams.searchValue"
-            placeholder="请输入关键词"
-            clearable
-            style="width: 200px"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="state ">
-          <el-select v-model="queryParams.state " clearable placeholder="请选择" style="width: 200px">
-            <el-option
-              v-for="dict in options"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
+    <div class="classConfigPage" v-if="pageType == 1">
+      <div class="title-box">
+        <el-form :model="queryParams" class="form-box" ref="queryForm"
+                 :inline="true" style="width:100%;">
+          <el-form-item label="关键词" prop="searchValue " label-width="90px">
+            <el-input
+              maxLength="30"
+              v-model="queryParams.searchValue"
+              placeholder="请输入关键词"
+              clearable
+              style="width: 200px"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
-          <p class="reset-button-one" @click="resetQuery">重置</p>
-        </el-form-item>
-        <el-form-item label="" prop="title" style="float: right">
-          <el-col :span="1.5" style="margin-right:10px;">
-            <p class="add-button-one-90"
-               @click="dialogOpen"
-            >新增</p>
-          </el-col>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="content-box">
-      <el-table v-loading="loading" border :data="dataList">
-        <el-table-column label="标题" width="80" align="left" prop="label" />
-        <el-table-column label="字段" align="left" prop="field" show-overflow-tooltip/>
-        <el-table-column label="类型" align="left" prop="type" show-overflow-tooltip/>
-        <el-table-column label="数据类型" align="left" prop="dataType" show-overflow-tooltip/>
-        <el-table-column label="排序" align="left" prop="sort" show-overflow-tooltip/>
-        <el-table-column label="是否内置" align="left" prop="required" show-overflow-tooltip>
-          <template slot-scope="scope">{{scope.row.required?'是':'否'}}</template>
-        </el-table-column>
-        <el-table-column label="状态" align="left" prop="state" show-overflow-tooltip>
-          <template slot-scope="scope">{{scope.row.state?'启用':'停用'}}</template>
-        </el-table-column>
-        <el-table-column label="创建时间" align="left" prop="createTime" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260">
-          <template slot-scope="scope">
-            <div class="table-button-box">
-              <p class="table-button-null"></p>
-              <p class="table-button-p"
-                 @click="tableButton(1,scope.row)"
-              >上移</p>
-              <p class="table-button-p"
-                 @click="tableButton(2,scope.row)"
-              >下移</p>
-              <p class="table-button-p"
-                 @click="tableButton(3,scope.row)"
-              >编辑</p>
-              <p class="table-button-p"
-                 @click="tableButton(4,scope.row)"
-              >配置</p>
-              <p class="table-button-p"
-                 @click="tableButton(5,scope.row)"
-              >删除</p>
-              <p class="table-button-null"></p>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination :page-sizes="[20, 30, 40, 50]"
-                  v-show="total>0"
-                  :total="total"
-                  :page.sync="queryParams.page"
-                  :limit.sync="queryParams.pageSize"
-                  @pagination="getList"
-      />
+          </el-form-item>
+          <el-form-item label="状态" prop="state ">
+            <el-select v-model="queryParams.state " clearable placeholder="请选择" style="width: 200px">
+              <el-option
+                v-for="dict in options"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+            <p class="reset-button-one" @click="resetQuery">重置</p>
+          </el-form-item>
+          <el-form-item label="" prop="title" style="float: right">
+            <el-col :span="1.5" style="margin-right:10px;">
+              <p class="add-button-one-90"
+                 @click="dialogOpen"
+              >新增</p>
+            </el-col>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="content-box">
+        <el-table v-loading="loading" border :data="dataList">
+          <el-table-column label="标题" width="80" align="left" prop="label" />
+          <el-table-column label="字段" align="left" prop="field" show-overflow-tooltip/>
+          <el-table-column label="类型" align="left" prop="type" show-overflow-tooltip/>
+          <el-table-column label="数据类型" align="left" prop="dataType" show-overflow-tooltip/>
+          <el-table-column label="排序" align="left" prop="sort" show-overflow-tooltip/>
+          <el-table-column label="是否内置" align="left" prop="required" show-overflow-tooltip>
+            <template slot-scope="scope">{{scope.row.required?'是':'否'}}</template>
+          </el-table-column>
+          <el-table-column label="状态" align="left" prop="state" show-overflow-tooltip>
+            <template slot-scope="scope">{{scope.row.state?'启用':'停用'}}</template>
+          </el-table-column>
+          <el-table-column label="创建时间" align="left" prop="createTime" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260">
+            <template slot-scope="scope">
+              <div class="table-button-box">
+                <p class="table-button-null"></p>
+                <p class="table-button-p"
+                   @click="tableButton(1,scope.row)"
+                >编辑</p>
+                <p class="table-button-p"
+                   @click="tableButton(2,scope.row)"
+                >配置</p>
+                <p class="table-button-p"
+                   @click="tableButton(3,scope.row)"
+                >删除</p>
+                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
+                             v-hasPermiRouter="['demo:demo:move']">
+                  <p class="table-button-p">更多>></p>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="1">上移</el-dropdown-item>
+                    <el-dropdown-item command="2">下移</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+                <p class="table-button-null"></p>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <pagination :page-sizes="[20, 30, 40, 50]"
+                    v-show="total>0"
+                    :total="total"
+                    :page.sync="queryParams.page"
+                    :limit.sync="queryParams.pageSize"
+                    @pagination="getList"
+        />
+      </div>
     </div>
+    <add-page v-if="pageType == 2" :propsData="propsData"></add-page>
     <!--新增弹窗-->
     <el-dialog class="classConfig-dialog" :title='dialogTitle' width="540px" append-to-body
                :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
@@ -144,11 +149,16 @@
 </template>
 
 <script>
-  import { iotParamList,iotParamAdd,iotParamUpdate,iotParamDelete,iotParamDetail } from "@/api/iotDevice/index";
+  import { iotParamList,iotParamAdd,iotParamUpdate,iotParamDelete,iotParamDetail,iotParamMoveUp,iotParamMoveDown } from "@/api/iotDevice/index";
+  import addPage from "./addPage.vue";
   export default {
     name: 'index',
+    components: {
+      addPage
+    },
     data(){
       return{
+        pageType:1,
         loading:false,
         options:[{label:'启用',value:true},{label:'停用',value:false}],
         queryParams:{
@@ -190,10 +200,22 @@
         },
         classOption:[
           {label:'文本框',value:'text'},
-          {label:'下拉框',value:'select'},
-          {label:'单选框',value:'radiobox'},
-          {label:'复选框',value:'checkbox'},
+          {label:'文本域',value:'textarea'},
           {label:'密码框',value:'password'},
+          {label:'计数器',value:'number'},
+          {label:'单选下拉框',value:'select'},
+          {label:'多选下拉框',value:'selectMultiple'},
+          {label:'级联选择器',value:'cascader'},
+          {label:'单选框',value:'radio'},
+          {label:'复选框',value:'checkbox'},
+          {label:'开关',value:'switch'},
+          {label:'滑块',value:'slider'},
+          {label:'时间选择器',value:'timePicker'},
+          {label:'时间范围选择器',value:'timePickerRange'},
+          {label:'日期选择器',value:'datePicker'},
+          {label:'日期范围选择器',value:'datePickerRange'},
+          {label:'上传模块',value:'upload'},
+          {label:'颜色选择器',value:'colorPicker'},
         ],
         dataClassOption:[
           {label:'字符型',value:'string'},
@@ -201,6 +223,8 @@
           {label:'数字型',value:'int'},
           {label:'浮点型',value:'number'},
         ],
+        //组件传参
+        propsData:{},
       }
     },
     created(){
@@ -283,13 +307,25 @@
           this.$set(this,'total',response.data.total);
         });
       },
+      //更多按钮
+      handleCommand(val,row){
+        if(val == 1){
+          //部门上移动
+          iotParamMoveUp({id:row.id}).then(response => {
+            this.msgSuccess(response.message)
+            this.getList();
+          });
+        }else if(val == 2){
+          //部门下移动
+          iotParamMoveDown({id:row.id}).then(response => {
+            this.msgSuccess(response.message)
+            this.getList();
+          });
+        }
+      },
       tableButton(type,row){
         let self = this;
         if(type == 1){
-          //上移
-        }else if(type == 2){
-          //下移
-        }else if(type == 3){
           //编辑
           iotParamDetail({id:row.id}).then(response => {
             this.dialogFormReset();
@@ -297,9 +333,11 @@
             this.$set(this,'dialogForm',JSON.parse(JSON.stringify(response.data)));
             this.$set(this,'dialogType',true);
           });
-        }else if(type == 4){
+        }else if(type == 2){
           //配置
-        }else if(type == 5){
+          this.$set(this,'propsData',row);
+          this.$set(this,'pageType',2);
+        }else if(type == 3){
           //删除
           this.$confirm('是否确认删除?', "警告", {
             confirmButtonText: "确定",
@@ -312,6 +350,10 @@
               self.getList();
             });
           }).catch(() => {});
+        }else if (type == 4){
+          //返回并刷新
+          this.$set(this,'pageType',1);
+          self.getList();
         }
       },
     },
@@ -323,17 +365,24 @@
     flex:1;
     display: flex;
     flex-direction: column;
-    .title-box{
-      padding-top:20px;
-      border-bottom:1px solid #dedede;
-      display: flex;
-    }
-    .content-box{
-      flex: 1;
+    overflow: hidden;
+    .classConfigPage{
+      flex:1;
       display: flex;
       flex-direction: column;
-      padding:20px;
       overflow: hidden;
+      .title-box{
+        padding-top:20px;
+        border-bottom:1px solid #dedede;
+        display: flex;
+      }
+      .content-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding:20px;
+        overflow: hidden;
+      }
     }
   }
 </style>

src/views/iotDevice/intelligenceIot/iotClassification/index.vue

@@ -280,10 +280,12 @@
   flex:1;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   .iotClassification-page{
     flex:1;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
     .title-box{
       padding-top:20px;
       border-bottom:1px solid #dedede;

src/views/iotDevice/intelligenceIot/iotClassification/infoPage.vue

@@ -32,69 +32,324 @@
           <p></p>
         </div>
       </div>
-      <div class="for-form-max-box" v-if="tableType == 1">
-        <el-form :model="infoPageForm" class="form-box" ref="queryForm"
-                 :inline="true" style="width:100%;">
-          <div class="for-form-box">
-            <div>
-              <el-form-item label="设备名称：" prop="searchValue " label-width="180px">
-                <el-input
-                  maxLength="20"
-                  v-model="infoPageForm.searchValue"
-                  placeholder="请输入设备名称"
-                  clearable
-                  style="width: 160px"
-                />
-              </el-form-item>
-              <el-form-item label="" prop="searchValue " label-width="0">
-                <el-checkbox-group v-model="infoPageForm">
-                  <el-checkbox label="选择" style="margin:2px 10px 0 10px;"></el-checkbox>
-                  <el-checkbox label="必填项" style="margin-top:2px;"></el-checkbox>
-                </el-checkbox-group>
-              </el-form-item>
+      <div class="for-form-max-box scrollbar-box" v-if="tableType == 1">
+        <div class="for-form-box" v-for="(item,index) in modelData" :key="index">
+          <div class="item-content-box">
+            <p class="item-title-p" :class="item.isSelect || item.required ? 'item-title-check' : ''">{{item.label}}</p>
+            <p class="item-examples-title-p">{{item.typeName}}:</p>
+            <div class="item-examples-box">
+              <el-input class="item-examples-demo" v-if="item.type == 'text'" placeholder="请输入"
+                        maxLength='10' v-model="item.demoValue">
+              </el-input>
+              <el-input class="item-examples-demo" v-if="item.type == 'textarea'" placeholder="请输入"
+                        maxLength='50' type="textarea" resize="none" v-model="item.demoValue" show-word-limit :autosize="{ minRows: 2, maxRows: 4}">
+              </el-input>
+              <el-input class="item-examples-demo" v-if="item.type == 'password'" placeholder="请输入"
+                        maxLength='10' v-model="item.demoValue" show-password>
+              </el-input>
+              <el-input-number class="item-examples-demo" v-if="item.type == 'number'" v-model="item.demoValue"
+                               controls-position="right" :min="1" :max="10">
+              </el-input-number>
+              <el-select class="item-examples-demo" v-if="item.type == 'select'"
+                         v-model="item.demoValue" placeholder="请选择">
+                <el-option key="1" label="单选下拉框示例" value="1"></el-option>
+              </el-select>
+              <el-select class="item-examples-demo" v-if="item.type == 'selectMultiple'"
+                         v-model="item.demoValue" placeholder="请选择"
+                         multiple collapse-tags>
+                <el-option key="1" label="单选下拉框示例-1" value="1"></el-option>
+                <el-option key="2" label="单选下拉框示例-2" value="2"></el-option>
+              </el-select>
+              <el-cascader class="item-examples-demo" v-if="item.type == 'cascader'"
+                v-model="item.demoValue"
+                placeholder="请选择"
+                :options="[{value:'1',label:'级联选择器示例-1',},{value:'2',label:'级联选择器示例-2',children:[{value:'2-1',label:'级联选择器示例-2.1'}]},{value:'3',label:'级联选择器示例-3',children:[{value:'3-1',label:'级联选择器示例-3.1',children:[{value:'3-1-1',label:'级联选择器示例-3.1.1'}]}]}]">
+              </el-cascader>
+              <el-radio-group v-model="item.demoValue" class="item-examples-demo" style="margin-top:12px;" v-if="item.type == 'radio'">
+                <el-radio :label="3">单选框示例-1</el-radio>
+                <el-radio :label="6">单选框示例-2</el-radio>
+              </el-radio-group>
+              <el-checkbox-group v-model="item.demoValue" class="item-examples-demo" style="margin-top:12px;" v-if="item.type == 'checkbox'">
+                <el-checkbox label="复选框示例-1"></el-checkbox>
+                <el-checkbox label="复选框示例-2"></el-checkbox>
+              </el-checkbox-group>
+              <el-switch class="item-examples-demo" v-if="item.type == 'switch'"
+                :active-value="true"
+                :inactive-value="false"
+                active-color="#0183FA"
+                inactive-color="#999"
+                v-model="item.demoValue"
+                active-text="启用"
+                inactive-text="停用"
+              ></el-switch>
             </div>
-          </div>
-          <div class="for-form-box">
-            <div>
-              <el-form-item label="设备编号：" prop="searchValue " label-width="180px">
-                <el-input
-                  maxLength="20"
-                  v-model="infoPageForm.searchValue"
-                  placeholder="请输入设备编号"
-                  clearable
-                  style="width: 160px"
-                />
-              </el-form-item>
-              <el-form-item label="" prop="searchValue " label-width="0">
-                <el-checkbox-group v-model="infoPageForm">
-                  <el-checkbox label="选择" style="margin:2px 10px 0 10px;"></el-checkbox>
-                  <el-checkbox label="必填项" style="margin-top:2px;"></el-checkbox>
-                </el-checkbox-group>
-              </el-form-item>
+            <div class="item-radio-max-box">
+              <div @click="checkItem(item,index,'isSelect')">
+                <p :class="item.isSelect?'check-p-one':''"
+                   class="el-icon-check"></p>
+                <p :class="item.isSelect?'check-p-two':''">选择</p>
+              </div>
+              <div @click="checkItem(item,index,'required')">
+                <p :class="item.required?'check-p-one':''"
+                   class="el-icon-check"></p>
+                <p :class="item.required?'check-p-two':''">必填项</p>
+              </div>
             </div>
           </div>
-        </el-form>
+        </div>
+      </div>
+      <div class="table-max-box" v-if="tableType == 2">
+        <div class="table-title-box">
+          <el-form :model="queryParams" class="form-box" ref="queryForm"
+                   :inline="true" style="width:100%;">
+            <el-form-item label="关键词" prop="searchValue " label-width="90px">
+              <el-input
+                maxLength="30"
+                v-model="queryParams.searchValue"
+                placeholder="请输入关键词"
+                clearable
+                style="width: 200px"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="state ">
+              <el-select v-model="queryParams.state " clearable placeholder="请选择" style="width: 200px">
+                <el-option
+                  v-for="dict in options"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+              <p class="reset-button-one" @click="resetQuery">重置</p>
+            </el-form-item>
+            <el-form-item label="" prop="title" style="float: right">
+              <el-col :span="1.5" style="margin-right:10px;">
+                <p class="add-button-one-90"
+                   @click="dialogOpen"
+                >新增</p>
+              </el-col>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="table-content-box">
+          <el-table v-loading="loading" border :data="dataList">
+            <el-table-column label="名称" align="left" prop="name" show-overflow-tooltip/>
+            <el-table-column label="标识" align="left" prop="code" width="200" show-overflow-tooltip/>
+            <el-table-column label="正常icon" align="left" prop="icon" width="100" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <img :src="scope.row.icon">
+              </template>
+            </el-table-column>
+            <el-table-column label="异常icon" align="left" prop="exceptionIcon" width="100" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <img :src="scope.row.exceptionIcon">
+              </template>
+            </el-table-column>
+            <el-table-column label="属性" align="left" prop="attrName" show-overflow-tooltip/>
+            <el-table-column label="单位" align="left" prop="unit" width="100" show-overflow-tooltip/>
+            <el-table-column label="排序" align="left" prop="sort" width="80" show-overflow-tooltip/>
+            <el-table-column label="状态" align="left" prop="state" width="100" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <el-switch
+                  @click.native="tableButton(3,scope.row)"
+                  class="switch captcha-img"
+                  :active-value="true"
+                  :inactive-value="false"
+                  active-color="#0183FA"
+                  inactive-color="#999"
+                  v-model="scope.row.state"
+                  active-text="启用"
+                  inactive-text="停用"
+                  disabled
+                ></el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="left" prop="createTime" width="200" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <span>{{ parseTime(scope.row.createTime) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260">
+              <template slot-scope="scope">
+                <div class="table-button-box">
+                  <p class="table-button-null"></p>
+                  <p class="table-button-p"
+                     @click="tableButton(1,scope.row)"
+                  >编辑</p>
+                  <p class="table-button-p"
+                     @click="tableButton(2,scope.row)"
+                  >删除</p>
+                  <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
+                               v-hasPermiRouter="['demo:demo:move']">
+                    <p class="table-button-p">更多>></p>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item command="1">上移</el-dropdown-item>
+                      <el-dropdown-item command="2">下移</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                  <p class="table-button-null"></p>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination :page-sizes="[20, 30, 40, 50]"
+                      v-show="total>0"
+                      :total="total"
+                      :page.sync="queryParams.page"
+                      :limit.sync="queryParams.pageSize"
+                      @pagination="getList"
+          />
+        </div>
       </div>
-      <listPage v-if="tableType == 2" :propsData="propsData"></listPage>
     </div>
+    <!--新增弹窗-->
+    <el-dialog class="iotClassification-dialog" :title='dialogTitle' width="540px" append-to-body
+               :visible.sync="dialogType" v-if="dialogType" @close="dialogOff()"
+               :close-on-click-modal="false" :close-on-press-escape="false">
+      <el-form :model="dialogForm" ref="dialogForm" :inline="true" :rules="dialogRules" class="addCheckPage-min" label-width="80px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="dialogForm.name" placeholder="请输入名称" maxLength="10" style="width:320px;"/>
+        </el-form-item>
+        <el-form-item label="标识" prop="code">
+          <el-input v-model="dialogForm.code" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
+        </el-form-item>
+        <el-form-item label="属性" prop="attrName">
+          <el-input v-model="dialogForm.attrName" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
+        </el-form-item>
+        <el-form-item label="单位" prop="unit">
+          <el-input v-model="dialogForm.unit" placeholder="请输入标识" maxLength="20" style="width:320px;"/>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="dialogForm.sort" controls-position="right" :min="1" :max="9999" style="width:320px;"></el-input-number>
+        </el-form-item>
+        <el-form-item label="正常icon" prop="icon">
+          <el-upload
+            style="width:320px;"
+            class="iotClassification-dialog-upload"
+            :action="uploadImgUrl"
+            :show-file-list="false"
+            :on-success="(res)=>handleAvatarSuccess(res,'icon')"
+            :headers="headers"
+            :before-upload="(file)=>beforeAvatarUpload(file)">
+            <div class="center-img" style="margin-left:20px;">
+              <img v-if="dialogForm.icon" :src="dialogForm.icon" style="max-width:40px;max-height:40px;">
+              <p v-if="!dialogForm.icon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#0183FA;"></p>
+            </div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="异常icon" prop="exceptionIcon">
+          <el-upload
+            style="width:320px;"
+            class="iotClassification-dialog-upload"
+            :action="uploadImgUrl"
+            :show-file-list="false"
+            :on-success="(res)=>handleAvatarSuccess(res,'exceptionIcon')"
+            :headers="headers"
+            :before-upload="(file)=>beforeAvatarUpload(file)">
+            <div class="center-img" style="margin-left:20px;">
+              <img v-if="dialogForm.exceptionIcon" :src="dialogForm.exceptionIcon" style="max-width:40px;max-height:40px;">
+              <p v-if="!dialogForm.exceptionIcon" class="el-icon-upload" style="text-align: center;line-height:40px;font-size:30px;color:#E65D6E;"></p>
+            </div>
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-info" @click="dialogOff()">取消</p>
+        <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
+        <p class="dialog-footer-button-null"></p>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-  import listPage from "./listPage.vue"
+  import { getToken } from "@/utils/auth";
+  import { iotTypeTypeModelAndAttr,iotAttributeList,iotAttributeAdd,
+    iotAttributeUpdate,iotAttributeDelete,iotAttributeDetail,
+    iotAttributeMoveUp,iotAttributeMoveDown  } from "@/api/iotDevice/index";
   export default {
     name: 'infoPage',
-    components: {
-      listPage
-    },
     props:{
       propsData:{},
     },
     data(){
       return{
+        classOption:[
+          {label:'文本框',value:'text'},
+          {label:'文本域',value:'textarea'},
+          {label:'密码框',value:'password'},
+          {label:'计数器',value:'number'},
+          {label:'单选下拉框',value:'select'},
+          {label:'多选下拉框',value:'selectMultiple'},
+          {label:'级联选择器',value:'cascader'},
+          {label:'单选框',value:'radio'},
+          {label:'复选框',value:'checkbox'},
+          {label:'开关',value:'switch'},
+          {label:'滑块',value:'slider'},
+          {label:'时间选择器',value:'timePicker'},
+          {label:'时间范围选择器',value:'timePickerRange'},
+          {label:'日期选择器',value:'datePicker'},
+          {label:'日期范围选择器',value:'datePickerRange'},
+          {label:'上传模块',value:'upload'},
+          {label:'颜色选择器',value:'colorPicker'},
+        ],
+        //上传相关
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        headers: {
+          Authorization:getToken(),
+        },
         tableType:1,
-        infoPageForm:{
-
+        loading:false,
+        options:[{label:'启用',value:true},{label:'停用',value:false}],
+        queryParams:{
+          id:this.propsData.typeId,
+          page:1,
+          pageSize:20,
+          searchValue:"",
+          state :null,
+        },
+        dataList:[],
+        total:0,
+        //模型
+        modelData:[],
+        //弹层
+        dialogTitle:null,
+        dialogType:false,
+        dialogForm:{
+          name:"",
+          code:"",
+          attrName:"",
+          unit:"",
+          icon:"",
+          exceptionIcon:"",
+          sort:1,
+          state:true,
+        },
+        dialogRules:{
+          name: [
+            { required: true, message: "请输入名称", trigger: "blur" },
+            { required: true, message: "请输入名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          code: [
+            { required: true, message: "请输入标识", trigger: "blur" },
+            { required: true, message: "请输入标识", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          attrName: [
+            { required: true, message: "请输入属性", trigger: "blur" },
+            { required: true, message: "请输入属性", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          unit: [
+            { required: true, message: "请输入单位", trigger: "blur" },
+            { required: true, message: "请输入单位", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          sort: [
+            { required: true, message: "请输入排序", trigger: "blur" },
+            { required: true, message: "请输入排序", validator: this.spaceJudgment, trigger: "blur" }
+          ],
         },
       }
     },
@@ -102,19 +357,234 @@
 
     },
     mounted(){
-
+      this.initialize();
     },
     methods:{
+      initialize(){
+        let self = this;
+        //模型
+        iotTypeTypeModelAndAttr({id:this.propsData.typeId}).then(response => {
+          for(let i=0;i<response.data.model.length;i++){
+            if(response.data.model[i].type == 'checkbox' || response.data.model[i].type == 'timePickerRange' || response.data.model[i].type == 'datePickerRange'){
+              response.data.model[i].demoValue = [];
+            }else{
+              response.data.model[i].demoValue = null;
+            }
+            for(let o=0;o<self.classOption.length;o++){
+              if(response.data.model[i].type == self.classOption[o].value){
+                response.data.model[i].typeName = self.classOption[o].label+'示例';
+              }
+            }
+          }
+          this.$set(this,'modelData',response.data.model);
+        });
+        this.getList();
+      },
       //table切换
       tableClick(type){
         if(type != this.tableType){
           this.$set(this,'tableType',type);
         }
       },
+      //选中切换
+      checkItem(item,index,type){
+        if(type == 'isSelect'){
+          this.$set(this.modelData[index],'required',item.isSelect?false:item.required);
+          this.$set(this.modelData[index],'isSelect',!item.isSelect);
+        }else if(type == 'required'){
+          this.$set(this.modelData[index],'isSelect',item.required?item.isSelect:true);
+          this.$set(this.modelData[index],'required',!item.required);
+        }
+      },
+      /***************属性列表**************/
+      //属性
+      getList(){
+        let obj = JSON.parse(JSON.stringify(this.queryParams))
+        iotAttributeList(obj).then(response => {
+          this.$set(this,'dataList',response.data.records);
+          this.$set(this,'total',response.data.total);
+        });
+      },
       //返回按钮
       outButton(){
         this.$parent.tableButton('out')
       },
+      //弹层关闭
+      dialogOff(){
+        this.$set(this,'dialogType',false);
+      },
+      //弹层开启
+      dialogOpen(){
+        this.dialogFormReset();
+        this.$set(this,'dialogTitle','新增');
+        this.$set(this,'dialogType',true);
+      },
+      dialogFormReset(){
+        this.$set(this,'dialogForm',{
+          name:"",
+          code:"",
+          attrName:"",
+          unit:"",
+          icon:"",
+          exceptionIcon:"",
+          sort:1,
+          state:true,
+        });
+      },
+      //dialog提交按钮
+      dialogSubmit(){
+        this.$refs["dialogForm"].validate(valid => {
+          if (valid) {
+            let obj = {
+              typeId:this.propsData.typeId,
+              typeKey:this.propsData.typeKey,
+              name:this.dialogForm.name,
+              code:this.dialogForm.code,
+              attrName:this.dialogForm.attrName,
+              unit:this.dialogForm.unit,
+              sort:this.dialogForm.sort,
+              icon:this.dialogForm.icon,
+              exceptionIcon:this.dialogForm.exceptionIcon,
+            }
+            if(this.dialogForm.id){
+              obj.id = this.dialogForm.id;
+              iotAttributeUpdate(obj).then(response => {
+                this.msgSuccess(response.message)
+                this.dialogOff();
+                this.getList();
+              });
+            }else{
+              iotAttributeAdd(obj).then(response => {
+                this.msgSuccess(response.message)
+                this.dialogOff();
+                this.getList();
+              });
+            }
+          }
+        })
+      },
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
+      },
+      resetQuery(){
+        this.$set(this,'queryParams',{
+          id:this.propsData.typeId,
+          page:1,
+          pageSize:20,
+          searchValue:"",
+          state :null,
+        });
+        this.getList();
+      },
+      //按钮
+      tableButton(type,row){
+        let self = this;
+        if(type == 1){
+          //编辑
+          let obj = {
+            id:row.id,
+            name:row.name,
+            code:row.code,
+            attrName:row.attrName,
+            unit:row.unit,
+            sort:row.sort,
+            icon:row.icon,
+            exceptionIcon:row.exceptionIcon,
+            state:row.state,
+          }
+          this.$set(this,'dialogForm',obj);
+          this.$set(this,'dialogTitle','编辑');
+          this.$set(this,'dialogType',true);
+        }else if(type == 2){
+          //删除
+          this.$confirm('是否确认删除?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+          }).then(() => {
+            iotAttributeDelete({id:row.id}).then(response => {
+              self.msgSuccess(response.message)
+              self.getList();
+            });
+          }).catch(() => {});
+        }else if(type == 3){
+          let text = row.state  ? "停用" : "启用";
+          this.$confirm('是否确认' + text + '?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+          }).then(() => {
+            let obj = {
+              typeId:this.propsData.typeId,
+              typeKey:this.propsData.typeKey,
+              id:row.id,
+              name:row.name,
+              code:row.code,
+              attrName:row.attrName,
+              unit:row.unit,
+              sort:row.sort,
+              icon:row.icon,
+              exceptionIcon:row.exceptionIcon,
+              state:!row.state,
+            }
+            iotAttributeUpdate(obj).then(response => {
+              self.msgSuccess(response.message)
+              self.getList();
+            });
+          }).catch(() => {});
+        }
+      },
+      //更多按钮
+      handleCommand(val,row){
+        if(val == 1){
+          //部门上移动
+          iotAttributeMoveUp({id:row.id}).then(response => {
+            this.msgSuccess(response.message)
+            this.getList();
+          });
+        }else if(val == 2){
+          //部门下移动
+          iotAttributeMoveDown({id:row.id}).then(response => {
+            this.msgSuccess(response.message)
+            this.getList();
+          });
+        }
+      },
+      //图片上传相关
+      handleAvatarSuccess(res,type) {
+        if(type == 'icon'){
+          this.$set(this.dialogForm,'icon',res.data.url);
+        }else if(type == 'exceptionIcon'){
+          this.$set(this.dialogForm,'exceptionIcon',res.data.url);
+        }
+      },
+      beforeAvatarUpload(file) {
+        return new Promise((resolve, reject) => {
+          if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
+            let reader = new FileReader()
+            reader.readAsDataURL(file) // 必须用file.raw
+            reader.onload = e => { // 让页面中的img标签的src指向读取的路径
+              let img = e.target.result;
+              const image = new Image()
+              image.src=img
+              image.onload = _=>{
+                if(image.width <= 200 && image.height <= 200){
+                  resolve()
+                }else{
+                  this.$message.error('最大尺寸不可超过200px*200px')
+                  reject();
+                }
+              }
+            }
+          }else{
+            this.$message.error('只能上传png/jpeg/gif格式图片');
+            reject();
+          }
+        })
+      },
     },
   }
 </script>
@@ -124,12 +594,14 @@
     flex:1;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
     .title-box{
       display: flex;
       height:80px;
       border-bottom:1px solid #dedede;
       p:nth-child(1){
         flex:1;
+        overflow: hidden;
         line-height:80px;
         margin-left:20px;
         color:#0045AF;
@@ -142,6 +614,7 @@
       flex:1;
       display: flex;
       flex-direction: column;
+      overflow: hidden;
       .text-box{
         display: flex;
         div{
@@ -190,15 +663,98 @@
         }
       }
       .for-form-max-box{
+        flex:1;
+        padding-bottom:26px;
         .for-form-box{
           display: inline-block;
           overflow: hidden;
-          margin-top:20px;
-          div{
+          border:1px solid #dedede;
+          border-radius:6px;
+          width:360px;
+          height:200px;
+          margin:26px 0 0 26px;
+          /*-webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);*/
+          .item-content-box{
+            height:100%;
             display: flex;
+            flex-direction: column;
+            .item-title-p{
+              text-align: center;
+              font-size:16px;
+              line-height:40px;
+              color: #333;
+              background-color: #dedede;
+            }
+            .item-title-check{
+              color: #fff;
+              background-color: #0183FA;
+            }
+            .item-examples-title-p{
+              line-height:45px;
+              font-size:14px;
+              color:#666;
+              padding-left:20px;
+            }
+            .item-examples-box{
+              flex:1;
+              .item-examples-demo{
+                width:300px;
+                height:40px;
+                margin:0 29px 0;
+              }
+            }
+            .item-radio-max-box{
+              border-top:1px solid #dedede;
+              display: flex;
+              div{
+                display: flex;
+                cursor: pointer;
+                p{
+                  text-align: center;
+                  line-height: 20px;
+                }
+                p:nth-child(1){
+                  margin:9px 10px 9px 80px;
+                  width:20px;
+                  height:20px;
+                  border:1px solid #dedede;
+                  border-radius:2px;
+                  color:#dedede;
+                }
+                p:nth-child(2){
+                  margin:9px 0;
+                  font-size:14px;
+                  color:#333;
+                }
+                .check-p-one{
+                  border:1px solid #0183FA!important;
+                  color:#fff!important;
+                  background-color:#0183FA!important;
+                }
+                .check-p-two{
+                  color:#0183FA!important;
+                }
+              }
+            }
           }
         }
       }
+      .table-max-box{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .table-title-box{
+          margin-top:20px;
+        }
+        .table-content-box{
+          flex:1;
+          margin:0 20px 20px;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+      }
     }
   }
 </style>

src/views/iotDevice/intelligenceIot/iotClassification/listPage.vue

@@ -1,188 +0,0 @@
-<template>
-  <div class="iotClassification-listPage">
-    <div class="title-box">
-      <el-form :model="queryParams" class="form-box" ref="queryForm"
-               :inline="true" style="width:100%;">
-        <el-form-item label="关键词" prop="searchValue " label-width="90px">
-          <el-input
-            maxLength="30"
-            v-model="queryParams.searchValue"
-            placeholder="请输入关键词"
-            clearable
-            style="width: 200px"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="state ">
-          <el-select v-model="queryParams.state " clearable placeholder="请选择" style="width: 200px">
-            <el-option
-              v-for="dict in options"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
-          <p class="reset-button-one" @click="resetQuery">重置</p>
-        </el-form-item>
-        <el-form-item label="" prop="title" style="float: right">
-          <el-col :span="1.5" style="margin-right:10px;">
-            <p class="add-button-one-90"
-               @click="dialogOpen"
-            >新增</p>
-          </el-col>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="content-box">
-      <el-table v-loading="loading" border :data="dataList">
-        <el-table-column label="标题" width="80" align="left" prop="label" />
-        <el-table-column label="字段" align="left" prop="field" show-overflow-tooltip/>
-        <el-table-column label="类型" align="left" prop="type" show-overflow-tooltip/>
-        <el-table-column label="数据类型" align="left" prop="dataType" show-overflow-tooltip/>
-        <el-table-column label="排序" align="left" prop="sort" show-overflow-tooltip/>
-        <el-table-column label="是否内置" align="left" prop="required" show-overflow-tooltip>
-          <template slot-scope="scope">{{scope.row.required?'是':'否'}}</template>
-        </el-table-column>
-        <el-table-column label="状态" align="left" prop="state" show-overflow-tooltip>
-          <template slot-scope="scope">{{scope.row.state?'启用':'停用'}}</template>
-        </el-table-column>
-        <el-table-column label="创建时间" align="left" prop="createTime" show-overflow-tooltip>
-          <template slot-scope="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="260">
-          <template slot-scope="scope">
-            <div class="table-button-box">
-              <p class="table-button-null"></p>
-              <p class="table-button-p"
-                 @click="tableButton(1,scope.row)"
-              >上移</p>
-              <p class="table-button-p"
-                 @click="tableButton(2,scope.row)"
-              >下移</p>
-              <p class="table-button-p"
-                 @click="tableButton(3,scope.row)"
-              >编辑</p>
-              <p class="table-button-p"
-                 @click="tableButton(4,scope.row)"
-              >配置</p>
-              <p class="table-button-p"
-                 @click="tableButton(5,scope.row)"
-              >删除</p>
-              <p class="table-button-null"></p>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination :page-sizes="[20, 30, 40, 50]"
-                  v-show="total>0"
-                  :total="total"
-                  :page.sync="queryParams.page"
-                  :limit.sync="queryParams.pageSize"
-                  @pagination="getList"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'listPage',
-    data(){
-      return{
-        loading:false,
-        options:[{label:'启用',value:true},{label:'停用',value:false}],
-        queryParams:{
-          page:1,
-          pageSize:20,
-          searchValue :"",
-          state :null,
-        },
-        dataList:[],
-        total:0,
-      }
-    },
-    created(){
-
-    },
-    mounted(){
-
-    },
-    methods:{
-      //弹层开启
-      dialogOpen(){
-        this.dialogFormReset();
-        this.$set(this,'dialogTitle','新增');
-        this.$set(this,'dialogType',true);
-      },
-      handleQuery(){
-        this.$set(this.queryParams,'page',1);
-        this.getList();
-      },
-      resetQuery(){
-        this.$set(this,'queryParams',{
-          page:1,
-          pageSize:20,
-          searchValue :"",
-          state :null,
-        });
-        this.getList();
-      },
-      getList(){
-
-      },
-      tableButton(type,row){
-        let self = this;
-        if(type == 2){
-          //详情
-          this.$set(this,'propsData',JSON.parse(JSON.stringify(row)));
-          this.$set(this,'pageType',2);
-        }else if(type == 3){
-          //编辑
-          iotTypeDetail({id:row.typeId}).then(response => {
-            this.dialogFormReset();
-            this.$set(this,'dialogForm',JSON.parse(JSON.stringify(response.data)));
-            this.$set(this,'dialogType',true);
-          });
-        }else if(type == 4){
-          //删除
-          this.$confirm('是否确认删除?', "警告", {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "warning"
-          }).then(function() {
-          }).then(() => {
-            iotTypeDelete({typeId:row.typeId}).then(response => {
-              self.msgSuccess(response.message)
-              self.getList();
-            });
-          }).catch(() => {});
-        }else if(type == 'out'){
-          this.$set(this,'pageType',1);
-        }
-      },
-    }
-  }
-</script>
-
-<style scoped lang="scss">
-  .iotClassification-listPage{
-    flex:1;
-    display: flex;
-    flex-direction: column;
-    .title-box{
-      padding-top:20px;
-      display: flex;
-    }
-    .content-box{
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      padding:0 20px 20px;
-      overflow: hidden;
-    }
-  }
-</style>