大屏12.24修改

@@ -157,3 +157,29 @@ export function getYS009(url, objData) {
     }
     }
   })
   })
 }
 }
+
+/**
+ * 中间 中间模块-收入对比
+ * @returns {*}
+ */
+export function getYS0010(url, objData) {
+  return request({
+    method: 'post',
+    data: {
+      'INTERFACEID': 'YS010',
+      'USERCONTEXT': url,
+      'FIELD': objData
+    }
+  })
+}
+
+export function getYS0011(url, objData) {
+  return request({
+    method: 'post',
+    data: {
+      'INTERFACEID': 'YS011',
+      'USERCONTEXT': url,
+      'FIELD': objData
+    }
+  })
+}

@@ -103,15 +103,13 @@ h1 {
 }
 }
 
 
 .text-top {
 .text-top {
-  background: url('@/assets/image/top@3x.png') no-repeat top center;
-  background-size: 100%;
   height: calc(63 * 100vw / 1920);
   height: calc(63 * 100vw / 1920);
   margin: 0;
   margin: 0;
   font-size: calc(17 * 100vw / 1920);
   font-size: calc(17 * 100vw / 1920);
   font-weight: 400;
   font-weight: 400;
-  color: #12BFFF;
   line-height: calc(40 * 100vw / 1920);
   line-height: calc(40 * 100vw / 1920);
   padding-left: calc(30 * 100vw / 1920)
   padding-left: calc(30 * 100vw / 1920)
+
 }
 }
 
 
 .date {
 .date {
@@ -119,5 +117,21 @@ h1 {
   position: absolute;
   position: absolute;
   right: calc(30 * 100vw / 1920);
   right: calc(30 * 100vw / 1920);
 }
 }
+
+.dark {
+  .text-top {
+    background: url('@/assets/image/top@3x.png') no-repeat top center;
+    background-size: 100%;
+    color: #12BFFF;
+  }
+}
+
+.light {
+  .text-top {
+    background: url('@/assets/image/top-light@2x.png') no-repeat top center;
+    background-size: 100%;
+    color: #0060AA;
+  }
+}
 </style>
 </style>
 
 

 <template>
 <template>
-  <div class="bg">
-    <video id="video" autoplay loop muted src="/bg.mp4"></video>
-    <app-header/>
-    <app-main/>
+  <div v-loading="isLoading" class="bg" :class="{dark: styleTheme=='dark',light: styleTheme=='light'}">
+    <el-button v-if="styleTheme=='light'" class="theme-button dark-btn" @click="handleChangeTheme('dark')"></el-button>
+    <el-button v-else-if="styleTheme=='dark'" class="theme-button light-btn" @click="handleChangeTheme('light')"></el-button>
+<!--    <video id="video" autoplay loop muted src="/bg.mp4"></video>-->
+    <app-header />
+    <app-main :myTheme="styleTheme" />
   </div>
   </div>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import {AppMain, AppHeader, AppBottom} from './components'
 import {AppMain, AppHeader, AppBottom} from './components'
+
+const styleTheme = ref('dark')
+const isLoading = ref(false)
+
+function handleChangeTheme(type) {
+  styleTheme.value = type
+  isLoading.value = true
+  setTimeout(() => {
+    isLoading.value = false
+  }, 3000)
+}
+
 </script>
 </script>
 
 
 <style lang="scss">
 <style lang="scss">
@@ -25,7 +39,34 @@ import {AppMain, AppHeader, AppBottom} from './components'
   min-width: 1000px;
   min-width: 1000px;
   overflow: hidden;
   overflow: hidden;
   //background: rgba(0,0,0,0.75)
   //background: rgba(0,0,0,0.75)
-  background: url("@/assets/image/bg@2x.png") no-repeat top center;
   background-size: 100% 100%;
   background-size: 100% 100%;
 }
 }
+
+.dark {
+  background: url("@/assets/image/bg@2x.png") no-repeat top center;
+}
+
+.light {
+  background: url("@/assets/image/bg_light.png") no-repeat top center;
+}
+
+.theme-button {
+  position: absolute;
+  z-index: 2;
+  width: 30px;
+  height: 30px;
+  border: none;
+  top: 4vh;
+  right: 20px;
+}
+
+.dark-btn {
+  background: url("@/assets/image/dark@2x.png") no-repeat top center;
+  background-size: contain;
+}
+
+.light-btn {
+  background: url("@/assets/image/light@2x.png") no-repeat top center;
+  background-size: contain;
+}
 </style>
 </style>

