设备管理-ui

src/assets/styles/index.scss

@@ -278,12 +278,16 @@ aside {
     color: #333;
   }
   .el-input__inner{
+    width: 336px;
     height: 40px;
     line-height: 40px;
   }
   .el-range-separator{
     line-height: 34px;
   }
+  .el-date-editor{
+    width: 336px;
+  }
 }
 .el-dialog__header{
   position: relative;

src/views/device/deviceConfig.vue

@@ -5,52 +5,54 @@
       <el-row type="flex">
         <el-col :span="20" class="col_flex">
           <div class="form_item">
-            <span>设备ID</span>
+            <span>设备ID：</span>
             <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备ID" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
           </div>
           <div class="form_item">
-            <span>设备名称</span>
+            <span>设备名称：</span>
             <el-input v-model="query.blurry" clearable size="small" placeholder="请输入设备名称" style="width: 200px" class="filter-item" @keyup.enter.native="crud.toQuery" />
           </div>
           <rrOperation />
         </el-col>
         <el-col class="page_add" :span="4">
-          <el-button class="setting_btn" type="primary" icon="el-icon-setting">配置</el-button>
-          <el-button class="table_add" type="primary" icon="el-icon-delete" :disabled="clearBtnDisabled">清空</el-button>
+          <el-button class="table_add setting_btn" type="primary" round>配置</el-button>
+          <el-button class="table_add clear_btn" plain :disabled="clearBtnDisabled">清空</el-button>
         </el-col>
       </el-row>
     </div>
     <el-row :gutter="15">
       <el-col>
-        <el-card class="box-card" shadow="never">
-          <el-table style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" />
-            <el-table-column prop="id" label="设备ID" align="center" />
-            <el-table-column prop="account" label="设备账号" align="center" />
-            <el-table-column prop="name" label="设备名称" align="center" />
-            <el-table-column prop="orientation" label="设备方向" align="center" />
-            <el-table-column prop="period" label="配置周期" align="center" width="300" />
-            <el-table-column prop="cover" label="启动画面" align="center">
-              <template slot-scope="scope">
-                <el-image class="cover_img" :src="scope.row.cover" />
-              </template>
-            </el-table-column>
-            <el-table-column prop="date" label="创建时间" align="center" width="200" />
-            <el-table-column fixed="right" label="操作" align="center">
-              <template slot-scope="scope">
-                <el-button type="primary" icon="el-icon-edit" @click="edit(scope.$index, scope.row)" />
-                <el-button type="info" icon="el-icon-info" />
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--分页组件-->
-          <pagination />
-        </el-card>
+        <el-table style="width: 100%;" :data="tableData" :header-cell-style="{ background: '#3a8aeb', color: '#fff' }" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="id" label="设备ID" align="center" />
+          <el-table-column prop="account" label="设备账号" align="center" />
+          <el-table-column prop="name" label="设备名称" align="center" />
+          <el-table-column prop="orientation" label="设备方向" align="center" />
+          <el-table-column prop="period" label="配置周期" align="center" width="300" />
+          <el-table-column prop="cover" label="启动画面" align="center">
+            <template slot-scope="scope">
+              <el-image class="cover_img" :src="scope.row.cover" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="date" label="创建时间" align="center" width="200" />
+          <el-table-column fixed="right" label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="editFormData(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button type="info" class="record_btn">记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
       </el-col>
     </el-row>
     <!-- 编辑设备 -->
     <div class="layer device_layer">
-      <el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="700px">
+      <el-dialog title="配置" :close-on-click-modal="false" :visible.sync="addFromVisible" width="880px">
         <el-form ref="form" :model="form">
           <div class="setting_item">
             <h4>开机时间</h4>
@@ -168,7 +170,7 @@
                   { required: true, message: '请选择具体关机时间', trigger: 'change' },
                 ]"
               >
