提交

ruoyi-ui/src/assets/styles/index.scss

@@ -206,4 +206,182 @@ aside {
     border-color: #03BF8A;
     background-color: #03BF8A;
   }
+.inghse{
+    .section_11 {
+      background-color: rgba(255, 255, 255, 1);
+      border-radius: 10px;
+      // height: 185px;
+      // margin-left: 2px;
+      width: 100%;
+      padding: 13px;
+      margin-top: 10px;
+    }
+    .section_12 {
+      width: 100%;
+      height: 20px;
+      // margin: 12px 0 0 12px;
+    }
+    .text-wrapper_14 {
+      height: 20px;
+      // background: url(https://lanhu-oss-proxy.lanhuapp.com/psn5opj1nbruqdry7vi3vp34u91t821zaig8b98e955-f7ad-4c33-a3dd-e849c03901c9)
+      //   100% no-repeat;
+      background-size: 100% 100%;
+      background-color: #02C482;
+      border-radius: 50%;
+      width: 20px;
+    }
+    .text_25 {
+      width: 8px;
+      height: 11px;
+      overflow-wrap: break-word;
+      color: rgba(255, 255, 255, 1);
+      font-size: 14px;
+      font-family: PingFang-SC-Heavy;
+      font-weight: 900;
+      text-align: left;
+      white-space: nowrap;
+      line-height: 11px;
+      margin: 5px 0 0 6px;
+    }
+    .text_26 {
+      // width: 46px;
+      // flex: 1;
+      height: 13px;
+      overflow-wrap: break-word;
+      color: rgba(51, 51, 51, 1);
+      font-size: 16px;
+      font-family: PingFang-SC-Heavy;
+      font-weight: 900;
+      text-align: left;
+      white-space: nowrap;
+      line-height: 13px;
+      margin: 3px 0 0 8px;
+      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    }
+    .thumbnail_14 {
+      width: 13px;
+      height: 13px;
+      margin: 2px 0 0 7px;
+    }
+    .image_3 {
+      width: 32px;
+      height: 18px;
+      margin-left: 142px;
+    }
+    .text-wrapper_15 {
+      // width: 100%;
+      // height: 61px;
+      margin-left: 28px;
+      margin-top: 10px;
+      // margin: 15px 0 0 40px;
+      p{
+        margin: 0;
+        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+      }
+    }
+    .paragraph_5 {
+      // width: 100%;
+      // height: 61px;
+      overflow-wrap: break-word;
+      color: rgba(102, 102, 102, 1);
+      font-size: 14px;
+      font-family: PingFang-SC-Medium;
+      font-weight: 500;
+      text-align: left;
+      line-height: 24px;
+    }
+    .section_13 {
+      height: 24px;
+      margin-left: 28px;
+      margin-top: 10px;
+      // margin: 10px 0 14px 41px;
+    }
+    .text-wrapper_16 {
+      border-radius: 10px;
+      height: 24px;
+      border: 1px solid rgba(0, 159, 232, 1);
+      max-width: 80%;
+      padding-right: 10px;
+      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    }
+    .text_27 {
+      // width: 41px;
+      height: 14px;
+      overflow-wrap: break-word;
+      color: rgba(0, 159, 232, 1);
+      font-size: 14px;
+      font-family: PingFang-SC-Medium;
+      font-weight: 500;
+      text-align: left;
+      white-space: nowrap;
+      line-height: 14px;
+      margin: 5px 0 0 11px;
+      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+    }
+    .thumbnail_15 {
+      width: 12px;
+      height: 4px;
+      margin-top: 10px;
+    }
+
+    .flex-col {
+      display: flex;
+      flex-direction: column;
+    }
+    .flex-row {
+      display: flex;
+      flex-direction: row;
+    }
+    .justify-between {
+      display: flex;
+      justify-content: space-between;
+    }
+    .xnhse{
+    	width: 110px;
+    	height: 102px;
+    	background: #FFFFFF;
+    	box-shadow: 0px 0px 10px 0px #D1D1D1;
+    	border-radius: 8px;
+    	padding: 15px;
+    	position: absolute;
+    	right: 0;
+    	bottom: 0;
+    	div{
+    		display: flex;
+    		justify-content: space-between;
+    		align-items: center;
+    		span{
+    			font-family: PingFang SC;
+    			font-weight: 500;
+    			font-size: 14px;
+    			color: #3D455B;
+    		}
+    	}
+    }
+    .njgsebott{
+      justify-content: space-around;
+      align-items: center;
+      border-top: 1px solid #DADADA;
+      margin: 0 -13px;
+      margin-top: 10px;
+      margin-bottom: -13px;
+      p{
+        margin: 0;
+        text-align: center;
+        flex: 1;
+        ont-family: PingFang SC;
+        font-weight: bold;
+        font-size: 14px;
+        color: #666666;
+        height: 30px;
+        line-height: 30px;
+        cursor: pointer;
+      }
+      p:nth-child(2){
+        border: 1px solid #DADADA;
+        border-top: none;
+        border-bottom: none;
+      }
+    }
+  }
 

ruoyi-ui/src/components/Pagination/index.vue

