From 4a516a78e5eacc6e6021da4f342bc0af32aa13db Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Mon, 28 Feb 2022 15:35:57 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/t-yp.png        | Bin 0 -> 8391 bytes
 src/assets/styles/index.scss      |   4 +
 src/views/device/deviceConfig.vue | 122 +++++++++--------
 src/views/device/index.vue        | 215 ++++++++++++++++++------------
 4 files changed, 199 insertions(+), 142 deletions(-)
 create mode 100644 src/assets/images/t-yp.png

diff --git a/src/assets/images/t-yp.png b/src/assets/images/t-yp.png
new file mode 100644
index 0000000000000000000000000000000000000000..8dfcdd4cd6e8493b7d3196169be7183591a3525e
GIT binary patch
literal 8391
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

literal 0
HcmV?d00001

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 2eab990..c363e1e 100644
--- a/src/assets/styles/index.scss
+++ b/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;
diff --git a/src/views/device/deviceConfig.vue b/src/views/device/deviceConfig.vue
index 11004fc..9991836 100644
--- a/src/views/device/deviceConfig.vue
+++ b/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;
+        }
+      }
     }
   }
 }
diff --git a/src/views/device/index.vue b/src/views/device/index.vue
index e8d0252..2c98538 100644
--- a/src/views/device/index.vue
+++ b/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%;