@@ -13,25 +13,25 @@
             v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/>
             v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/>
       </el-select>
       </el-select>
     </div>
     </div>
-    <div class="datePick_bg" style="position: absolute;top: 4vh;right: 18px;height: 28px">
+    <div class="datePick_bg" style="position: absolute;top: 4vh;right: 58px;height: 28px">
         <el-date-picker
         <el-date-picker
           v-model="nowDate"
           v-model="nowDate"
           type="month"
           type="month"
           placeholder="历史回溯"
           placeholder="历史回溯"
           :size="size"
           :size="size"
-          style="width: 100%"
+          style="width: 100%;height: 100%"
           value-format="YYYY-MM"
           value-format="YYYY-MM"
         ></el-date-picker>
         ></el-date-picker>
     </div>
     </div>
     <el-row class="w100">
     <el-row class="w100">
       <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
       <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
-        <left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
+        <left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme" />
       </el-col>
       </el-col>
       <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
       <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
-        <center-page :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
+        <center-page :myTheme="props.myTheme" :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
       </el-col>
       </el-col>
       <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
       <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
-        <right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
+        <right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme"/>
       </el-col>
       </el-col>
     </el-row>
     </el-row>
   </div>
   </div>
@@ -60,7 +60,7 @@ const nowDate = ref(`${year}-${formatMonth(month)}`)
 let selectBase = ref()
 let selectBase = ref()
 let baseList = ref()
 let baseList = ref()
 let isLeader = ref(false)
 let isLeader = ref(false)
-// url.value = 'http://192.168.1.152:8899/login/sid=a659e865-486c-434f-8707-add6bfa2276d#/'
+// url.value = 'http://192.168.1.152:8899/login/sid=9cdeffd3-0a59-414c-944c-8e71a11b05cc#/'
 url.value = window.location.href
 url.value = window.location.href
 result.value = url.value?.split('=')[1]?.split('#')[0];
 result.value = url.value?.split('=')[1]?.split('#')[0];
 
 
@@ -69,6 +69,12 @@ function validateEmail(email) {
   return re.test(String(email).toLowerCase());
   return re.test(String(email).toLowerCase());
 }
 }
 
 