@@ -38,7 +38,7 @@ export default {
     pageSizes: {
       type: Array,
       default() {
-        return [10, 20, 30, 50]
+        return [8, 12, 16, 24, 32]
       }
     },
     // 移动端页码按钮的数量端默认值5

ruoyi-ui/src/views/shipinggaoj/channelNumber/index.vue

@@ -24,8 +24,8 @@
                          <span style="margin-left: 10px;">搜索条件</span>
                         </p>
                         <div style="padding-bottom: 0;margin-bottom: 20px;">
-          <el-form  class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
-            <el-form-item label="通道编号" prop="channelNum">
+          <el-form  class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="10px">
+            <el-form-item label="" prop="channelNum">
               <el-input
                 v-model="queryParams.channelNum"
                 placeholder="请输入通道编号"
@@ -76,93 +76,103 @@
             </el-col>
           </el-row>
           <div class=" infinite-list" :style="dynamicStyle" >
-            <div   style="display: flex;flex-wrap: wrap;" v-if="inhgeshwe">
-              <!-- item.channelDetails == null?'height:200px; margin-bottom: 10px;' : -->
-              <div   class="box_3dr flex-col" style="margin-bottom: 10px;" v-for="(item,index ) in channelNumberList" :key="index" >
-                            <div class="box_4 flex-row" style="justify-content: space-between;margin: 0;">
-                              <div  @click="handleSelectionChange(item)" style="display: flex;align-items: center;">
-                                <img
-                                  class="thumbnail_21"
-                                  referrerpolicy="no-referrer"
-                                  src="../../../assets/images/icon_lby_gx_normal.png"
-                                  v-show="!item.isnum && isgsow"
-                                />
-                                <img
-                                  class="thumbnail_21"
-                                  referrerpolicy="no-referrer"
-                                  src="../../../assets/images/icon_lby_gx_selcted.png"
-                                  v-show="item.isnum && isgsow"
-                                />
-                                <span class="text_19">{{item.channelNum}}</span>
-                              </div>
-                              <div>
-                                <img
-                                  class="image_1"
-                                  style="cursor: pointer;"
-                                  referrerpolicy="no-referrer"
-                                  @click="handleUpdate(item)"
-                                  v-hasPermi="['manage:equipmentManage:edit']"
-                                  src="../../../assets/images/icon_lby_gdtc_bj.png"
-                                />
-                                <img
-                                  class="thumbnail_22"
-                                   style="cursor: pointer;"
-                                  @click="handleDelete(item)"
-                                  v-hasPermi="['manage:equipmentManage:remove']"
-                                  referrerpolicy="no-referrer"
-                                   src="../../../assets/images/icon_lby_gdtc_del.png"/>
-                              </div>
-                            </div>
-                            <div style="padding: 10px;">
-                              <div class="box_5 flex-col" >
-                                <image-preview  :src="item.photoAddress" :width="100 +'%'" :height="100 + '%'"  style=""/>
-                              </div>
-                              <div class="box_6 flex-row jiange" style="  align-items: center;">
-                                <span class="text_21">视频地址： </span>
-                                <el-tooltip class="item" effect="dark" :content="item.videoAddress" placement="top-start">
-                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                     {{item.videoAddress}}
-                                </div>
-                                </el-tooltip>
-                              </div>
-                              <div class="box_6 flex-row jiange" style="align-items: center;">
-                                <span class="text_21">协议类型： </span>
-                                <div style="margin-left: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                  <dict-tag :options="dict.type.probing_protocol" :value="item.protocolType"/>
-                                </div>
-                              </div>
-                              <!-- <span class="text_20">设备地址：192.168.1.1</span> -->
-                              <!-- <div class="box_6 flex-row jiange">
-                                <span class="text_21">设备账号： </span>
-                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                     {{item.account}}
+               <!-- style="display: flex;flex-wrap: wrap;" -->
+            <div    v-if="inhgeshwe">
+              <el-row :gutter="10">
+                <el-col :span="12" v-for="(item,index ) in channelNumberList" :key="index">
+                  <div   class="box_3dr flex-col" style="margin-bottom: 10px;"  >
+                                <div class="box_4 flex-row" style="justify-content: space-between;margin: 0;">
+                                  <div  @click="handleSelectionChange(item)" style="display: flex;align-items: center;width: 83%;">
+                                    <img
+                                      class="thumbnail_21"
+                                      referrerpolicy="no-referrer"
+                                      src="../../../assets/images/icon_lby_gx_normal.png"
+                                      v-show="!item.isnum && isgsow"
+                                    />
+                                    <img
+                                      class="thumbnail_21"
+                                      referrerpolicy="no-referrer"
+                                      src="../../../assets/images/icon_lby_gx_selcted.png"
+                                      v-show="item.isnum && isgsow"
+                                    />
+                                     <el-tooltip class="item" effect="dark" :content="item.channelNum" placement="right-start">
+                                    <p class="text_19">{{item.channelNum}}</p>
+                                     </el-tooltip>
+                                  </div>
+                                  <div>
+                                    <img
+                                      class="image_1"
+                                      style="cursor: pointer;"
+                                      referrerpolicy="no-referrer"
+                                      @click="handleUpdate(item)"
+                                      v-hasPermi="['manage:equipmentManage:edit']"
+                                      src="../../../assets/images/icon_lby_gdtc_bj.png"
+                                    />
+                                    <img
+                                      class="thumbnail_22"
+                                       style="cursor: pointer;"
+                                      @click="handleDelete(item)"
+                                      v-hasPermi="['manage:equipmentManage:remove']"
+                                      referrerpolicy="no-referrer"
+                                       src="../../../assets/images/icon_lby_gdtc_del.png"/>
+                                  </div>
                                 </div>
-                              </div> -->
+                                <div style="padding: 10px;">
+                                  <div class="box_5 flex-col" >
+                                    <image-preview  :src="item.photoAddress" :width="100 +'%'" :height="100 + '%'"  style=""/>
+                                  </div>
+                                  <div class="box_6 flex-row jiange" style="  align-items: center;">
+                                    <span class="text_21">视频地址： </span>
+                                    <el-tooltip class="item" effect="dark" :content="item.videoAddress" placement="top-start">
+                                    <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                         {{item.videoAddress}}
+                                    </div>
+                                    </el-tooltip>
+                                  </div>
+                                  <div class="box_6 flex-row jiange" style="align-items: center;">
+                                    <span class="text_21">协议类型： </span>
+                                    <div style="margin-left: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                      <dict-tag :options="dict.type.probing_protocol" :value="item.protocolType"/>
+                                    </div>
+                                  </div>
+                                  <!-- <span class="text_20">设备地址：192.168.1.1</span> -->
+                                  <!-- <div class="box_6 flex-row jiange">
+                                    <span class="text_21">设备账号： </span>
+                                    <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                         {{item.account}}
+                                    </div>
+                                  </div> -->
 
-                              <!-- <div class="box_6 flex-row jiange">
-                                <span class="text_21">设备密码： </span>
-                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                     {{item.password}}
-                                </div>
-                              </div> -->
-                             <!-- <div class="box_6 flex-row jiange" style="  align-items: center;">
-                                <span class="text_21">预览端口： </span>
-                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                     {{item.equipmentAddress}}
+                                  <!-- <div class="box_6 flex-row jiange">
+                                    <span class="text_21">设备密码： </span>
+                                    <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                         {{item.password}}
+                                    </div>
+                                  </div> -->
+                                 <!-- <div class="box_6 flex-row jiange" style="  align-items: center;">
+                                    <span class="text_21">预览端口： </span>
+                                    <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                         {{item.equipmentAddress}}
+                                    </div>
+                                  </div> -->
+                                  <div class="box_6 flex-row jiange" style="  align-items: center;" >
+                                    <span class="text_21">通道描述： </span>
+                                    <el-tooltip class="item" effect="dark" :content="item.channelDetails" placement="top-start">
+                                    <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
+                                         {{item.channelDetails}}
+                                    </div>
+                                    </el-tooltip>
+                                  </div>
                                 </div>
-                              </div> -->
-                              <div class="box_6 flex-row jiange" style="  align-items: center;" >
-                                <span class="text_21">通道描述： </span>
-                                <el-tooltip class="item" effect="dark" :content="item.channelDetails" placement="top-start">
-                                <div style=" margin-left: 12px; font-weight: 500;font-size: 13px;color: #222327; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
-                                     {{item.channelDetails}}
-                                </div>
-                                </el-tooltip>
+
                               </div>
-                            </div>
+                </el-col>
+              <!-- item.channelDetails == null?'height:200px; margin-bottom: 10px;' : -->
 
-                          </div>
+                </el-row>
             </div>
+
+
           </div>
 
           <paginations
@@ -625,11 +635,11 @@ export default {
   background-color: rgba(255, 255, 255, 1);
   border-radius: 10px;
   position: relative;
-  width: 49%;
+  /* width: 49%; */
   height: 100%;
   /* padding-bottom: 15px; */
-margin-left: 3px ;
-  margin-right: 3px;
+/* margin-left: 3px ;
+  margin-right: 3px; */
 }
 .box_4 {
   width: 100%;
@@ -653,6 +663,9 @@ margin-left: 3px ;
   white-space: nowrap;
   line-height: 13px;
   margin: 0 0 0 11px;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
 }
 .image_1 {
   width:14px;

ruoyi-ui/src/views/shipinggaoj/gaojingguanli/index.vue

@@ -2,22 +2,47 @@
   <div class="app-container">
     <el-row :gutter="10">
       <el-col :span="4">
-      <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 95vh;">
-        <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800;">盒子管理</p>
+      <div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 105vh;">
+        <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800; margin-bottom: 15px;">盒子管理</p>
           <div class=" infinite-list" style="overflow:auto;height:  93vh" >
-            <div class="head-container">
+            <!-- <div class="head-container">
               <el-input
                 v-model="equipmentName"
                 placeholder="请输入设备名称"
                 clearable
+                 @clear="nsdfse"
                 size="small"
                 @blur="nsdfse"
                 prefix-icon="el-icon-search"
-                style="margin-bottom: 20px"
+                style="margin-bottom: 10px"
               />
-            </div>
+            </div> -->
             <div class="head-container">
               <el-tree
+                            ref="tree"
+                            :data="deptOptions"
+                            :props="defaultProps"
+                            :expand-on-click-node="false"
+                            :filter-node-method="filterNode"
+                            default-expand-all
+                            :highlight-current="true"
+                            @node-click="ishg"
+                            class="custom-tree"
+                          >
+                            <el-tooltip
+                              :disabled="showTitle"
+                              effect="dark"
+                              :content="tooltipTitle"
+                              placement="left-start"
+                              slot-scope="{node,data}"
+                            >
+                              <span style="font-weight: 400;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="span-ellipsis"
+                              @mouseover="onShowNameTipsMouseenter">
+                                {{node.label}}
+                              </span>
+                            </el-tooltip>
+                          </el-tree>
+              <!-- <el-tree
                 :data="deptOptions"
                 :props="defaultProps"
                 :expand-on-click-node="false"
@@ -26,7 +51,7 @@
                 default-expand-all
                 highlight-current
                 @node-click="ishg"
-              />
+              /> -->
             </div>
           </div>
         <!-- <div :class="ishge == index ? 'anche' : ''" style=" height: 36px;;line-height: 36px;margin-top: 10px;padding: 0 10px;"v-for="(item,index) in channelNumberList" :key="index">
@@ -48,11 +73,11 @@
              <span style="margin-left: 10px;">搜索条件</span>
             </p>
             <div style="padding-bottom: 0;margin-bottom: 20px;">
-              <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
+              <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="10px">
                 <el-row>
-                    <el-col :span="6">
-                      <el-form-item label="告警类别" prop="algorithmType">
-                              <el-select style="width: 120px;" v-model="queryParams.algorithmType" placeholder="请选择告警类别" clearable>
+                    <el-col :span="5">
+                      <el-form-item label="" prop="algorithmType" style="display: flex;">
+                              <el-select style="width: 100%;" v-model="queryParams.algorithmType" placeholder="请选择告警类别" clearable>
                                 <el-option
                                   v-for="dict in dict.type.gaojing_typeshuju"
                                   :key="dict.value"
@@ -63,8 +88,8 @@
                             </el-form-item>
                     </el-col>
                     <el-col :span="6">
-                      <el-form-item label="告警时间" prop="warnTime">
-                              <el-date-picker style="width: 120px;" clearable
+                      <el-form-item label="" prop="warnTime" style="display: flex;">
+                              <el-date-picker style="width: 100%;" clearable
                                 v-model="queryParams.warnTime"
                                 type="date"
                                 value-format="yyyy-MM-dd"
@@ -72,7 +97,7 @@
                               </el-date-picker>
                             </el-form-item>
                     </el-col>
-                  <el-col :span="5">
+                  <el-col :span="6">
                     <el-form-item class="butt" style="border: 0;">
                       <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini"  @click="handleQuery">查询 </el-button>
                       <el-button size="mini"  @click="resetQuery">重置</el-button>
@@ -127,14 +152,16 @@
                   <div class=" infinite-list" :style="dynamicStyle">
                     <el-row :gutter="10" v-if="warnManageList.length !=0" style="width: 100%;margin-left: 0;">
                       <el-col :span="6" v-for="(item,index) in warnManageList" :key="index" style="cursor: pointer;">
-                        <div v-if="isshoe"  @click="isac(item)"  :class=" item.isnum ==true ? 'ingwe' :'' " style="box-sizing: border-box; position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;padding-bottom: 10px;">
+                        <div v-if="isshoe"  @click="isac(item)"  :class=" item.isnum ==true ? 'ingwe' :'' " style="box-sizing: border-box; position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;padding-bottom: 10px; height: 273px;">
                           <div class="quning">
                             <div class="shipige">
-                              <div style="display: flex;align-items: center;">
+                              <div style="display: flex;align-items: center;width: 100%;">
                                 <img src="../../../assets/images/icon_gjgl_gx_normal.png" alt="" v-if="item.isnum == false">
                                 <img src="../../../assets/images/icon_gjgl_gx_selected.png" alt="" v-if="item.isnum == true">
-                                <p v-if="item.algorithmType == 0 || item.algorithmType == 1" style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">{{ item.rangName + (item.algorithmType == 0 ? '离岗' : '玩手机') + '告警'}}</p>
-                                <p v-if="item.algorithmType == 2" style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">{{ item.equipmentName + (item.algorithmType == 0 ? '离岗' : item.algorithmType == 1?'玩手机' : '人员聚集') + '告警'}}</p>
+                                <el-tooltip class="item" effect="dark" :content="item.rangName + (item.algorithmType == 0 ? '离岗' : item.algorithmType == 1?'玩手机' : '人员聚集') + '告警'" placement="top-start">
+                                <p v-if="item.algorithmType == 0 || item.algorithmType == 1" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size: 14px;color: #333;font-weight: 700; margin-left: 5px; ">{{ item.rangName + (item.algorithmType == 0 ? '离岗' : '玩手机') + '告警'}}</p>
+                                <p v-if="item.algorithmType == 2" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">{{ item.rangName + (item.algorithmType == 0 ? '离岗' : item.algorithmType == 1?'玩手机' : '人员聚集') + '告警'}}</p>
+                                </el-tooltip>
                               </div>
                               <!-- <p style="font-size: 14px; color: #aaa;font-weight: 500;" @click="tiahzo(item)">详情→</p> -->
                             </div>
@@ -160,20 +187,22 @@
                           </div>
 
                           <div class="goe">
-                            <div style="display: flex;align-items: center;margin-top: 8px;">
+                            <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
                               <p>设备名称：</p>
                               <p>{{item.equipmentName == null?'暂无数据' : item.equipmentName}}</p>
-                            </div>
-                            <div style="display: flex;align-items: center;margin-top: 8px;">
+                            </div> -->
+                           <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
                               <p>算法参数：</p>
                               <p>{{item.parameterSet == null?'暂无数据' : item.parameterSet}}</p>
-                            </div>
+                            </div> -->
                            <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
                               <p>视频通道：</p>
                               <p>{{item.channelNum == null?'暂无数据' : item.channelNum}}</p>
                             </div> -->
                             <div style="display: flex;align-items: center;margin-top: 8px;">
+                             <el-tooltip class="item" effect="dark" content="告警日期" placement="left-start">
                               <p>告警日期：</p>
+                              </el-tooltip>
                               <p>{{item.warnTime == null?'暂无数据' : item.warnTime}}</p>
                             </div>
                             <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
@@ -181,7 +210,9 @@
                               <p>{{item.reportAddress == null?'暂无数据' : item.reportAddress}}</p>
                             </div> -->
                             <div style="display: flex;align-items: center;margin-top: 8px;">
+                               <el-tooltip class="item" effect="dark" content="上报状态" placement="left-start">
                               <p>上报状态：</p>
+                              </el-tooltip>
                               <div><dict-tag :options="dict.type.shagnt" :value="item.reportStatus"/></div>
                             </div>
                             <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
@@ -201,7 +232,7 @@
           </div>
 
 
-          <paginations
+          <pagination
             v-show="total>0"
             :total="total"
             :page.sync="queryParams.pageNum"
@@ -339,6 +370,9 @@ export default {
       },
       // 遮罩层
       loading: true,
+      tooltipTitle: "",
+      showTitle: true,
+      currentNodeId: "",
       defaultSettings:defaultSettings,
       baseUrl: process.env.VUE_APP_BASE_API,
       // 部门树选项
@@ -363,7 +397,7 @@ export default {
             // 查询参数
             queryParams: {
               pageNum: 1,
-              pageSize: 10,
+              pageSize: 8,
               warnType: null,
               warnSign: null,
               channelId: null,
@@ -475,6 +509,7 @@ export default {
   	    this.changeTableMaxHeight()
   },
   mounted() {
+
   // this.init('../../../assets/images/recording_20250626_210102_169_离岗.mp4')
     // this.createMqtt() // 建立mqtt通信
     // this.fullScreen()
@@ -499,6 +534,18 @@ export default {
       // this.disconnect()
     },
   methods: {
+    onShowNameTipsMouseenter(e){
+           var target = e.target;
+                 let textLength = target.clientWidth;
+                 let containerLength = target.scrollWidth;
+                 if (textLength < containerLength) {
+                   this.tooltipTitle = e.target.innerText;
+                   this.showTitle = false;
+                 } else {
+                   this.showTitle = true;
+                 }
+
+        },
     handleError(error) {
           console.error('Video error:', error);
         },
@@ -975,7 +1022,7 @@ export default {
   }
   .ingwe{
     border: 2px solid #03BF8A;
-    height: 330px;
+    height: 273px;
   }
   .shipige{
      padding: 15px;

ruoyi-ui/src/views/shipinggaoj/shebecanshuhuabu/index.vue

@@ -482,7 +482,7 @@
              setTimeout(function() {
               that.initCanvas();
               that.getImage(response.data.photoAddress);
-             }, 2000);
+             }, 1000);
               if (response.data.isChannel != 'N') {
                 this.shapes = JSON.parse(response.data.parameterSet.channelRange)
                 this.form = response.data.parameterSet
@@ -500,7 +500,7 @@
                 let that   = this
                 setTimeout(function() {
                  that.nshgehuixw()
-                }, 5000);
+                }, 2000);
               } else {
                 this.form = {
                   parameterId: null,
@@ -649,8 +649,9 @@
       },
       getImage(row) {
         // 这里请求接口 ...
-        // this.srt = row
-        this.imgUrl =  this.defaultSettings.urls +  process.env.VUE_APP_BASE_API + row ;
+        // this.srt = row +  this.defaultSettings.urls  + process.env.VUE_APP_BASE_API
+        // row = 'http://114.99.51.58:15000/prod-api/profile/image/20250805_103507_11.png'
+        this.imgUrl =  this.defaultSettings.urls  + process.env.VUE_APP_BASE_API +   row ;
         // this.imgUrl = this.srt
         // this.imgWidth = 1920;
         // this.imgHeight = 1080;
@@ -770,12 +771,13 @@
 
             })
           });
-          console.log(polygon,this.shapes,9123)
+          console.log(polygon,this.shapes,9123,this.form.channelId)
           return {
             points: polygon,
             id:t+1,
             name:name,
-            ip:this.ips
+            ip:this.ips,
+            channelId:this.form.channelId
           };
         });
         this.submitData = objectPoints;

