Browse Source

1.机器设备测算页面布局优化

GouGengquan 7 months ago
parent
commit
eecce22513

+ 1 - 1
src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="min-width: 1900px;">
       <RouterView />
   </div>
  

+ 73 - 0
src/components/Input/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <el-input v-model="val" :maxlength="maxlength" :size="size" :placeholder="placeholder" @change="onChange">
+    </el-input>
+</template>
+  
+<script>
+export default {
+    props: {
+        // 值(接收任何类型)
+        value: {
+            default: ''
+        },
+        // 输入框长度限制
+        maxlength: {
+            type: Number,
+            default: null
+        },
+        // 提示语
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        // 大小
+        size: {
+            type: String,
+            default: ''
+        },
+        // 下标
+        index: {
+            type: Number,
+            default: null
+        },
+        // 属性名字
+        propName: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['change'],
+    data() {
+        return {
+            val: ''
+        };
+    },
+    watch: {
+        // 监听父组件值变化(应对像是翻页后子组件值不更新的情况)
+        value(newValue) {
+            this.val = newValue;
+        },
+        // value: {
+        //     handler(newVal) {
+        //         console.log('数据变化:', newVal);
+        //     },
+        //     deep: true, // 深度监听
+        //     immediate: true // 立即执行
+        // },
+        // 监控值,值改变时返回给父组件
+        // val(newVal) {
+        //     this.val = newVal;
+        //     this.$emit('change', this.val, this.index, this.propName);
+        // }
+    },
+    // 初始化赋值
+    mounted() {
+        this.val = this.value;
+    },
+    methods: {
+        onChange() {
+            this.$emit('change', this.val, this.index, this.propName);
+        }
+    }
+};
+</script>

+ 65 - 0
src/components/Select/index.vue

@@ -0,0 +1,65 @@
+<template>
+    <el-select v-model="val" :size="size" :placeholder="placeholder" @change="onChange">
+        <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
+    </el-select>
+</template>
+<!-- 抽成组件的原因是当同一页面el-input + v-model双向绑定过多时会导致页面非常卡顿 -->
+<script>
+export default {
+    props: {
+        // 值(接收任何类型)
+        value: {
+            default: ''
+        },
+        // 输入框长度限制
+        maxlength: {
+            type: Number,
+            default: null
+        },
+        // 提示语
+        placeholder: {
+            type: String,
+            default: ''
+        },
+        // 大小
+        size: {
+            type: String,
+            default: ''
+        },
+        // 下标
+        index: {
+            type: Number,
+            default: null
+        },
+        // 属性名字
+        propName: {
+            type: String,
+            default: ''
+        },
+        options: {
+            default: null
+        }
+    },
+    emits: ['change'],
+    data() {
+        return {
+            val: ''
+        };
+    },
+    watch: {
+        // 监听父组件值变化(应对像是翻页后子组件值不更新的情况)
+        value(newValue) {
+            this.val = newValue;
+        }
+    },
+    // 初始化赋值
+    mounted() {
+        this.val = this.value;
+    },
+    methods: {
+        onChange() {
+            this.$emit('change', this.val, this.index, this.propName);
+        }
+    }
+};
+</script>

+ 3 - 3
src/layout/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div class="navbar" style="min-width: 1900px;">
     <div class="titleDiv">
       <img class="logclass" src="../../assets/images/logo.jpg" @click="goto('index')">
       <div class="name">
@@ -12,10 +12,10 @@
           <div class="meuns"><span class="menu-text" @mouseenter="showMenuCard(0)" @mouseleave="hiddenMenuCard(0)"
               @click="goto('house')">房地产报告</span></div>
         </el-col>
-        <el-col :span="6">
+        <!-- <el-col :span="6">
           <div class="meuns"><span class="menu-text" @mouseenter="showMenuCard(1)" @mouseleave="hiddenMenuCard(1)"
               @click="goto('assets')">资产报告</span></div>
-        </el-col>
+        </el-col> -->
         <el-col :span="6">
           <div class="meuns"><span class="menu-text" @mouseenter="showMenuCard(2)" @mouseleave="hiddenMenuCard(2)"
               @click="goto('planning')">土地报告</span></div>

+ 5 - 5
src/views/assets/workbench/calculate/components/timeline.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="contrl-bar">
-    <el-timeline style="max-width: 600px">
+    <el-timeline style="max-width: 400px">
       <el-timeline-item
         :timestamp="projectStore.calculateProgress && (projectStore.calculateProgress.progress === 'BASE' || projectStore.calculateProgress.progress === 'IMPORT' || projectStore.calculateProgress.progress === 'GENERATE' || projectStore.calculateProgress.progress === 'FINISHED') ? '已完成' : '未完成'"
         placement="top"
@@ -74,11 +74,11 @@ export default {
 <style scoped>
 .contrl-bar {
   height: 600px;
-  width: 20%;
-  position: fixed;
+  width: 15%;
+  /* position: absolute;
   top: 160px;
-  right: 150px;
-
+  right: 150px; */
+  display: inline-block;
 }
 
 .timeline-card:hover {

+ 1 - 1
src/views/assets/workbench/calculate/importInfo.vue

@@ -1321,7 +1321,7 @@
             v-model:current-page="eqptDataQuery.current" @current-change="autoSaveNonS"
             @size-change="autoSaveNonS"/>
         <el-tabs v-model="activeName" tab-position="bottom" @tab-change="tabChange()"
-            style="display:inline-block;margin-left: 308px">
+            style="display:inline-block;margin-left: 19%">
             <el-tab-pane label="所有设备测算" name="all">
             </el-tab-pane>
             <el-tab-pane label="进口设备测算" name="imported">

+ 3 - 3
src/views/assets/workbench/calculate/index.vue

@@ -33,7 +33,7 @@ export default {
       this.showTimeline = status;
       if (status) {
         var obj = document.getElementById('contrl');
-        obj.style.width = '75%';
+        obj.style.width = '85%';
         var evaluateDiv = document.getElementById('evaluateDiv');
         if(evaluateDiv) {
           evaluateDiv.style.width = '80.5%';
@@ -51,7 +51,7 @@ export default {
         }
         var uploadDiv = document.getElementById('uploadDiv');
         if(uploadDiv) {
-          uploadDiv.style.width = '14%';
+          uploadDiv.style.width = '14.5%';
         }
       }
     }
@@ -76,7 +76,7 @@ export default {
 <style>
 .contrl {
   /* font-size: 20px; */
-  width: 75%;
+  width: 85%;
   border-right: 1.5px #dae1eb solid;
   padding: 0px 20px 20px 0px;
   float: left;