增加设备设置页面

src/views/system/device/index.vue

@@ -2,92 +2,39 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="设备标识ID" prop="deviceId">
-        <el-input
-          v-model="queryParams.deviceId"
-          placeholder="请输入设备标识ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.deviceId" placeholder="请输入设备标识ID" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="设备型号" prop="deviceModel">
-        <el-input
-          v-model="queryParams.deviceModel"
-          placeholder="请输入设备型号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.deviceModel" placeholder="请输入设备型号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="身份证号码" prop="sfzid">
-        <el-input
-          v-model="queryParams.sfzid"
-          placeholder="请输入身份证号码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.sfzid" placeholder="请输入身份证号码" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="手机号" prop="telno">
-        <el-input
-          v-model="queryParams.telno"
-          placeholder="请输入手机号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.telno" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="工厂" prop="factory">
-        <el-input
-          v-model="queryParams.factory"
-          placeholder="请输入工厂"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.factory" placeholder="请输入工厂" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
 
 
       <el-form-item label="SIM卡号" prop="simCode">
-        <el-input
-          v-model="queryParams.simCode"
-          placeholder="请输入SIM卡号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.simCode" placeholder="请输入SIM卡号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="设备序列号" prop="serialNumber">
-        <el-input
-          v-model="queryParams.serialNumber"
-          placeholder="请输入设备序列号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.serialNumber" placeholder="请输入设备序列号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="销售价格" prop="price">
-        <el-input
-          v-model="queryParams.price"
-          placeholder="请输入销售价格"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.price" placeholder="请输入销售价格" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="服务费用" prop="cost">
-        <el-input
-          v-model="queryParams.cost"
-          placeholder="请输入服务费用"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.cost" placeholder="请输入服务费用" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="支付方式" prop="payment">
-        <el-input
-          v-model="queryParams.payment"
-          placeholder="请输入支付方式"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.payment" placeholder="请输入支付方式" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker clearable
-          v-model="queryParams.createTime"
-          type="date"
-          value-format="yyyy-MM-dd"
+        <el-date-picker clearable v-model="queryParams.createTime" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择创建时间">
         </el-date-picker>
       </el-form-item>