ruoyi-ui/src/views/shipinggaoj/shebei/index.vue

@@ -9,7 +9,7 @@
            <span style="margin-left: 10px;">选择部门</span>
           </p>
           <div class=" infinite-list" style="overflow:auto;height:  93vh" >
-            <div class="head-container">
+            <!-- <div class="head-container">
               <el-input
                 v-model="deptName"
                 placeholder="请输入部门名称"
@@ -18,15 +18,14 @@
                 prefix-icon="el-icon-search"
                 style="margin-bottom: 20px"
               />
-            </div>
+            </div> -->
             <div class="head-container">
-              <el-tree
+             <el-tree
                             ref="tree"
                             :data="deptOptions"
                             :props="defaultProps"
                             :expand-on-click-node="false"
                             :filter-node-method="filterNode"
-                            default-expand-all
                             :highlight-current="true"
                             @node-click="handleNodeClick"
                             class="custom-tree"
@@ -38,8 +37,8 @@
                               placement="left-start"
                               slot-scope="{node,data}"
                             >
-                              <span class="span-ellipsis"
-                              style="font-size: 14px; font-weight: 400;"
+                              <span  class="span-ellipsis"
+                              style="font-size: 14px; font-weight: 400; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                               @mouseover="onShowNameTipsMouseenter">
                                 {{node.label}}
                               </span>