+const props = defineProps({
+  myTheme: {
+    type: String,
+  }
+})
+
 onMounted(() => {
 onMounted(() => {
   if (result.value) {
   if (result.value) {
     handelGetYS000()
     handelGetYS000()
@@ -109,13 +115,11 @@ function setType(){
 .basePick_bg {
 .basePick_bg {
   position: absolute;
   position: absolute;
   top: 4vh;
   top: 4vh;
-  right: 180px;
+  right: 220px;
   height: 28px;
   height: 28px;
   width: 155px;
   width: 155px;
-  background: #0B2239;
   //box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
   //box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
   border-radius: 5px;
   border-radius: 5px;
-  border: 1px solid #12BFFF;
 
 
   .select {
   .select {
     background-color: transparent;
     background-color: transparent;
@@ -141,7 +145,6 @@ function setType(){
     :deep(.el-select__placeholder) {
     :deep(.el-select__placeholder) {
       font-family: PingFang SC, serif;
       font-family: PingFang SC, serif;
       font-weight: 500;
       font-weight: 500;
-      color: #fff;
       //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
       //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
       //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
       //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
       background-color: rgb(33, 123, 188, .1); /* 背景色 */
       background-color: rgb(33, 123, 188, .1); /* 背景色 */
@@ -154,44 +157,98 @@ function setType(){
       border-color: #1c81a6; /* 边框色 */
       border-color: #1c81a6; /* 边框色 */
       color: #fff; /* 文字颜色 */
       color: #fff; /* 文字颜色 */
     }
     }
-
-    :deep(.el-icon ) {
-      color: #fff;
-    }
   }
   }
 }
 }
 
 
 .datePick_bg {
 .datePick_bg {
-  background: url("@/assets/image/datePicker.png") no-repeat center;
-  background-size: 100% 100%;
   width: 155px;
   width: 155px;
+  border-radius: 5px;
+
+  ::v-deep .el-date-editor .el-input__inner {
+    background-color: transparent !important;
+    border-color: #80ffff;
+    box-shadow: none;
+    height: 30px;
+    padding: 0 0 2px 10px;
+  }
+  ::v-deep .el-input__wrapper {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+  /* 隐藏默认图标 */
+  ::v-deep .el-date-editor .el-input__prefix {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  /* 强制右侧显示图标 */
+  ::v-deep .el-date-editor .el-input__suffix .clear-icon{
+    display: inline-block !important;
+    padding: 0 40px 0 0;
+  }
 }
 }
-::v-deep .el-date-editor .el-input__inner {
-  background-color: transparent !important;
-  border-color: #80ffff;
-  box-shadow: none;
-  height: 30px;
-  color: #fff;
-  padding: 0 0 2px 10px;
-}
-::v-deep .el-input__wrapper {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-}
-/* 隐藏默认图标 */
-::v-deep .el-date-editor .el-input__prefix {
-  background: url("@/assets/image/rili.png") no-repeat center;
-  background-size: 100% 100%;
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  right: 10px;
+
+.dark {
+  .basePick_bg {
+    background: #0B2239;
+    border: 1px solid #12BFFF;
+
+    /* placeholder */
+    :deep(.el-select__placeholder) {
+      color: #fff;
+    }
+
+    :deep(.el-icon ) {
+      color: #fff;
+    }
+  }
+
+  .datePick_bg {
+    background: url("@/assets/image/datePicker.png") no-repeat center;
+    background-size: 100% 100%;
+
+    ::v-deep .el-date-editor .el-input__inner {
+      color: #fff;
+    }
+
+    /* 隐藏默认图标 */
+    ::v-deep .el-date-editor .el-input__prefix {
+      background: url("@/assets/image/rili.png") no-repeat center;
+      background-size: 100% 100%;
+    }
+  }
 }
 }
 
 
-/* 强制右侧显示图标 */
-::v-deep .el-date-editor .el-input__suffix .clear-icon{
-  display: inline-block !important;
-  padding: 0 40px 0 0;
+.light {
+  .basePick_bg {
+    background: #FFFFFF;
+    border: 1px solid #97D3FF;
+
+    /* placeholder */
+    :deep(.el-select__placeholder) {
+      color: #005D8D;
+    }
+
+    :deep(.el-icon ) {
+      color: #0060AA;
+    }
+  }
+
+  .datePick_bg {
+    background: #FFFFFF;
+    border: 1px solid #97D3FF;
+
+    :deep(.el-date-editor .el-input__inner) {
+      color: #0060AA;
+    }
+
+    ::v-deep .el-date-editor .el-input__prefix {
+      background: url("@/assets/image/rili-light.png") no-repeat center;
+      background-size: 100% 100%;
+    }
+  }
 }
 }
 </style>
 </style>

@@ -25,7 +25,6 @@ const showGroup = ref(false)
 
 
 
 
 function open(row,date) {
 function open(row,date) {
-  debugger
   showGroup.value = true
   showGroup.value = true
   list.value = row
   list.value = row
   myDate.value = date
   myDate.value = date

@@ -107,7 +107,7 @@ onUnmounted(() => {
 });
 });
 </script>
 </script>
 
 
-<style scoped>
+<style lang="scss" scoped>
 .scrolling-container {
 .scrolling-container {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
@@ -124,7 +124,6 @@ onUnmounted(() => {
   font-family: SimHei, serif;
   font-family: SimHei, serif;
   font-weight: 400;
   font-weight: 400;
   font-size: calc(17 * 100vw / 1920);
   font-size: calc(17 * 100vw / 1920);
-  color: #FFFFFF;
   height: calc(40 * 100vh / 1920);
   height: calc(40 * 100vh / 1920);
   margin: calc(8 * 100vw / 1920) 0;
   margin: calc(8 * 100vw / 1920) 0;
   white-space: nowrap; /* 强制文本不换行 */
   white-space: nowrap; /* 强制文本不换行 */
@@ -143,5 +142,15 @@ onUnmounted(() => {
   }
   }
 }
 }
 
 
+.dark {
+  .scrolling-item {
+    color: #FFFFFF;
+  }
+}
 
 
-</style>
\ No newline at end of file
+.light {
+  .scrolling-item {
+    color: #4C5359;
+  }
+}
+</style>