tj

src/layout/components/Navbar.vue

@@ -11,11 +11,8 @@
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search v-if="false" id="header-search" class="right-menu-item" />
-
         <error-log class="errLog-container right-menu-item hover-effect" />
-
         <screenfull v-if="false" id="screenfull" class="right-menu-item hover-effect" />
-
         <el-tooltip v-if="false" content="Global Size" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip>
@@ -28,12 +25,11 @@
           :class="sideMenuTabIndex===tab.id?'active-'+sideMenuTabIndex:''"
           @click="sideTabChange(tab.id,tab)"
         >
-          <!-- <i class="iconfont" :class="tab.icon" /> -->
           <template v-if="sideMenuTabIndex===tab.id">
-            <img :src="tab.icon" alt="">
+            <img :src="tab.iconSelectEd" :alt="tab.name">
           </template>
           <template v-else>
-            <img :src="tab.iconSelectEd" alt="">
+            <img :src="tab.icon" :alt="tab.name">
           </template>
           <p>{{ tab.name }}</p>
         </div>
@@ -41,12 +37,15 @@
 
       <div class="right-menu-item" @click="navToPage('/message')">
         <el-badge :is-dot="false" class="nav-icon">
-          <i class="el-icon-message-solid" />
+          <img class="icon" src="@/assets/images/Navbar/notice.png" alt="">
+          <span class="name">预警信息</span>
         </el-badge>
       </div>
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <el-avatar v-if="userData" :src="userData.userAvatar" />
+          <!-- <el-avatar v-if="userData" :src="userData.userAvatar" /> -->
+          <img class="icon" src="@/assets/images/Navbar/user.png" alt="">
+          <span class="name">{{ userData.userName|'***' }}</span>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
@@ -259,7 +258,6 @@ export default {
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
       height: 100%;
       font-size: 18px;
       color: #fff;
@@ -277,9 +275,7 @@ export default {
 
     .avatar-container {
       margin-right: 30px;
-
       .avatar-wrapper {
-        margin-top: 12px;
         position: relative;
 
         .user-avatar {
@@ -325,15 +321,15 @@ export default {
         &.active-8{color: #bd966f;font-weight: 600;}
         &.active-9{color: #832188;font-weight: 600;}
         &.active-10{color: #66db8f;font-weight: 600;}
+         img{
+            display: block;
+            width:  28px;
+          }
         .iconfont{
           color: inherit;
         }
         .iconfont{
           font-size: 36px;
-          img{
-            display: block;
-            width:  36px;
-          }
           &.el-icon-s-platform{
                 font-family: "element-icons" !important;
           }
@@ -347,8 +343,26 @@ export default {
           font-size: 14px;
           color: #fff;
         }
+        &[class*="active-"]{
+          p{
+            color: #1890FF;
+          }
+        }
       }
     }
   }
+  .nav-icon,.avatar-wrapper{
+    display: flex;
+    align-items: center;
+    .iocn{
+      display: block;
+      width: 24px;
+    }
+    .name{
+      color:rgba(255, 255, 255, 0.76);
+      font-size:14px;
+      margin-left:5px;
+    }
+  }
 }
 </style>

src/utils/index.js

@@ -597,6 +597,13 @@ export function NumConvertLM(num) {
   }
   return CorrectArr.join('')
 }
+export function isEmpty(val) {
+  if (val === undefined || val === 'undefined' || val === null || val === '' || val === ' ') {
+    return true
+  }
+  return false
+}
+
 // 风险类型
 export function riskType(val) {
   const strs = [

src/views/goaf/info/components/Goaf.vue

@@ -4,94 +4,92 @@
     :modal-append-to-body="false"
     :modal="false"
     :wrapper-closable="false"
-    size="36%"
+    size="60%"
     :visible.sync="dialogVisible"
+    custom-class="goaf-form-drawer"
   >
     <div class="content-container goaf">
-      <vuescroll :ops="ops" style="height: calc(100vh - 220px)">
-        <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="top">
-          <el-form-item label="采空区名称" prop="goafName">
-            <el-input v-model="formData.goafName" style="width:50%" />
-          </el-form-item>
-          <el-form-item label="矿带" required>
-            <el-input-number v-model="formData.goafOrebelt" placeholder="矿带" :controls="false" />
-          </el-form-item>
-          <el-form-item label="矿体" required>
-            <el-input-number v-model="formData.goafOrebody" placeholder="矿体" :controls="false" />
-          </el-form-item>
-          <el-form-item label="中段" required>
-            <el-input-number v-model="formData.goafOreheight" placeholder="中段" :controls="false" />
-          </el-form-item>
-          <el-form-item label="水平断面均暴露面积" required>
-            <el-input-number v-model="formData.goafAvexArea" placeholder="水平断面均暴露面积" :controls="false" />
-          </el-form-item>
-          <el-form-item label="平均倾向宽度" required>
-            <el-input-number v-model="formData.goafAvinWidth" placeholder="平均倾向宽度" :controls="false" />
-          </el-form-item>
-          <el-form-item label="平均暴露高度" required>
-            <el-input-number v-model="formData.goafAvexHeight" placeholder="平均暴露高度 0.0表示“已填充”" :controls="false" />
-          </el-form-item>
-          <el-form-item label="体积" required>
-            <el-input-number v-model="formData.goafVoidVolume" placeholder="体积 0表示“已填充”" :controls="false" />
-          </el-form-item>
-          <el-form-item label="倾向" required>
-            <el-input-number v-model="formData.goafKeyTrend" placeholder="倾向" :controls="false" />
-          </el-form-item>
-          <el-form-item label="倾角（度）" required>
-            <el-input-number v-model="formData.goafKeyDipangle" placeholder="倾角（度）" :controls="false" />
-          </el-form-item>
-          <el-form-item label="顶板矿柱厚度" required>
-            <el-input-number v-model="formData.goafRoofpillarThickness" placeholder="顶板矿柱厚度" :controls="false" />
-          </el-form-item>
-          <el-form-item label="顶板矿柱厚度" required>
-            <el-input-number v-model="formData.goafRoofpillarThickness" placeholder="顶板矿柱厚度" :controls="false" />
-          </el-form-item>
-          <el-form-item label="保安间柱平均厚度" required>
-            <el-input-number v-model="formData.goafIncoavThickness" placeholder="保安间柱平均厚度" :controls="false" />
-          </el-form-item>
-          <el-form-item label="勘探位置" prop="goafExpLocation">
-            <el-input v-model="formData.goafExpLocation" style="width:200px" />
-          </el-form-item>
-          <el-form-item label="围岩岩性" prop="goafRockLithology">
-            <el-input v-model="formData.goafRockLithology" style="width:200px" />
-          </el-form-item>
-          <el-form-item label="围岩稳定性" prop="goafRockStability">
-            <el-input v-model="formData.goafRockStability" style="width:200px" />
-          </el-form-item>
-          <el-form-item label="形成时间" required>
-            <el-date-picker
-              v-model="formData.goafFormationTime"
-              type="date"
-              placeholder="请选择形成时间"
-              class="date"
-              value-format="yyyy-MM-dd"
-              :default-value="new Date()"
-              style="width:200px"
-            />
-          </el-form-item>
-          <el-form-item label="可充填体积（m³）" required>
-            <el-input-number v-model="formData.goafCanfillVolume" placeholder="可充填体积（m³）" :controls="false" />
-          </el-form-item>
-          <el-form-item label="剩余可充填体积（m³）" required>
-            <el-input-number v-model="formData.goafRemainVolume" placeholder="剩余可充填体积（m³）" :controls="false" />
-          </el-form-item>
-          <el-form-item label="充填方式" prop="goafFillMethod">
-            <el-select v-model="formData.goafFillMethod" style="width:200px">
-              <el-option :value="0" label="废石" />
-              <el-option :value="1" label="尾矿" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="是否填充" prop="goafIsFill">
-            <el-select v-model="formData.goafIsFill" style="width:200px">
-              <el-option :value="0" label="是" />
-              <el-option :value="1" label="否" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="备注" prop="goafInfoRemak" required>
-            <el-input v-model="formData.goafInfoRemak" type="textarea" rows="5" style="width:90%" />
-          </el-form-item>
-        </el-form>
-      </vuescroll>
+      <el-form ref="ruleForm" :model="formData" :rules="rules" label-position="top" class="goaf-form">
+        <el-form-item label="采空区名称" prop="goafName">
+          <el-input v-model="formData.goafName" />
+        </el-form-item>
+        <el-form-item label="矿带" required>
+          <el-input-number v-model="formData.goafOrebelt" placeholder="矿带" :controls="false" />
+        </el-form-item>
+        <el-form-item label="矿体" required>
+          <el-input-number v-model="formData.goafOrebody" placeholder="矿体" :controls="false" />
+        </el-form-item>
+        <el-form-item label="中段" required>
+          <el-input-number v-model="formData.goafOreheight" placeholder="中段" :controls="false" />
+        </el-form-item>
+        <el-form-item label="水平断面均暴露面积" required>
+          <el-input-number v-model="formData.goafAvexArea" placeholder="水平断面均暴露面积" :controls="false" />
+        </el-form-item>
+        <el-form-item label="平均倾向宽度" required>
+          <el-input-number v-model="formData.goafAvinWidth" placeholder="平均倾向宽度" :controls="false" />
+        </el-form-item>
+        <el-form-item label="平均暴露高度" required>
+          <el-input-number v-model="formData.goafAvexHeight" placeholder="平均暴露高度 0.0表示“已填充”" :controls="false" />
+        </el-form-item>
+        <el-form-item label="体积" required>
+          <el-input-number v-model="formData.goafVoidVolume" placeholder="体积 0表示“已填充”" :controls="false" />
+        </el-form-item>
+        <el-form-item label="倾向" required>
+          <el-input-number v-model="formData.goafKeyTrend" placeholder="倾向" :controls="false" />
+        </el-form-item>
+        <el-form-item label="倾角（度）" required>
+          <el-input-number v-model="formData.goafKeyDipangle" placeholder="倾角（度）" :controls="false" />
+        </el-form-item>
+        <el-form-item label="顶板矿柱厚度" required>
+          <el-input-number v-model="formData.goafRoofpillarThickness" placeholder="顶板矿柱厚度" :controls="false" />
+        </el-form-item>
+        <el-form-item label="顶板矿柱厚度" required>
+          <el-input-number v-model="formData.goafRoofpillarThickness" placeholder="顶板矿柱厚度" :controls="false" />
+        </el-form-item>
+        <el-form-item label="保安间柱平均厚度" required>
+          <el-input-number v-model="formData.goafIncoavThickness" placeholder="保安间柱平均厚度" :controls="false" />
+        </el-form-item>
+        <el-form-item label="勘探位置" prop="goafExpLocation">
+          <el-input v-model="formData.goafExpLocation" />
+        </el-form-item>
+        <el-form-item label="围岩岩性" prop="goafRockLithology">
+          <el-input v-model="formData.goafRockLithology" />
+        </el-form-item>
+        <el-form-item label="围岩稳定性" prop="goafRockStability">
+          <el-input v-model="formData.goafRockStability" />
+        </el-form-item>
+        <el-form-item label="形成时间" required>
+          <el-date-picker
+            v-model="formData.goafFormationTime"
+            type="date"
+            placeholder="请选择形成时间"
+            class="date"
+            value-format="yyyy-MM-dd"
+            :default-value="new Date()"
+          />
+        </el-form-item>
+        <el-form-item label="可充填体积（m³）" required>
+          <el-input-number v-model="formData.goafCanfillVolume" placeholder="可充填体积（m³）" :controls="false" />
+        </el-form-item>
+        <el-form-item label="剩余可充填体积（m³）" required>
+          <el-input-number v-model="formData.goafRemainVolume" placeholder="剩余可充填体积（m³）" :controls="false" />
+        </el-form-item>
+        <el-form-item label="充填方式" prop="goafFillMethod">
+          <el-select v-model="formData.goafFillMethod">
+            <el-option :value="0" label="废石" />
+            <el-option :value="1" label="尾矿" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否填充" prop="goafIsFill">
+          <el-select v-model="formData.goafIsFill">
+            <el-option :value="0" label="是" />
+            <el-option :value="1" label="否" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注" prop="goafInfoRemak" required>
+          <el-input v-model="formData.goafInfoRemak" type="textarea" rows="5" />
+        </el-form-item>
+      </el-form>
       <div class="btn-group">
         <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
         <el-button class="cancel-btn" @click="dialogVisible = false">取消</el-button>
@@ -102,12 +100,8 @@
 
 <script>
 import { createGoaf, updateGoaf } from '@/api/goaf/info'
-import Vuescroll from 'vuescroll'
 
 export default {
-  components: {
-    Vuescroll
-  },
   data() {
     return {
       title: '采空区信息',
@@ -307,20 +301,17 @@ export default {
     margin: 15px;
     position: relative;
     height: calc(100% - 15px);
-
     .btn-group {
       width: 100%;
-      padding:20px 0 0 160px;
-
+      padding:10px 0;
+      text-align: right;
       .el-button {
         margin: 0 15px;
       }
-
       .cancel-btn {
         background: #004F7B;
         border-color: #004F7B;
         color: #FFF;
-
         &:hover {
           background: #026197;
           border-color: #026197;
@@ -330,8 +321,43 @@ export default {
 
   }
 
-  // .el-form-item {
-  //   margin-bottom: 15px;
-  // }
   </style>
+  <style lang="scss">
+  .goaf-form-drawer{
+    width: 720px !important;
+    max-width: 100%;
+    overflow: hidden;
+    .goaf-form{
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      box-sizing: border-box;
+      .el-form-item{
+        width: 300px;
+        box-sizing: border-box;
+        margin-bottom: 20px;
+        .el-form-item__label{
+          font-size: 14px;
+          line-height: 22px;
+          padding-bottom: 5px;
+          color: rgba(255, 255, 255, 0.7) !important;
+        }
+        .el-form-item__content{
+          width: 300px;
+          input{
+              width: 300px;
+              padding: 0;
+              min-height:40px;
+              padding-left: 30px;
+              box-sizing: border-box;
+          }
+          .el-input-number--medium{
+            width: 300px;
+          }
+        }
+
+      }
+    }
+  }
+</style>
 

src/views/goaf/info/components/GoafInfo.vue

@@ -31,15 +31,15 @@
         <el-table-column prop="goafRemainVolume" label="剩余可充填体积（m³）" width="180" />
         <el-table-column prop="goafIsFill" label="是否充填" width="80">
           <template v-slot="{row}">
-            <span v-if="row.goafFillMethod==0" style="color:'#49E86C'">是</span>
+            <span v-if="row.goafIsFill==0" style="color:'#49E86C'">是</span>
             <span v-else style="color:'#E44E2D'">否</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" header-align="center" align="center" width="240">
+        <el-table-column label="操作" header-align="center" align="center" width="180">
           <template v-slot="{row}">
-            <el-button size="mini" type="text" style="color:'#1B81FF'" @click="showDetail(row)">详情</el-button>
-            <el-button size="mini" type="text" icon="el-icon-edit" style="color:'#1B81FF'" @click="handleUpdate(row)">修改</el-button>
-            <el-button size="mini" type="text" icon="el-icon-edit" style="color:'#E44E2D'" @click="handleDelete(row)">删除</el-button>
+            <el-button size="mini" type="text" style="color:#1B81FF" @click="showDetail(row)">详情</el-button>
+            <el-button size="mini" type="text" style="color:#1B81FF" @click="handleUpdate(row)">修改</el-button>
+            <el-button size="mini" type="text" style="color:#E44E2D" @click="handleDelete(row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>

src/views/goaf/info/components/detail.vue

@@ -8,44 +8,87 @@
     :visible.sync="dialogVisible"
   >
     <div class="descriptions-body">
-      <el-descriptions title="采空区信息">
-        <el-descriptions-item prop="goafOrebelt" label="矿带">
-          <span>{{ NumConvertLM(viewData.goafOrebelt) }}</span>
-        </el-descriptions-item>
-        <el-descriptions-item prop="goafOrebody" label="矿体" />
-        <el-descriptions-item prop="goafOreheight" label="中段" />
-        <el-descriptions-item prop="goafName" label="采空区名称" />
-        <el-descriptions-item prop="goafAvexArea" label="水平断面均暴露面积" />
-        <el-descriptions-item prop="goafAvinWidth" label="平均倾向宽度" />
-        <el-descriptions-item prop="goafAvexHeight" label="平均暴露高度">
-          <span>{{ viewData.goafAvexHeight==0?'已填充':viewData.goafAvexHeight }}</span>
-        </el-descriptions-item>
-        <el-descriptions-item prop="goafVoidVolume" label="体积">
-          <span>{{ viewData.goafVoidVolume==0?'已填充':viewData.goafVoidVolume }}</span>
-        </el-descriptions-item>
-        <el-descriptions-item label="倾向">{{ viewData.goafKeyTrend }}</el-descriptions-item>
-        <el-descriptions-item label="倾角（度）">{{ viewData.goafKeyDipangle }}</el-descriptions-item>
-        <el-descriptions-item label="顶板矿柱厚度">{{ viewData.goafRoofpillarThickness }}</el-descriptions-item>
-        <el-descriptions-item label="保安间柱平均厚度">{{ viewData.goafIncoavThickness }}</el-descriptions-item>
-        <el-descriptions-item label="勘探位置">{{ viewData.goafExpLocation }}</el-descriptions-item>
-        <el-descriptions-item label="围岩岩性">{{ viewData.goafRockLithology }}</el-descriptions-item>
-        <el-descriptions-item label="围岩稳定性">{{ viewData.goafRockStability }}</el-descriptions-item>
-        <el-descriptions-item label="形成时间">{{ viewData.goafFormationTime }}</el-descriptions-item>
-        <el-descriptions-item label="可充填体积（m³）">{{ viewData.goafCanfillVolume }}</el-descriptions-item>
-        <el-descriptions-item p label="剩余可充填体积（m³）">{{ viewData.goafRemainVolume }}</el-descriptions-item>
-        <el-descriptions-item label="充填方式">
-          <span>{{ viewData.goafFillMethod==0?'废石':'尾矿' }}</span>
-        </el-descriptions-item>
-        <el-descriptions-item prop="goafIsFill" label="是否充填">{{ viewData.goafFillMethod==0?'是':'否' }}</el-descriptions-item>
-        <el-descriptions-item label="备注">{{ viewData.goafInfoRemak }}</el-descriptions-item>
-      </el-descriptions>
+      <table class="descriptions">
+        <tr>
+          <td class="lable">矿带</td>
+          <td class="cont">{{ viewData.goafOrebelt | isEmpty }}</td>
+          <td class="lable">矿体</td>
+          <td class="cont">{{ viewData.goafOrebody | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">中段</td>
+          <td class="cont">{{ viewData.goafOreheight | isEmpty }}</td>
+          <td class="lable">采空区名称</td>
+          <td class="cont">{{ viewData.goafName | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">水平断面均暴露面积</td>
+          <td class="cont">{{ viewData.goafAvexArea | isEmpty }}</td>
+          <td class="lable">平均倾向宽度</td>
+          <td class="cont">{{ viewData.goafAvinWidth | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">平均暴露高度</td>
+          <td class="cont">{{ viewData.goafAvexHeight==0?'已填充':viewData.goafAvexHeight | isEmpty }}</td>
+          <td class="lable">goafVoidVolume</td>
+          <td class="cont">{{ viewData.goafVoidVolume==0?'已填充':viewData.goafVoidVolume | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">倾向</td>
+          <td class="cont">{{ viewData.goafKeyTrend | isEmpty }}</td>
+          <td class="lable">倾角（度）</td>
+          <td class="cont">{{ viewData.goafKeyDipangle | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">顶板矿柱厚度</td>
+          <td class="cont">{{ viewData.goafRoofpillarThickness | isEmpty }}</td>
+          <td class="lable">保安间柱平均厚度</td>
+          <td class="cont">{{ viewData.goafIncoavThickness | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">勘探位置</td>
+          <td class="cont">{{ viewData.goafExpLocation | isEmpty }}</td>
+          <td class="lable">围岩岩性</td>
+          <td class="cont">{{ viewData.goafRockLithology | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">围岩稳定性</td>
+          <td class="cont">{{ viewData.goafRockStability | isEmpty }}</td>
+          <td class="lable">形成时间</td>
+          <td class="cont">{{ viewData.goafFormationTime | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">可充填体积（m³）</td>
+          <td class="cont">{{ viewData.goafCanfillVolume | isEmpty }}</td>
+          <td class="lable">剩余可充填体积（m³）</td>
+          <td class="cont">{{ viewData.goafRemainVolume | isEmpty }}</td>
+        </tr>
+        <tr>
+          <td class="lable">充填方式</td>
+          <td class="cont">{{ viewData.goafFillMethod==0?'废石':'尾矿' }}</td>
+          <td class="lable">是否充填</td>
+          <td class="cont">{{ viewData.goafIsFill==0?'是':'否' }}</td>
+        </tr>
+        <tr>
+          <td class="lable">备注</td>
+          <td class="cont">{{ viewData.goafInfoRemak | isEmpty }}</td>
+        </tr>
+      </table>
     </div>
   </el-drawer>
 </template>
 <script>
-import { NumConvertLM } from '@/utils'
+import { NumConvertLM, isEmpty } from '@/utils'
 export default {
   name: 'GoafInfoDetail',
+  filters: {
+    isEmpty(val) {
+      if (isEmpty(val)) {
+        return '--'
+      }
+      return val
+    }
+  },
   data() {
     return {
       dialogVisible: false,
@@ -86,5 +129,29 @@ export default {
 <style lang="scss" sc>
 .descriptions-body{
     padding: 20px;
+    table{
+      width: 100%;
+      color: #fff;
+      border-collapse:collapse;
+      &.descriptions{
+        .lable{
+          width: 25%;
+          box-sizing: border-box;
+          background: rgba(0, 0, 0, 0.2);
+          border-width: 1px 0px 0px 1px;
+          border-style: solid;
+          border-color: rgba(255, 255, 255, 0.08);
+          line-height: 40px;
+          padding-left: 8px;
+        }
+        .cont{
+          width: 25%;
+          box-sizing: border-box;
+          border: 1px solid rgba(255, 255, 255, 0.08);
+          line-height: 40px;
+          padding-left: 8px;
+        }
+      }
+    }
 }
 </style>