@@ -66,10 +65,10 @@
                        <span style="margin-left: 10px;">搜索条件</span>
                       </p>
                       <div style="padding-bottom: 0;margin-bottom: 20px;">
-                        <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
+                        <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="10px">
                           <el-row>
-                              <el-col :span="ishsouetan == false? 7 :  10">
-                               <el-form-item label="设备名称" prop="equipmentName" style="display: flex;">
+                              <el-col :span="ishsouetan == false? 7 :  12">
+                               <el-form-item label="" prop="equipmentName" style="display: flex;">
                                        <el-input
                                        style="width: 100%;"
                                          v-model="queryParams.equipmentName"
@@ -206,7 +205,7 @@
                               </el-tooltip>
                             </div>
                             <!-- <span class="text_20">设备地址：192.168.1.1</span> -->
-                            <span class="text_20" >设备区域：{{item.equipmentRegion}}</span>
+                           <!-- <span class="text_20" >设备区域：{{item.equipmentRegion}}</span> -->
                             <div style="margin-top: 10px;margin-bottom: 10px;">
                               <span class="text_20">安装时间：{{item.equipmentTime}}</span>
                             </div>
@@ -251,11 +250,11 @@
                          <el-input v-model="form.equipmentName" placeholder="请输入设备名称" />
                        </el-form-item>
              </el-col>
-             <el-col :span="24">
+             <!-- <el-col :span="24">
                <el-form-item label="设备区域" prop="equipmentRegion">
                          <el-input v-model="form.equipmentRegion" placeholder="请输入设备区域" />
                        </el-form-item>
-             </el-col>
+             </el-col> -->
              <el-col :span="24">
                <el-form-item label="设备地址" prop="equipmentAddress">
                          <el-input v-model="form.equipmentAddress" placeholder="请输入设备地址" />