@@ -99,46 +46,20 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:device:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['system:device:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:device:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['system:device:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:device:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['system:device:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:device:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['system:device:export']">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -166,31 +87,29 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:device:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:device:remove']"
-          >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:device:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['system:device:remove']">删除</el-button>
+          <el-dropdown trigger="click" @command="openSetting">
+            <span class="el-dropdown-link" style="color: #409EFF;">
+              更多<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="settingOpen">设备设置</el-dropdown-item>
+              <el-dropdown-item>健康阈值设置</el-dropdown-item>
+              <el-dropdown-item>电子围栏</el-dropdown-item>
+              <el-dropdown-item>健康指标</el-dropdown-item>
+              <el-dropdown-item>设备消息日志</el-dropdown-item>
+              <el-dropdown-item>设置日志</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改设备列对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -256,7 +175,7 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="5">
-          <el-menu default-active="sos" @select="openSetting">
+          <el-menu default-active="sos" @select="selectSetting">
             <el-menu-item v-for="i in menuInfo" :key="i.dictValue" :index="i.dictValue">{{ i.dictLabel }}</el-menu-item>
           </el-menu>
         </el-col>
@@ -270,22 +189,22 @@
             </el-form-item>
           </el-form>
           <el-form v-if="settingPage == 'measureInterval'" label-width="180px">
-            <el-form-item label="定位间隔（分钟）" >
+            <el-form-item label="定位间隔（分钟）">
               <el-input class="setting-inp"></el-input>
             </el-form-item>
-            <el-form-item label="心率间隔（分钟）" >
+            <el-form-item label="心率间隔（分钟）">
               <el-input class="setting-inp"></el-input>
             </el-form-item>
-            <el-form-item label="体温间隔（分钟）" >
+            <el-form-item label="体温间隔（分钟）">
               <el-input class="setting-inp"></el-input>
             </el-form-item>
-            <el-form-item label="血压间隔（分钟）" >
+            <el-form-item label="血压间隔（分钟）">
               <el-input class="setting-inp"></el-input>
             </el-form-item>
-            <el-form-item label="血氧间隔（分钟）" >
+            <el-form-item label="血氧间隔（分钟）">
               <el-input class="setting-inp"></el-input>
             </el-form-item>
-            <el-form-item label="心率间隔（分钟）" >
+            <el-form-item label="心率间隔（分钟）">
               <el-input class="setting-inp"></el-input>
             </el-form-item>
           </el-form>
@@ -326,15 +245,70 @@
               </el-row>
             </el-form-item>
           </el-form>
-          <el-form v-if="settingPage == 'clock'" label-width="180px">
-            <el-form-item label="计步器状态">
-              <el-switch v-model="switchType"></el-switch>
+          <el-form v-if="settingPage == 'clock'" label-width="80px">
+            <div class="clock-item" v-for="item in clockList" :key="item.clockId">
+              <el-form-item label="闹钟名称">
+                <el-input class="clock-input" v-model="item.clockName"></el-input>
+                <el-time-picker :editable="false" value-format="HH:mm" placeholder="请选择时间"
+                  v-model="item.clockTime"></el-time-picker>
+                <el-switch class="clock-switch" v-model="item.clockStatus"></el-switch>
+                <el-button type="danger" icon="el-icon-delete" circle @click="deleteClock(item.clockId)"></el-button>
+              </el-form-item>
+              <el-form-item label="日期">
+                <el-checkbox-group v-model="item.clockDate">
+                  <el-checkbox v-for="i in clockDate" :key="i.dictValue" :label="i.dictValue">{{ i.dictLabel
+                  }}</el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+            </div>
+          </el-form>
+          <el-form v-if="settingPage == 'silentTime'" label-width="80px">
+            <el-form-item label="时间" v-for="item in silentList" :key="item.id" style="margin: 20px 0;">
+              <el-time-picker is-range :editable="false" v-model="item.timeRange" range-separator="至"
+                start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm">
+              </el-time-picker>
+              <el-button type="danger" style="margin-left: 20px;" icon="el-icon-delete" circle
+                @click="deleteSilent(item.id)"></el-button>
+            </el-form-item>
+          </el-form>
+          <el-form v-if="settingPage == 'timeOnOff'" label-width="80px">
+            <el-form-item label="是否使用">
+              <el-switch v-model="timeOnOff.isuse"></el-switch>
+            </el-form-item>
+            <el-form-item label="开机时间">
+              <el-time-picker :editable="false" v-model="timeOnOff.openTime" value-format="HH:mm">
+              </el-time-picker>
+            </el-form-item>
+            <el-form-item label="关机时间">
+              <el-time-picker :editable="false" v-model="timeOnOff.closeTime" value-format="HH:mm">
+              </el-time-picker>
+            </el-form-item>
+          </el-form>
+          <el-form v-if="settingPage == 'wearNotice'" label-width="120px">
+            <el-form-item label="佩戴提醒状态">
+              <el-switch v-model="wearStatus"></el-switch>
+            </el-form-item>
+          </el-form>
+          <el-form v-if="settingPage == 'fallNotice'" label-width="120px">
+            <el-form-item label="跌倒提醒状态">
+              <el-switch v-model="fall.status"></el-switch>
+            </el-form-item>
+            <el-form-item label="跌倒灵敏度">
+              <el-radio-group v-model="fall.sensitivity">
+                <el-radio v-for="i in sensitivityList" :key="i.dictValue" :value="i.dictValue" :label="i.dictLabel"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-form>
+          <el-form v-if="settingPage == 'intercept'" label-width="120px">
+            <el-form-item label="佩戴提醒状态">
+              <el-switch v-model="intercept"></el-switch>
             </el-form-item>
           </el-form>
         </el-col>
       </el-row>
       <el-row slot="footer" style="text-align: center;">
-        <el-button type="success" style="width: 120px;">新增</el-button>
+        <el-button type="success" style="width: 120px;" @click="addList"
+          v-if="['clock', 'silentTime'].indexOf(settingPage) != -1">新增</el-button>
         <el-button style="width: 120px;">重置</el-button>
         <el-button type="primary" style="width: 120px;">保存</el-button>
       </el-row>
@@ -351,7 +325,7 @@ export default {
     return {
       // 计步器
       switchType: false,
-      settingOpen: true,
+      settingOpen: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -395,20 +369,89 @@ export default {
       rules: {
       },
       menuInfo: [],
-      settingPage: 'sos'
+      settingPage: 'sos',
+      clockList: [
+        {
+          clockName: null,
+          clockTime: null,
+          clockStatus: true,
+          clockDate: [],
+          clockId: Date.now()
+        }
+      ],
+      silentList: [
+        {
+          timeRange: ['08:00', '09:00'],
+          silentStatus: true,
+          id: Date.now()
+        }
+      ],
+      timeOnOff: {
+        isuse: false,
+        openTime: null,
+        closeTime: null
+      },
+      wearStatus: false,
+      intercept: false,
+      fall: {
+        status: false,
+        sensitivity: null
+      },
+      sensitivityList: []
     };
   },
   created() {
-    console.log(this.$router);
     this.getList();
     this.getDicts('sys_menu_info').then(res => {
       this.menuInfo = res.data
     })
+    this.getDicts('sys_clock').then(res => {
+      this.clockDate = res.data
+    })
+    this.getDicts('sys_fall_sensitivity').then(res => {
+      this.sensitivityList = res.data
+    })
   },
   methods: {
-    openSetting(e) {
+    addList() {
+      if (this.settingPage == 'clock') {
+        let obj = {
+          clockName: null,
+          clockTime: null,
+          clockStatus: true,
+          clockDate: [],
+          clockId: Date.now()
+        }
+        this.clockList.push(obj)
+      } else if (this.settingPage == 'silentTime') {
+        let obj = {
+          timeRange: [new Date(8, 0), new Date(9, 0)],
+          silentStatus: true,
+          id: Date.now()
+        }
+        this.silentList.push(obj)
+      }
+    },
+    deleteSilent(e) {
+      this.silentList.map((item, index) => {
+        if (item.id == e) {
+          this.silentList.splice(index, 1)
+        }
+      })
+    },
+    deleteClock(e) {
+      this.clockList.map((item, index) => {
+        if (item.clockId == e) {
+          this.clockList.splice(index, 1)
+        }
+      })
+    },
+    selectSetting(e) {
       this.settingPage = e
     },
+    openSetting(e) {
+      this[e] = true
+    },
     /** 查询设备列列表 */
     getList() {
       this.loading = true;
@@ -457,7 +500,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -499,12 +542,12 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除设备列编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除设备列编号为"' + ids + '"的数据项？').then(function () {
         return delDevice(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => { });
     },
     /** 导出按钮操作 */
     handleExport() {
@@ -516,10 +559,25 @@ export default {
 };
 </script>
 <style scoped>
-  .top {
-    margin-bottom: 20px;
-  }
-  .setting-inp {
-    width: 400px;
-  }
+.top {
+  margin-bottom: 20px;
+}
+
+.setting-inp {
+  width: 400px;
+}
+
+.clock-item {
+  margin: 20px 0 0 0;
+  border-bottom: 1px solid #ccc;
+}
+
+.clock-input {
+  margin: 0 10px 0 0;
+  width: 200px;
+}
+
+.clock-switch {
+  margin: 0 20px;
+}
 </style>