-                <el-select v-model="form.orientation" size="small" class="filter-item" style="width: 220px">
+                <el-select v-model="form.orientation" size="small" class="filter-item">
                   <el-option v-for="item in deviceData" :key="item.key" :label="item.name" :value="item.key" />
                 </el-select>
               </el-form-item>
@@ -179,8 +181,8 @@
           </div>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button @click="resetForm('form')">取 消</el-button>
-          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+          <el-button type="primary" round @click="submitForm('form')">确 定</el-button>
+          <el-button round @click="resetForm('form')">取 消</el-button>
         </div>
       </el-dialog>
     </div>
@@ -235,7 +237,7 @@ export default {
   watch: {},
   methods: {
     // 编辑
-    edit(index, row) {
+    editFormData(index, row) {
       this.addFromVisible = true
     },
     clearCheckbox() {
@@ -277,6 +279,10 @@ export default {
 .setting_btn{
   margin-right: 10px;
 }
+.clear_btn {
+  color: #3a8aeb;
+  border-color: #3a8aeb;
+}
 .cover_img{
   width: 65px;
 }
@@ -284,31 +290,37 @@ export default {
   ::v-deep .el-dialog__body{
     padding: 0 20px;
   }
-  .setting_cont{
-    display: flex;
-    span{
-      display: block;
-      width: 80px;
-      line-height: 32px;
-    }
-    .no_margin {
-      margin: 0;
-    }
-    .weekly_margin{
-      margin-bottom: 6px;
-      ::v-deep .el-form-item__error{
-        top: 70%;
-      }
-    }
-    ::v-deep .el-form-item--small.el-form-item:last-child{
-      margin: 0;
+  .setting_item{
+    color: #333;
+    h4{
+      font-size: 16px;
     }
-    ::v-deep .el-radio-group{
-      display: block;
-      // line-height: 32px;
-      .el-radio{
+    .setting_cont{
+      display: flex;
+      span{
+        display: block;
+        width: 80px;
         line-height: 32px;
       }
+      .no_margin {
+        margin: 0;
+      }
+      .weekly_margin{
+        margin-bottom: 6px;
+        ::v-deep .el-form-item__error{
+          top: 70%;
+        }
+      }
+      ::v-deep .el-form-item--small.el-form-item:last-child{
+        margin: 0;
+      }
+      ::v-deep .el-radio-group{
+        display: block;
+        // line-height: 32px;
+        .el-radio{
+          line-height: 32px;
+        }
+      }
     }
   }
 }

src/views/device/index.vue

@@ -5,7 +5,7 @@
       <el-row type="flex">
         <el-col :span="20" class="col_flex">
           <div class="form_item">
-            <span>状态</span>
+            <span>状态：</span>
             <el-select v-model="query.state" size="small" class="filter-item" style="width: 120px">
               <el-option
                 v-for="item in stateData"
@@ -16,7 +16,7 @@
             </el-select>
           </div>
           <div class="form_item">
-            <span>设备ID</span>
+            <span>设备ID：</span>
             <el-input
               v-model="query.blurry"
               clearable
@@ -28,7 +28,7 @@
             />
           </div>
           <div class="form_item">
-            <span>设备名称</span>
+            <span>设备名称：</span>
             <el-input
               v-model="query.blurry"
               clearable
@@ -42,45 +42,48 @@
           <rrOperation />
         </el-col>
         <el-col class="page_add" :span="4">
-          <el-button class="table_add" type="primary" icon="el-icon-delete" disabled>清空</el-button>
+          <el-button class="table_add clear_btn" plain disabled>清空</el-button>
         </el-col>
       </el-row>
     </div>
+    <!-- table -->
     <el-row :gutter="15">
       <el-col>
-        <el-card class="box-card" shadow="never">
-          <el-table style="width: 100%;" :data="tableData">
-            <el-table-column :selectable="checkboxT" type="selection" width="55" />
-            <el-table-column prop="id" label="设备ID" align="center" />
-            <el-table-column prop="account" label="设备账号" align="center" />
-            <el-table-column prop="name" label="设备名称" align="center" />
-            <el-table-column prop="orientation" label="设备方向" align="center" />
-            <el-table-column prop="organization" label="所属机构" align="center" />
-            <el-table-column prop="isDel" label="设备状态" align="center">
-              <template slot-scope="scope">
-                <div>{{ scope.row.isDel ? '在线' : '离线' }}</div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="content" label="发布内容" align="center">
-              <template slot-scope="scope">
-                <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
-              </template>
-            </el-table-column>
-            <el-table-column prop="date" label="创建时间" align="center" width="200" />
-            <el-table-column fixed="right" label="操作" align="center">
-              <template slot-scope="scope">
-                <el-button
-                  type="primary"
-                  icon="el-icon-edit"
-                  @click="edit(scope.$index, scope.row)"
-                />
-                <el-button type="info" icon="el-icon-info" />
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--分页组件-->
-          <pagination />
-        </el-card>
+        <el-table
+          style="width: 100%;"
+          :data="tableData"
+          :header-cell-style="{ background: '#3a8aeb', color: '#fff' }"
+        >
+          <el-table-column :selectable="checkboxT" type="selection" width="55" />
+          <el-table-column prop="id" label="设备ID" align="center" />
+          <el-table-column prop="account" label="设备账号" align="center" />
+          <el-table-column prop="name" label="设备名称" align="center" />
+          <el-table-column prop="orientation" label="设备方向" align="center" />
+          <el-table-column prop="organization" label="所属机构" align="center" />
+          <el-table-column prop="isDel" label="设备状态" align="center">
+            <template slot-scope="scope">
+              <div>{{ scope.row.isDel ? '在线' : '离线' }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="content" label="发布内容" align="center">
+            <template slot-scope="scope">
+              <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
+            </template>
+          </el-table-column>
+          <el-table-column prop="date" label="创建时间" align="center" width="200" />
+          <el-table-column fixed="right" label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                class="edit_btn"
+                @click="editFormData(scope.$index, scope.row)"
+              >编辑</el-button>
+              <el-button type="danger" class="record_btn">记录</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
       </el-col>
     </el-row>
     <!-- 编辑设备 -->
@@ -89,22 +92,17 @@
         :title="dialogTitle"
         :close-on-click-modal="false"
         :visible.sync="addFromVisible"
-        width="400px"
+        width="576px"
       >
         <el-form ref="form" :model="form" :rules="rules" label-width="100px">
           <el-form-item label="设备账号" prop="account">
-            <el-input v-model="form.account" autocomplete="off" disabled style="width: 200px" />
+            <el-input v-model="form.account" autocomplete="off" disabled />
           </el-form-item>
           <el-form-item label="设备名称" prop="name">
-            <el-input v-model="form.name" style="width: 200px" />
+            <el-input v-model="form.name" />
           </el-form-item>
           <el-form-item label="设备方向" prop="orientation">
-            <el-select
-              v-model="form.orientation"
-              size="small"
-              class="filter-item"
-              style="width: 200px"
-            >
+            <el-select v-model="form.orientation" size="small" class="filter-item">
               <el-option
                 v-for="item in deviceData"
                 :key="item.key"
@@ -115,37 +113,53 @@
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button @click="addFromVisible = false">取 消</el-button>
-          <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+          <el-button type="primary" round @click="submitForm('form')">确 定</el-button>
+          <el-button round @click="addFromVisible = false">取 消</el-button>
         </div>
       </el-dialog>
     </div>
 
-    <div class="layer">
+    <div class="publish_layer">
       <el-dialog
         title="发布内容"
         :close-on-click-modal="false"
         :visible.sync="contentVisible"
-        width="720px"
+        width="970px"
+        height="590px"
       >
         <div class="content_warp">
           <h4>图片</h4>
           <ul class="item_list">
             <li class="item_cont">
-              <img src="../../assets/images/background.jpg" alt />
-              <div class="item_info">
-                <div class="item_format">
-                  <span class="item_type">JPG</span>
-                  <span class="item_time">30S</span>
-                </div>
-                <p class="item_name">1.3X2DD244</p>
+              <img src="@/assets/images/background.jpg" alt />
+              <div class="item_format">
+                <span class="item_type">JPG</span>
               </div>
-              <!-- 视频 -->
-              <div class="item_player">1</div>
+              <div class="item_name">人工智能</div>
             </li>
           </ul>
           <h4>视频</h4>
+          <ul class="item_list">
+            <li class="item_cont">
+              <img src="@/assets/images/background.jpg" alt />
+              <div class="item_format">
+                <span class="item_type">Video</span>
+                <span class="item_time">03:00</span>
+              </div>
+              <div class="item_name">防控疫情小贴士</div>
+            </li>
+          </ul>
           <h4>音频</h4>
+          <ul class="item_list">
+            <li class="item_cont">
+              <div class="radio_img"></div>
+              <div class="item_format">
+                <span class="item_type">Video</span>
+                <span class="item_time">03:00</span>
+              </div>
+              <div class="item_name">防控疫情小贴士</div>
+            </li>
+          </ul>
         </div>
       </el-dialog>
     </div>
@@ -201,7 +215,7 @@ export default {
   watch: {},
   methods: {
     // 编辑
-    edit(index, row) {
+    editFormData(index, row) {
       this.dialogTitle = '编辑设备'
       this.addFromVisible = true
       this.form.account = row.account
@@ -226,9 +240,23 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.layer {
+.clear_btn {
+  color: #3a8aeb;
+  border-color: #3a8aeb;
+}
+.publish_layer {
   ::v-deep .el-dialog__body {
-    padding: 0 0 30px 20px;
+    padding: 0 20px 30px 20px;
+    height: 590px;
+    overflow-y: auto;
+  }
+}
+.content_warp {
+  padding-top: 16px;
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    color: #333;
   }
 }
 .item_list {
@@ -236,41 +264,54 @@ export default {
   flex-wrap: wrap;
   .item_cont {
     position: relative;
-    width: 160px;
-    height: 100px;
+    width: 166px;
+    height: 174px;
     overflow: hidden;
-    background-color: #f1f1f1;
+    background-color: #fff;
+    border: 1px solid #f0f0f0;
+    border-radius: 6px;
     margin: 0 10px 10px 0;
     img {
       display: block;
-      width: 160px;
-      height: 100px;
+      width: 164px;
+      height: 140px;
+    }
+    .radio_img {
+      width: 164px;
+      height: 140px;
+      background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center;
+      background-size: 98px 98px;
     }
-    .item_info {
+    .item_format {
+      display: flex;
       position: absolute;
       left: 0;
-      right: 0;
-      bottom: 0;
-      .item_format {
-        display: flex;
-        span {
-          display: block;
-          padding: 2px 5px;
-          margin-right: 5px;
-          background: rgba(255, 255, 255, 0.5);
-          color: #fff;
-          font-size: 12px;
-          line-height: 12px;
-          border-radius: 4px;
-        }
-      }
-      .item_name {
-        padding: 2px 0;
-        margin: 5px 0 0 0;
-        background: rgba(255, 255, 255, 0.5);
+      bottom: 38px;
+      span {
+        display: block;
+        width: 47px;
+        height: 18px;
+        // padding: 2px 5px;
+        margin-left: 6px;
+        text-align: center;
+        background: #3a8aeb;
         color: #fff;
+        font-size: 12px;
+        line-height: 18px;
+        border-radius: 9px;
       }
     }
+    .item_name {
+      height: 32px;
+      line-height: 32px;
+      padding: 0 11px;
+      color: #333;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
     .item_player {
       position: absolute;
       top: 50%;