@@ -436,8 +435,18 @@ export default {
       },
   methods: {
     onShowNameTipsMouseenter(e){
-            this.tooltipTitle = e.target.innerText;
-            this.showTitle = false;
+      // console.log(e)
+      var target = e.target;
+            let textLength = target.clientWidth;
+            let containerLength = target.scrollWidth;
+            if (textLength < containerLength) {
+              this.tooltipTitle = e.target.innerText;
+              this.showTitle = false;
+            } else {
+              this.showTitle = true;
+            }
+            // this.tooltipTitle = e.target.innerText;
+            // this.showTitle = false;
         },
     // 筛选节点
     filterNode(value, data) {

ruoyi-ui/src/views/shipinggaoj/shishi/index.vue

@@ -1,8 +1,6 @@
 <template>
-  <div class="app-container" style="height: 100vh;"  v-loading="loading"
-    element-loading-text="拼命加载中"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)">
+  <div class="app-container" style="height: 100vh;"
+    >
     <div class="ntgs" style="padding: 0;">
     <el-row :gutter="10" class="mb8">
      <div class="iuer" style="margin-bottom:10px;">
@@ -16,17 +14,18 @@
 						<div style="background-color: #fff;border-radius: 10px;padding: 20px 20px;height: 95vh;">
               <p style="margin: 0;border-left: 6px solid #03BF8A;margin-left: -20px;padding-left: 10px;font-weight: 800; margin-bottom: 15px;">盒子管理</p>
                 <div class=" infinite-list" style="overflow:auto;height:  93vh" >
-                  <div class="head-container">
+                 <!-- <div class="head-container">
                     <el-input
                       v-model="equipmentName"
                       placeholder="请输入设备名称"
                       clearable
+                      @clear="nsdfse"
                       size="small"
                       @blur="nsdfse"
                       prefix-icon="el-icon-search"
                       style="margin-bottom: 10px"
                     />
-                  </div>
+                  </div> -->
                   <div class="head-container">
                     <el-tree
                                   ref="tree"
@@ -46,7 +45,7 @@
                                     placement="left-start"
                                     slot-scope="{node,data}"
                                   >
-                                    <span class="span-ellipsis"
+                                    <span style="font-weight: 400;font-size:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" class="span-ellipsis"
                                     @mouseover="onShowNameTipsMouseenter">
                                       {{node.label}}
                                     </span>
@@ -84,9 +83,9 @@
           <div class="dflext mb10">
             <div style="flex: 1;"></div>
           </div>
-           <div style="display: flex; flex-wrap: wrap;">
-            <div   class="video-container" style="text-align: center; width: 100%; "  v-if="isfse">
-                 <img :src="'http://114.99.51.58:15010/video_feed'"  width="640px" height="420px" id="yolo-stream">
+           <div style="display: flex; flex-wrap: wrap; ">
+            <div   class="video-container" style="text-align: center; width: 100%; height: 75vh; display: flex; align-items: center;justify-content: center; "  v-if="isfse">
+                 <img  @error="defImg" :src="'http://114.99.51.58:15010/video_feed'"  style="width: 90%;height: 75vh;"   id="yolo-stream">
              </div>
              <!-- <div :class="isahsge == 0?'actw' :''" @click="refreshStream('yolo-stream',0)" class="video-container" style="text-align: center; width: 50%; height: 240px; background-color: #CEE8E0; border: 1px solid #75a295;" >
                  <img :src="'http://192.168.101.97:5000/video_feed'"  width="100%" height="240px" id="yolo-stream">
@@ -181,6 +180,7 @@ import { listEquipmentManageNoPage,  } from "@/api/manage/equipmentManage"
 // import flvjs from "flv.js";
 import mqtt from 'mqtt';
 import { MqttClient } from 'mqtt'
+import logoImg from '@/assets/images/pic_jz_zwsp.png'
 import axios from 'axios'
 // 状态变量
  // const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
@@ -204,6 +204,7 @@ export default {
 	  opent:false,
 	  bg:null,
     titles:'',
+    defaultImg:logoImg,
     equipmentName:null,
 	editableTabsValue:'6',
     opens:false,
@@ -376,9 +377,26 @@ export default {
 
     },
   methods: {
+    defImg(){
+      let img = event.srcElement;
+      // console.log(img)
+      	 img.src = this.defaultImg;
+         console.log(img.style.width)
+         img.style.width = "220px"
+         img.style.height = "170px"
+         // img.width=100
+      	 img.onerror = null; //防止闪图
+    },
     onShowNameTipsMouseenter(e){
-            this.tooltipTitle = e.target.innerText;
-            this.showTitle = false;
+            var target = e.target;
+                  let textLength = target.clientWidth;
+                  let containerLength = target.scrollWidth;
+                  if (textLength < containerLength) {
+                    this.tooltipTitle = e.target.innerText;
+                    this.showTitle = false;
+                  } else {
+                    this.showTitle = true;
+                  }
         },
 
     // 筛选节点

ruoyi-ui/src/views/system/config/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form style="background-color: #fff;padding: 10px;padding-top: 20px; padding-bottom: 0; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="参数名称" prop="configName">
         <el-input
           v-model="queryParams.configName"

ruoyi-ui/src/views/system/dept/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form style="background-color: #fff;padding: 10px;border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form style="background-color: #fff;padding: 10px;padding-top: 20px; padding-bottom: 0; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="部门名称" prop="deptName">
         <el-input
           v-model="queryParams.deptName"
@@ -20,17 +20,16 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+        <el-button  size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="primary"
+          type="success"
           plain
-          icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:dept:add']"
@@ -40,7 +39,6 @@
         <el-button
           type="info"
           plain
-          icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
         >展开/折叠</el-button>
@@ -52,12 +50,13 @@
       v-if="refreshTable"
       v-loading="loading"
       :data="deptList"
+      border=""
       row-key="deptId"
       :default-expand-all="isExpandAll"
       :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
     >
       <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
+      <el-table-column prop="orderNum" label="排序" width="200" align="center"></el-table-column>
       <el-table-column prop="status" label="状态" width="100">
         <template slot-scope="scope">
           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
@@ -70,34 +69,57 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" style="width: 42px;height: 26px;
+                                   background: #E5F9F3;
+                                          border-radius: 4px;border: 1px solid #03BF8A;color: #03BF8A;
+                                   " type="text" plain @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dept:edit']">修改</el-button>
+            <el-button size="mini" style="width: 42px;height: 26px;
+                                     background: #EBEFFF;
+                                            border-radius: 4px;border: 1px solid #4D73F8;color: #4D73F8;
+                                     " type="text" plain @click="handleAdd(scope.row)"
+              v-hasPermi="['system:dept:add']">新增</el-button>
+          <el-button size="mini" type="text" style="width: 42px;height: 26px;background: #FFF1EA;
+                                         border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
+            @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']"  v-if="scope.row.parentId != 0">删除</el-button>
+         <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dept:edit']"
-          >修改</el-button>
-          <el-button
+          >修改</el-button> -->
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['system:dept:add']"
-          >新增</el-button>
-          <el-button
+          >新增</el-button> -->
+         <!-- <el-button
             v-if="scope.row.parentId != 0"
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dept:remove']"
-          >删除</el-button>
+          >删除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改部门对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+    <el-drawer
+      :title="title"
+      :visible.sync="open"
+      direction="rtl"
+      custom-class="demo-drawer"
+      ref="drawer"
+      :size="430"
+      :modal="false"
+      >
+      <div class="demo-drawer__content">
+    <!-- <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> -->
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-row>
           <el-col :span="24" v-if="form.parentId !== 0">
@@ -149,11 +171,12 @@
           </el-col>
         </el-row>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+      <div slot="footer" class="dialog-footer" style="padding: 0 20px; float: right;">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
       </div>
-    </el-dialog>
+      </el-drawer>
   </div>
 </template>
 

ruoyi-ui/src/views/system/dict/data.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form style="background-color: #fff;padding: 10px;border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form style="background-color: #fff;padding: 10px;padding-top: 20px; padding-bottom: 0; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="字典名称" prop="dictType">
         <el-select v-model="queryParams.dictType">
           <el-option
@@ -30,8 +30,8 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+        <el-button  size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -40,7 +40,6 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
@@ -50,7 +49,6 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
           size="mini"
           :disabled="single"
           @click="handleUpdate"
@@ -61,7 +59,6 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
@@ -72,7 +69,6 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
@@ -82,7 +78,6 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-close"
           size="mini"
           @click="handleClose"
         >关闭</el-button>
@@ -114,20 +109,15 @@
       </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:dict:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:dict:remove']"
-          >删除</el-button>
+          <el-button size="mini" style="width: 42px;height: 26px;
+                                   background: #E5F9F3;
+                                          border-radius: 4px;border: 1px solid #03BF8A;color: #03BF8A;
+                                   " type="text" plain @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']">修改</el-button>
+          <el-button size="mini" type="text" style="width: 42px;height: 26px;background: #FFF1EA;
+                                         border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
+            @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']"  >删除</el-button>
+
         </template>
       </el-table-column>
     </el-table>

ruoyi-ui/src/views/system/dict/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form style="background-color: #fff;padding: 10px;border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form style="background-color: #fff;padding: 10px;padding-top: 20px; padding-bottom: 0; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="字典名称" prop="dictName">
         <el-input
           v-model="queryParams.dictName"
@@ -46,8 +46,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+        <el-button  size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -56,7 +56,6 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
@@ -66,7 +65,6 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
           size="mini"
           :disabled="single"
           @click="handleUpdate"
@@ -77,7 +75,6 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
@@ -88,7 +85,6 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
@@ -98,7 +94,6 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-refresh"
           size="mini"
           @click="handleRefreshCache"
           v-hasPermi="['system:dict:remove']"
@@ -107,14 +102,14 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
+    <el-table border v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="字典编号" align="center" prop="dictId" />
       <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
       <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
-            <span>{{ scope.row.dictType }}</span>
+            <span style="color: #00A854;">{{ scope.row.dictType }}</span>
           </router-link>
         </template>
       </el-table-column>
@@ -131,20 +126,15 @@
       </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:dict:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:dict:remove']"
-          >删除</el-button>
+          <el-button size="mini" style="width: 42px;height: 26px;
+                                   background: #E5F9F3;
+                                          border-radius: 4px;border: 1px solid #03BF8A;color: #03BF8A;
+                                   " type="text" plain @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']">修改</el-button>
+          <el-button size="mini" type="text" style="width: 42px;height: 26px;background: #FFF1EA;
+                                         border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
+            @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']"  >删除</el-button>
+
         </template>
       </el-table-column>
     </el-table>

ruoyi-ui/src/views/system/menu/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form style="background-color: #fff;padding: 10px;border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form style="background-color: #fff;padding: 10px;padding-top: 20px; padding-bottom: 0; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="菜单名称" prop="menuName">
         <el-input
           v-model="queryParams.menuName"
@@ -20,17 +20,16 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+       <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+       <el-button  size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
-          type="primary"
+          type="success"
           plain
-          icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:menu:add']"
@@ -40,7 +39,6 @@
         <el-button
           type="info"
           plain
-          icon="el-icon-sort"
           size="mini"
           @click="toggleExpandAll"
         >展开/折叠</el-button>
@@ -77,32 +75,43 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
+          <el-button size="mini" style="width: 42px;height: 26px;
+                                   background: #E5F9F3;
+                                          border-radius: 4px;border: 1px solid #03BF8A;color: #03BF8A;
+                                   " type="text" plain @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:menu:edit']">修改</el-button>
+            <el-button size="mini" style="width: 42px;height: 26px;
+                                     background: #EBEFFF;
+                                            border-radius: 4px;border: 1px solid #4D73F8;color: #4D73F8;
+                                     " type="text" plain @click="handleAdd(scope.row)"
+              v-hasPermi="['system:menu:add']">新增</el-button>
+          <el-button size="mini" type="text" style="width: 42px;height: 26px;background: #FFF1EA;
+                                         border-radius: 4px;border: 1px solid #FE570E;color: #FE570E;"
+            @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']"  >删除</el-button>
+          <!-- <el-button
             size="mini"
             type="text"
-            icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:menu:edit']"
           >修改</el-button>
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-plus"
             @click="handleAdd(scope.row)"
             v-hasPermi="['system:menu:add']"
           >新增</el-button>
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:menu:remove']"
-          >删除</el-button>
+          >删除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
 
     <!-- 添加或修改菜单对话框 -->
+
     <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-row>

ruoyi-ui/src/views/system/post/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+  <div class="app-container inghse">
+    <el-form style="background-color: #fff;padding: 10px;padding-bottom: 0; padding-top: 20px; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="岗位编码" prop="postCode">
         <el-input
           v-model="queryParams.postCode"
@@ -17,7 +17,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <!-- <el-form-item label="状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
           <el-option
             v-for="dict in dict.type.sys_normal_disable"
@@ -26,10 +26,10 @@
             :value="dict.value"
           />
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+       <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+       <el-button  size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -38,7 +38,6 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:post:add']"
@@ -48,7 +47,6 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
           size="mini"
           :disabled="single"
           @click="handleUpdate"
@@ -59,7 +57,6 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
@@ -70,7 +67,6 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:post:export']"
@@ -78,42 +74,65 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <div class="infinite-list" :style="dynamicStyle">
+      <el-row :gutter="10" style="margin: 0; ">
+        <el-col     :span="6" v-for="(item,index) in postList" :key="index">
+          <div class="section_11 flex-col" style="position: relative;">
+                    <div class="section_12 flex-row" style="justify-content: space-between;">
+                      <div style="display: flex;width: 82%;">
+                        <div class="text-wrapper_14 flex-col">
+                          <span class="text_25">{{item.postId}}</span>
+                        </div>
+                        <div style="width: 84%; display: flex;">
+                          <el-tooltip class="item" effect="dark" :content="item.postName" placement="top-start">
+                          <span class="text_26" style="height: 40px;">{{item.postName}}</span>
+                          </el-tooltip>
+                          <img
+                           @click="handleUpdate(item)" v-hasPermi="['system:post:edit']"
+                            class="thumbnail_14"
+                            referrerpolicy="no-referrer"
+                            style="cursor: pointer;"
+                            src="../../../assets/images/icon_htgl_rylb_bjs.png"
+                          />
+                          <img
+                           @click="handleDelete(item)" v-hasPermi="['system:post:remove']"
+                            class="thumbnail_14"
+                            referrerpolicy="no-referrer"
+                            style="cursor: pointer;"
+                            src="../../../assets/images/icon_lby_gdtc_del.png"
+                          />
+                        </div>
+                      </div>
+                      <div>
+                         <el-switch v-model="item.status" active-value="0" inactive-value="1" @change="handleStatusChange(item)"></el-switch>
+                      </div>
+
+                    </div>
+                    <div class="text-wrapper_15 ">
+                      <div style="display: flex">
+                        <p class="paragraph_5">岗位名称：</p>
+                        <el-tooltip class="item" effect="dark" :content="'岗位名称:' + item.postName" placement="left-start">
+                        <p class="paragraph_5">{{item.postName}}</p>
+                        </el-tooltip>
+                      </div>
+                      <div style="display: flex">
+                        <p class="paragraph_5">岗位排序：</p>
+                        <el-tooltip class="item" effect="dark" :content="'岗位排序:' + item.postSort" placement="left-start">
+                        <p class="paragraph_5">{{item.postSort}}</p>
+                        </el-tooltip>
+                      </div>
+                      <div style="display: flex">
+                        <p class="paragraph_5">创建时间：</p>
+                       <el-tooltip class="item" effect="dark" :content="'创建时间:' + item.createTime" placement="left-start">
+                       <p class="paragraph_5">{{item.createTime}}</p>
+                       </el-tooltip>
+                      </div>
+                    </div>
 
-    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="岗位编号" align="center" prop="postId" />
-      <el-table-column label="岗位编码" align="center" prop="postCode" />
-      <el-table-column label="岗位名称" align="center" prop="postName" />
-      <el-table-column label="岗位排序" align="center" prop="postSort" />
-      <el-table-column label="状态" align="center" prop="status">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </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:post:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:post:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+                  </div>
+        </el-col>
+      </el-row>
+    </div>
 
     <pagination
       v-show="total>0"
@@ -124,7 +143,17 @@
     />
 
     <!-- 添加或修改岗位对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-drawer
+      :title="title"
+      :visible.sync="open"
+      direction="rtl"
+      custom-class="demo-drawer"
+      ref="drawer"
+      :size="330"
+      :modal="false"
+      >
+      <div class="demo-drawer__content">
+    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> -->
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="岗位名称" prop="postName">
           <el-input v-model="form.postName" placeholder="请输入岗位名称" />
@@ -148,11 +177,12 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer" style="padding: 0 20px; float: right;">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -185,7 +215,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 8,
         postCode: undefined,
         postName: undefined,
         status: undefined
@@ -203,12 +233,32 @@ export default {
         postSort: [
           { required: true, message: "岗位顺序不能为空", trigger: "blur" }
         ]
-      }
+      },
+      tableMaxHeight:200
     }
   },
   created() {
     this.getList()
+  window.onresize = () => {
+         	      this.changeTableMaxHeight()
+         	    }
+         	    this.changeTableMaxHeight()
   },
