数据管理loading优化 ，登录滑块样式优化

src/views/dataManage/chainAnalysis/ehcarts/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
+  <div shadow="never" class="homeBoxCard" >
     <br />
     <div class="height300" ref="chainChartRef" />
     <br />
@@ -20,9 +20,7 @@ export default defineComponent({
     const resultListDate = ref([])
 
     // 读取数据 func
-    const loading = ref(true)
     const getData = async () => {
-      loading.value = false
       var aa = props.echartsDataOne.listDate
       var bb = props.echartsDataOne.listDate2
       console.log(aa)
@@ -204,7 +202,6 @@ export default defineComponent({
 
     return {
       chainChartRef,
-      loading,
       echarts,
       resultListDate,
     }

src/views/dataManage/chainAnalysis/index.vue

@@ -86,11 +86,12 @@
           </div>
         </el-radio-group>
       </div>
-      <div class="chainEcharts">
+      <div class="chainEcharts"  v-loading="loading">
         <echarts
           v-for="(item, index) in echartsDataObj"
           :key="index"
           :echartsDataOne="item"
+          
         ></echarts>
       </div>
     </div>
@@ -128,6 +129,7 @@ export default defineComponent({
     const typeSrarch = ref(0)
     const treeCheckedList = ref([])
     const valueCalculation = ref()
+     const loading=ref(false)
     // const dateTime = ref([
     //   new Date(2021, 9, 1, 10, 10),
     //   new Date(2021, 9, 30, 10, 10),
@@ -165,6 +167,7 @@ export default defineComponent({
 
     async function searchData() {
       if (!dateTime.value) {
+         loading.value=false
         ElNotification({
           title: '提示',
           message: '请选择开始和结束时间',
@@ -172,6 +175,7 @@ export default defineComponent({
         })
         return
       }
+      loading.value=true;
 
       if (treeCheckedList.value.length > 0) {
         store.commit('TimeAll_function', dateTime.value)
@@ -203,6 +207,7 @@ export default defineComponent({
             displayField: treeCheckedList.value,
           })
           .then((requset) => {
+          
             if (requset.status === 'SUCCESS') {
               flag.value = true
               echartsDataCurrent.value = requset.data
@@ -221,13 +226,17 @@ export default defineComponent({
           })
           .then((requset) => {
             if (requset.status === 'SUCCESS') {
+              
               flag2.value = true
               echartsDataBefore.value = requset.data
             } else {
               ElMessage.error(requset.msg)
             }
           })
+        if(echartsDataBefore.value&& echartsDataCurrent.value){
+           loading.value=false
 
+        }
         var jsona = JSON.stringify(echartsDataCurrent.value)
         var jsonb = jsona.replace(/"list"/g, '"list2"')
         jsonb = jsonb.replace(/"listDate"/g, '"listDate2"')
@@ -242,6 +251,7 @@ export default defineComponent({
           ElMessage.warning('暂无结果')
         }
       } else {
+         loading.value=false
         console.log('', 1)
         ElNotification({
           title: '提示',
@@ -254,6 +264,7 @@ export default defineComponent({
     return {
       store,
       ...toRefs(state),
+      loading,
       listTabPosition: ref('allValue'),
       data: [
         {

src/views/dataManage/demandAnalysis/index.vue

@@ -35,7 +35,7 @@
       <div class="demDivOne">
         <div class="demDivTwo">
           <div class="block">
-            <span class="demonstration" style="color: black">日期:</span>
+            <span class="demonstration" style="margin-right:10px">日期:</span>
             <el-date-picker
               v-model="dateTime"
               type="month"
@@ -59,8 +59,11 @@
           </el-button>
         </div>
       </div>
-      <div class="demEcharTable" v-if="flag">
-        <div class="Echarts">
+       <div   v-loading="loading" style="  height: calc(100vh - 192px);
+      overflow-y: auto;">
+
+         <div class="demEcharTable" v-if="flag" >
+        <div class="Echarts"   >
           <div class="ehcartOne">
             <i
               class="el-icon-s-data el-input__icon"
@@ -86,6 +89,10 @@
           </el-table>
         </div>
       </div>
+
+
+       </div>
+      
     </div>
   </div>
 </template>
@@ -113,6 +120,7 @@ export default defineComponent({
     const typeSrarch = ref(1)
     const flag = ref(false)
     const echartsData = ref({})
+     const loading=ref(false)
 
     const siteOption = () => {
     }
@@ -140,6 +148,7 @@ export default defineComponent({
       deviceBoxList()
     }
     function deviceBoxList() {
+    
       api
         .deviceBoxList({
           siteId: store.state.siteId,
@@ -158,6 +167,7 @@ export default defineComponent({
     }
     function searchData() {
       if (!dateTime.value) {
+         loading.value=false
         ElNotification({
           title: '提示',
           message: '请选择时间',
@@ -166,8 +176,9 @@ export default defineComponent({
         return
       }
 
-
+       loading.value=true;
       if (deviceChecked.value.length > 0) {
+         
         // alert(1)
         // store.commit('TimeAll_function', dateTime.value)
         // const time = store.state.Time_Data
@@ -180,7 +191,9 @@ export default defineComponent({
             deviceCode: deviceChecked.value,
           })
           .then((requset) => {
+             
             if (requset.status === 'SUCCESS') {
+               loading.value=false;
               flag.value = true
               echartsData.value = requset.data[0]
 
@@ -207,6 +220,7 @@ export default defineComponent({
             }
           })
       } else {
+         loading.value=false;
         console.log('', 1)
         ElNotification({
           title: '提示',
@@ -228,6 +242,7 @@ export default defineComponent({
       siteChange,
       searchData,
       handleNodeClick,
+      loading,
       store,
       listTabPosition: ref('cycleValue'), //单选按钮
       deviceBoxData,
@@ -341,6 +356,7 @@ export default defineComponent({
       .Echarts {
         width: 60%;
         margin-right: 5px;
+       
         .ehcartOne {
           padding-left: 10px;
           background-color: rgb(233 233 233);

src/views/dataManage/energyReport/ehcarts/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
+  <div shadow="never" class="homeBoxCard">
     <div :style="'height:' + Height" id="sumeChartRef" ref="sumeChartRef" />
   </div>
 </template>
 <script>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { computed, defineComponent, onMounted,  watch } from 'vue'
 import { useStore } from 'vuex'
 import * as echarts from 'echarts'
 // import { ChartDataType } from "../../data";
@@ -24,12 +24,10 @@ export default defineComponent({
     const num = computed(() => store.state.Home.worksChartData.num)
 
     // 读取数据 func
-    const loading = ref(true)
 
     const getData = async () => {
       console.log('ecahrts子组件中的props.ecahrtsData')
       console.log(props.echartsData)
-      loading.value = false
     }
 
     function echarts2() {
@@ -164,7 +162,6 @@ export default defineComponent({
     )
 
     return {
-      loading,
       total,
       num,
       echarts,

src/views/dataManage/energyReport/index.vue

@@ -100,7 +100,7 @@
           </div>
         </div>
       </div>
-      <div class="energEcharts">
+      <div class="energEcharts" v-loading="loading">
         <template v-if="flag">
           <echarts
             v-if="rightTabsBool"
@@ -137,6 +137,7 @@ export default defineComponent({
     const typeSrarch = ref(1)
     const flag = ref(false)
     const echartsData = ref({})
+     const loading=ref(false)
 
     let dateType = ref('date')
 
@@ -208,6 +209,7 @@ export default defineComponent({
 
     function searchData() {
       if (!dateTime.value) {
+        loading.value=false
         ElNotification({
           title: '提示',
           message: '请选择开始和结束时间',
@@ -215,6 +217,7 @@ export default defineComponent({
         })
         return
       }
+      loading.value=true;
 
 
       if (deviceChecked.value.length > 0) {
@@ -229,6 +232,7 @@ export default defineComponent({
           })
           .then((requset) => {
             if (requset.status === 'SUCCESS') {
+              loading.value=false
               flag.value = true
               echartsData.value = requset.data[0]
 
@@ -240,6 +244,7 @@ export default defineComponent({
             }
           })
       } else {
+        loading.value=false
         console.log('', 1)
         ElNotification({
           title: '提示',
@@ -283,6 +288,7 @@ export default defineComponent({
       checked: ref(false),
       siteChange,
       searchData,
+      loading,
       dateTime,
       deviceBoxList,
       // showTree,
@@ -363,6 +369,10 @@ export default defineComponent({
     width: 85%;
     min-width: 845px;
     height: 100%;
+    .energEcharts {
+      height: calc(100vh - 192px);
+      overflow-y: auto;
+    }
     .energDivOne {
       display: flex;
       margin: 15px 0px 15px 15px;

src/views/dataManage/sameAnalysis/ehcarts/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div shadow="never" class="homeBoxCard" v-loading="loading">
+  <div shadow="never" class="homeBoxCard">
     <!-- <div>{{aa}}</div> -->
     <div :style="'height:' + Height" ref="sumeChartRef" />
   </div>
@@ -78,9 +78,7 @@ export default defineComponent({
     const dataTime = ref([])
 
     // 读取数据 func
-    const loading = ref(true)
     const getData = async () => {
-      loading.value = false
       // console.log('props.ecahrtsData')
       // console.log(props.ecahrtsData)
       aa.value = props.ecahrtsData[0] ? props.ecahrtsData[0].name : ''
@@ -283,7 +281,6 @@ export default defineComponent({
     return {
       Height,
       sumeChartRef,
-      loading,
       aa,
       num,
       newDataName,

src/views/dataManage/sameAnalysis/index.vue

@@ -80,11 +80,12 @@
           </div>
         </el-radio-group>
       </div>
-      <div class="sameEcharts">
+      <div class="sameEcharts"  v-loading="loading">
         <echarts
           :ecahrtsData="ecahrtsData"
           :typeSrarch="typeSrarch"
           v-if="flag && ecahrtsData[0]"
+         
         ></echarts>
       </div>
     </div>
@@ -111,6 +112,7 @@ export default defineComponent({
     const tree = ref(null)
     const typeSrarch = ref(0)
     const flag = ref(false)
+     const loading=ref(false)
 
     const valueCalculation = ref()
     const dateTime = ref('')
@@ -151,6 +153,7 @@ export default defineComponent({
 
     function searchData() {
       if (!dateTime.value) {
+        loading.value=false
         ElNotification({
           title: '提示',
           message: '请选择开始和结束时间',
@@ -158,6 +161,7 @@ export default defineComponent({
         })
         return
       }
+      loading.value=true;
 
       if (treeCheckedList.value.length > 0) {
         // console.log('', store.state.deviceList)
@@ -174,6 +178,7 @@ export default defineComponent({
             displayField: treeCheckedList.value,
           })
           .then((requset) => {
+            loading.value=false
             if (requset.status === 'SUCCESS') {
               flag.value = true
               ecahrtsData.value = requset.data
@@ -186,6 +191,7 @@ export default defineComponent({
             }
           })
       } else {
+         loading.value=false
         // console.log('', 1)
         ElNotification({
           title: '提示',
@@ -222,6 +228,7 @@ export default defineComponent({
       siteChange,
       listTabsChange,
       typeSrarch,
+      loading,
       options: ref([
         {
           value: 1,
@@ -304,6 +311,10 @@ export default defineComponent({
     width: 85%;
     min-width: 845px;
     height: 100%;
+     .sameEcharts {
+      height: calc(100vh - 192px);
+      overflow-y: auto;
+    }
     .sameDivOne {
       display: flex;
       margin: 15px 0px 15px 15px;

src/views/login/index.vue

@@ -139,6 +139,7 @@ export default {
   background-size: cover;
   &-form {
     width: calc(100% - 40px);
+    min-width:360px;
     height: 440px;
     padding: 4vh;
     margin-top: calc((100vh - 380px) / 2);