+  computed: {
+    dynamicStyle() {
+      return {
+        overflow:'auto',
+        height:  this.tableMaxHeight + 'px',
+      }
+    }
+    },
+    mounted() {
+
+    	window.onresize = () => {
+    	          this.changeTableMaxHeight()
+    	        }
+    	        this.changeTableMaxHeight()
+    },
   methods: {
     /** 查询岗位列表 */
     getList() {
@@ -224,6 +274,16 @@ export default {
       this.open = false
       this.reset()
     },
+    handleStatusChange(row) {
+      let text = row.status === "0" ? "启用" : "停用"
+      this.$modal.confirm('确认要"' + text + '""' + row.postName + '"角色吗？').then(function() {
+        return updatePost(row)
+      }).then(() => {
+        this.$modal.msgSuccess(text + "成功")
+      }).catch(function() {
+        row.status = row.status === "0" ? "1" : "0"
+      })
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -303,7 +363,21 @@ export default {
       this.download('system/post/export', {
         ...this.queryParams
       }, `post_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 获取屏幕高度
+                showFilterForm () {
+                      this.filterActive = !this.filterActive
+                      this.changeTableMaxHeight()
+                    },
+                    changeTableMaxHeight () {
+                      let height = document.body.offsetHeight // 网页可视区域高度
+                      // if (this.filterActive) {
+                      //   this.tableMaxHeight = height - 320
+                      // } else {
+                        this.tableMaxHeight = height - 250
+                      // }
+                      console.log(height)
+                    }
   }
 }
 </script>

ruoyi-ui/src/views/system/role/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <el-form style="background-color: #fff;padding: 10px;border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+  <div class="app-container inghse">
+    <el-form style="background-color: #fff;padding: 10px;padding-bottom: 0; padding-top: 20px; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
       <el-form-item label="角色名称" prop="roleName">
         <el-input
           v-model="queryParams.roleName"
@@ -10,7 +10,7 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="权限字符" prop="roleKey">
+      <!-- <el-form-item label="权限字符" prop="roleKey">
         <el-input
           v-model="queryParams.roleKey"
           placeholder="请输入权限字符"
@@ -18,8 +18,8 @@
           style="width: 240px"
           @keyup.enter.native="handleQuery"
         />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
+      </el-form-item> -->
+      <!-- <el-form-item label="状态" prop="status">
         <el-select
           v-model="queryParams.status"
           placeholder="角色状态"
@@ -33,7 +33,7 @@
             :value="dict.value"
           />
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="创建时间">
         <el-date-picker
           v-model="dateRange"
@@ -46,8 +46,8 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+        <el-button  size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -56,7 +56,6 @@
         <el-button
           type="primary"
           plain
-          icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:role:add']"
@@ -66,7 +65,6 @@
         <el-button
           type="success"
           plain
-          icon="el-icon-edit"
           size="mini"
           :disabled="single"
           @click="handleUpdate"
@@ -77,7 +75,6 @@
         <el-button
           type="danger"
           plain
-          icon="el-icon-delete"
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
@@ -88,7 +85,6 @@
         <el-button
           type="warning"
           plain
-          icon="el-icon-download"
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:role:export']"
@@ -96,57 +92,62 @@
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <div class="infinite-list" :style="dynamicStyle">
+     <el-row :gutter="10" style="margin: 0; ">
+        <el-col     :span="6" v-for="(item,index) in roleList" :key="index">
+          <div class="section_11 flex-col" style="position: relative;">
+                    <div class="section_12 flex-row" style="justify-content: space-between;">
+                      <div style="display: flex;width: 82%;">
+                        <div class="text-wrapper_14 flex-col">
+                          <span class="text_25">{{item.roleId}}</span>
+                        </div>
+                        <div style="width: 84%; display: flex;">
+                          <el-tooltip class="item" effect="dark" :content="item.roleName" placement="top-start">
+                          <span class="text_26" style="height: 30px;">{{item.roleName}}</span>
+                          </el-tooltip>
+                          <img
+                           @click="handleUpdate(item)" v-hasPermi="['system:role:edit']"
+                            class="thumbnail_14"
+                            referrerpolicy="no-referrer"
+                            style="cursor: pointer;"
+                            src="../../../assets/images/icon_htgl_rylb_bjs.png"
+                          />
+                        </div>
+                      </div>
+                      <div>
+                         <el-switch v-model="item.status" active-value="0" inactive-value="1" @change="handleStatusChange(item)"></el-switch>
+                      </div>
 
-    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="角色编号" prop="roleId" width="120" />
-      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
-      <el-table-column label="显示顺序" prop="roleSort" width="100" />
-      <el-table-column label="状态" align="center" width="100">
-        <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="0"
-            inactive-value="1"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:role:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:role:remove']"
-          >删除</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-
+                    </div>
+                    <div class="text-wrapper_15 ">
+                      <div style="display: flex">
+                        <p class="paragraph_5">权限字符：</p>
+                        <el-tooltip class="item" effect="dark" :content="'权限字符:' + item.roleKey" placement="left-start">
+                        <p class="paragraph_5">{{item.roleKey}}</p>
+                        </el-tooltip>
+                      </div>
+                      <div style="display: flex">
+                        <p class="paragraph_5">显示顺序：</p>
+                        <el-tooltip class="item" effect="dark" :content="'显示顺序:' + item.roleSort" placement="left-start">
+                        <p class="paragraph_5">{{item.roleSort}}</p>
+                        </el-tooltip>
+                      </div>
+                      <div style="display: flex">
+                        <p class="paragraph_5">创建时间：</p>
+                       <el-tooltip class="item" effect="dark" :content="'创建时间:' + item.createTime" placement="left-start">
+                       <p class="paragraph_5">{{item.createTime}}</p>
+                       </el-tooltip>
+                      </div>
+                    </div>
+                    <div style="display: flex;" class="njgsebott">
+                      <p @click="handleDelete(item)" v-hasPermi="['system:role:remove']">删除信息</p>
+                      <p @click="handleDataScope(item)"  v-hasPermi="['system:role:edit']">数据权限</p>
+                      <p @click="handleAuthUser(item)"  v-hasPermi="['system:role:edit']">分配用户</p>
+                    </div>
+                  </div>
+        </el-col>
+      </el-row>
+    </div>
     <pagination
       v-show="total>0"
       :total="total"
@@ -156,7 +157,17 @@
     />
 
     <!-- 添加或修改角色配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-drawer
+      :title="title"
+      :visible.sync="open"
+      direction="rtl"
+      custom-class="demo-drawer"
+      ref="drawer"
+      :size="380"
+      :modal="false"
+      >
+      <div class="demo-drawer__content">
+    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> -->
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="角色名称" prop="roleName">
           <el-input v-model="form.roleName" placeholder="请输入角色名称" />
@@ -201,14 +212,26 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer" style="padding: 0 20px; float: right;">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
-    </el-dialog>
+    <!-- </el-dialog> -->
+    </div>
+    </el-drawer>
 
     <!-- 分配角色数据权限对话框 -->
-    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+   <el-drawer
+     :title="title"
+     :visible.sync="openDataScope"
+     direction="rtl"
+     custom-class="demo-drawer"
+     ref="drawer"
+     :size="380"
+     :modal="false"
+     >
+     <div class="demo-drawer__content">
+    <!-- <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body> -->
       <el-form :model="form" label-width="80px">
         <el-form-item label="角色名称">
           <el-input v-model="form.roleName" :disabled="true" />
@@ -243,11 +266,13 @@
           ></el-tree>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      <div slot="footer" class="dialog-footer" style="padding: 0 20px; float: right;">
         <el-button type="primary" @click="submitDataScope">确 定</el-button>
         <el-button @click="cancelDataScope">取 消</el-button>
       </div>
-    </el-dialog>
+    <!-- </el-dialog> -->
+    </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -316,7 +341,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 8,
         roleName: undefined,
         roleKey: undefined,
         status: undefined
@@ -338,12 +363,32 @@ export default {
         roleSort: [
           { required: true, message: "角色顺序不能为空", trigger: "blur" }
         ]
-      }
+      },
+      tableMaxHeight:200
     }
   },
   created() {
     this.getList()
+    window.onresize = () => {
+         	      this.changeTableMaxHeight()
+         	    }
+         	    this.changeTableMaxHeight()
   },
+  computed: {
+    dynamicStyle() {
+      return {
+        overflow:'auto',
+        height:  this.tableMaxHeight + 'px',
+      }
+    }
+    },
+    mounted() {
+
+    	window.onresize = () => {
+    	          this.changeTableMaxHeight()
+    	        }
+    	        this.changeTableMaxHeight()
+    },
   methods: {
     /** 查询角色列表 */
     getList() {
@@ -599,7 +644,22 @@ export default {
       this.download('system/role/export', {
         ...this.queryParams
       }, `role_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 获取屏幕高度
+                showFilterForm () {
+                      this.filterActive = !this.filterActive
+                      this.changeTableMaxHeight()
+                    },
+
+                    changeTableMaxHeight () {
+                      let height = document.body.offsetHeight // 网页可视区域高度
+                      // if (this.filterActive) {
+                      //   this.tableMaxHeight = height - 320
+                      // } else {
+                        this.tableMaxHeight = height - 250
+                      // }
+                      console.log(height)
+                    }
   }
 }
 </script>

ruoyi-ui/src/views/system/user/authRole.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="app-container">
-    <h4 class="form-header h4">基本信息</h4>
-    <el-form ref="form" :model="form" label-width="80px">
-      <el-row>
-        <el-col :span="8" :offset="2">
-          <el-form-item label="用户昵称" prop="nickName">
-            <el-input v-model="form.nickName" disabled />
-          </el-form-item>
-        </el-col>
-        <el-col :span="8" :offset="2">
-          <el-form-item label="登录账号" prop="userName">
-            <el-input v-model="form.userName" disabled />
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
+    <div style="background-color: #fff; border-radius: 10px;padding-top: 10px;">
+      <h4 class="form-header h4">基本信息</h4>
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-row>
+          <el-col :span="8" :offset="2">
+            <el-form-item label="用户昵称" prop="nickName">
+              <el-input v-model="form.nickName" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" :offset="2">
+            <el-form-item label="登录账号" prop="userName">
+              <el-input v-model="form.userName" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
 
-    <h4 class="form-header h4">角色信息</h4>
+    <div style="background-color: #fff; border-radius: 5px; padding: 5px 0; margin-top: 10px; margin-bottom: 10px;">
+      <h4 class="form-header h4" >角色信息</h4>
+    </div>
     <el-table v-loading="loading" :row-key="getRowKey" @row-click="clickRow" ref="table" @selection-change="handleSelectionChange" :data="roles.slice((pageNum-1)*pageSize,pageNum*pageSize)">
       <el-table-column label="序号" type="index" align="center">
         <template slot-scope="scope">
@@ -120,4 +124,4 @@ export default {
     }
   }
 }
-</script>
+</script>

ruoyi-ui/src/views/system/user/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container heue">
+  <div class="app-container heue inghse">
     <el-row :gutter="20">
       <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
         <!--部门数据-->
@@ -16,47 +16,112 @@
         <!--用户数据-->
         <pane size="84">
           <el-col>
-            <el-form style="background-color: #fff;padding: 10px;border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+            <el-form style="background-color: #fff;padding: 10px;padding-top: 20px; padding-bottom: 0; border-radius: 10px;margin-bottom: 20px;" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
               <el-form-item label="用户名称" prop="userName">
                 <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
               </el-form-item>
-              <el-form-item label="手机号码" prop="phonenumber">
+             <!-- <el-form-item label="手机号码" prop="phonenumber">
                 <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
-              </el-form-item>
-              <el-form-item label="状态" prop="status">
+              </el-form-item> -->
+              <!-- <el-form-item label="状态" prop="status">
                 <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
                   <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
                 </el-select>
-              </el-form-item>
+              </el-form-item> -->
               <el-form-item label="创建时间">
                 <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+                <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary"  size="mini" @click="handleQuery">搜索</el-button>
+                <el-button  size="mini" @click="resetQuery">重置</el-button>
               </el-form-item>
             </el-form>
 
             <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:user:add']">新增</el-button>
+                <el-button type="success" plain  size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
               </el-col>
-              <el-col :span="1.5">
+             <!-- <el-col :span="1.5">
                 <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
-              </el-col>
+              </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:user:remove']">删除</el-button>
+                <el-button type="danger" plain  size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
+                <el-button type="info" plain  size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</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:user:export']">导出</el-button>
+                <el-button type="warning" plain  size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
               </el-col>
               <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
             </el-row>
 
-            <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+
+            <div class="infinite-list" :style="dynamicStyle">
+              <el-row :gutter="10" style="margin: 0; ">
+                <el-col   :span="6" v-for="(item,index) in userList" :key="index">
+                  <div class="section_11 flex-col" style="position: relative;">
+                            <div class="section_12 flex-row" style="justify-content: space-between;">
+                              <div style="display: flex;width: 82%;">
+                                <div class="text-wrapper_14 flex-col">
+                                  <span class="text_25">{{item.userId}}</span>
+                                </div>
+                                <div style="width: 84%; display: flex;">
+                                  <el-tooltip class="item" effect="dark" :content="item.userName" placement="top-start">
+                                  <span class="text_26">{{item.userName}}</span>
+                                  </el-tooltip>
+                                  <img
+                                   @click="handleUpdate(item)" v-hasPermi="['system:user:edit']"
+                                    class="thumbnail_14"
+                                    referrerpolicy="no-referrer"
+                                    style="cursor: pointer;"
+                                    src="../../../assets/images/icon_htgl_rylb_bjs.png"
+                                  />
+                                </div>
+                              </div>
+                              <div>
+                                 <el-switch v-model="item.status" active-value="0" inactive-value="1" @change="handleStatusChange(item)"></el-switch>
+                              </div>
+
+                            </div>
+                            <div class="text-wrapper_15 ">
+                              <div style="display: flex">
+                                <p class="paragraph_5">用户昵称：</p>
+                                <el-tooltip class="item" effect="dark" :content="'用户昵称:' + item.nickName" placement="left-start">
+                                <p class="paragraph_5">{{item.nickName}}</p>
+                                </el-tooltip>
+                              </div>
+                              <div style="display: flex">
+                                <p class="paragraph_5">手机号码：</p>
+                                <el-tooltip class="item" effect="dark" :content="'手机号码:' + item.phonenumber" placement="left-start">
+                                <p class="paragraph_5">{{item.phonenumber}}</p>
+                                </el-tooltip>
+                              </div>
+                              <div style="display: flex">
+                                <p class="paragraph_5">创建时间：</p>
+                               <el-tooltip class="item" effect="dark" :content="'创建时间:' + item.createTime" placement="left-start">
+                               <p class="paragraph_5">{{item.createTime}}</p>
+                               </el-tooltip>
+                              </div>
+                            </div>
+                            <div class="section_13 flex-row justify-between">
+                              <div class="text-wrapper_16 flex-col">
+                                <el-tooltip class="item" effect="dark" content="潜山市数据局技术部门" placement="left-start">
+                                <span class="text_27" v-if="item.dept != null">{{item.dept.deptName}}</span>
+                                <span class="text_27" v-if="item.dept == null">暂无部门</span>
+                                 </el-tooltip>
+                              </div>
+                            </div>
+                            <div style="display: flex;" class="njgsebott">
+                              <p @click="handleDelete(item)" v-hasPermi="['system:user:remove']">删除信息</p>
+                              <p @click="handleResetPwd(item)" v-hasPermi="['system:user:resetPwd']">重置密码</p>
+                              <p @click="handleAuthRole(item)" v-hasPermi="['system:user:edit']">分配角色</p>
+                            </div>
+                          </div>
+                </el-col>
+              </el-row>
+            </div>
+            <!-- <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
               <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />
               <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />
@@ -86,7 +151,7 @@
                   </el-dropdown>
                 </template>
               </el-table-column>
-            </el-table>
+            </el-table> -->
 
             <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
           </el-col>
@@ -95,89 +160,99 @@
     </el-row>
 
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户昵称" prop="nickName">
-              <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="归属部门" prop="deptId">
-              <treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true" placeholder="请选择归属部门" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="手机号码" prop="phonenumber">
-              <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="邮箱" prop="email">
-              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
-              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
-              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="用户性别">
-              <el-select v-model="form.sex" placeholder="请选择性别">
-                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="状态">
-              <el-radio-group v-model="form.status">
-                <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="岗位">
-              <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
-                <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1" ></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="角色">
-              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
-                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="备注">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+    <el-drawer
+      :title="title"
+      :visible.sync="open"
+      direction="rtl"
+      custom-class="demo-drawer"
+      ref="drawer"
+      :size="580"
+      :modal="false"
+      >
+      <div class="demo-drawer__content">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户昵称" prop="nickName">
+                <el-input v-model="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="归属部门" prop="deptId">
+                <treeselect v-model="form.deptId" :options="enabledDeptOptions" :show-count="true" placeholder="请选择归属部门" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="手机号码" prop="phonenumber">
+                <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="邮箱" prop="email">
+                <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+                <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+                <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="用户性别">
+                <el-select v-model="form.sex" placeholder="请选择性别">
+                  <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="状态">
+                <el-radio-group v-model="form.status">
+                  <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="岗位">
+                <el-select v-model="form.postIds" multiple placeholder="请选择岗位">
+                  <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postId" :disabled="item.status == 1" ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="角色">
+                <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
+                  <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId" :disabled="item.status == 1"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备注">
+                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <div slot="footer" class="dialog-footer" style="padding: 0 20px; float: right;">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
       </div>
-    </el-dialog>
+      </el-drawer>
 
     <!-- 用户导入对话框 -->
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
@@ -270,7 +345,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 8,
         userName: undefined,
         phonenumber: undefined,
         status: undefined,
@@ -314,7 +389,8 @@ export default {
             trigger: "blur"
           }
         ]
-      }
+      },
+      tableMaxHeight:200
     }
   },
   watch: {
@@ -329,13 +405,45 @@ export default {
     this.getConfigKey("sys.user.initPassword").then(response => {
       this.initPassword = response.msg
     })
+    window.onresize = () => {
+           	      this.changeTableMaxHeight()
+           	    }
+           	    this.changeTableMaxHeight()
   },
+  computed: {
+    dynamicStyle() {
+      return {
+        overflow:'auto',
+        height:  this.tableMaxHeight + 'px',
+      }
+    }
+    },
+    mounted() {
+
+    	window.onresize = () => {
+    	          this.changeTableMaxHeight()
+    	        }
+    	        this.changeTableMaxHeight()
+    },
   methods: {
+    showContent(item) {
+      // console.log(item.isHidden,3)
+    	this.$set(item,'isHidden',true);
+      // console.log(item.isHidden,2)
+      // console.log(item,2)
+      },
+      hideContent(item) {
+    	  this.$set(item, 'isHidden', false);
+        // console.log(item)
+      },
     /** 查询用户列表 */
     getList() {
       this.loading = true
       listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
           this.userList = response.rows
+          this.userList.filter(rou=>{
+          	rou.isHidden = false
+          })
           this.total = response.total
           this.loading = false
         }
@@ -547,7 +655,21 @@ export default {
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit()
-    }
+    },
+    // 获取屏幕高度
+                showFilterForm () {
+                      this.filterActive = !this.filterActive
+                      this.changeTableMaxHeight()
+                    },
+                    changeTableMaxHeight () {
+                      let height = document.body.offsetHeight // 网页可视区域高度
+                      // if (this.filterActive) {
+                      //   this.tableMaxHeight = height - 320
+                      // } else {
+                        this.tableMaxHeight = height - 250
+                      // }
+                      console.log(height)
+                    }
   }
 }
 </script>
@@ -558,4 +680,13 @@ export default {
   .heue .splitpanes.default-theme .splitpanes__pane{
     background: linear-gradient(180deg, #E7F5F1, #F6F9FA);
   }
+
+
+</style>
+<style lang="scss">
+  .unsfe{
+    background: #FFFFFF;
+    border-radius: 10px;
+  }
+
 </style>