大屏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 {
-  background: url('@/assets/image/top@3x.png') no-repeat top center;
-  background-size: 100%;
   height: calc(63 * 100vw / 1920);
   margin: 0;
   font-size: calc(17 * 100vw / 1920);
   font-weight: 400;
-  color: #12BFFF;
   line-height: calc(40 * 100vw / 1920);
   padding-left: calc(30 * 100vw / 1920)
+
 }
 
 .date {
@@ -119,5 +117,21 @@ h1 {
   position: absolute;
   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>
 

 <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>
 </template>
 
 <script setup>
 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>
 
 <style lang="scss">
@@ -25,7 +39,34 @@ import {AppMain, AppHeader, AppBottom} from './components'
   min-width: 1000px;
   overflow: hidden;
   //background: rgba(0,0,0,0.75)
-  background: url("@/assets/image/bg@2x.png") no-repeat top center;
   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>

@@ -13,25 +13,25 @@
             v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/>
       </el-select>
     </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
           v-model="nowDate"
           type="month"
           placeholder="历史回溯"
           :size="size"
-          style="width: 100%"
+          style="width: 100%;height: 100%"
           value-format="YYYY-MM"
         ></el-date-picker>
     </div>
     <el-row class="w100">
       <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 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 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-row>
   </div>
@@ -60,7 +60,7 @@ const nowDate = ref(`${year}-${formatMonth(month)}`)
 let selectBase = ref()
 let baseList = ref()
 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
 result.value = url.value?.split('=')[1]?.split('#')[0];
 
@@ -69,6 +69,12 @@ function validateEmail(email) {
   return re.test(String(email).toLowerCase());
 }
 
+const props = defineProps({
+  myTheme: {
+    type: String,
+  }
+})
+
 onMounted(() => {
   if (result.value) {
     handelGetYS000()
@@ -109,13 +115,11 @@ function setType(){
 .basePick_bg {
   position: absolute;
   top: 4vh;
-  right: 180px;
+  right: 220px;
   height: 28px;
   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);
   border-radius: 5px;
-  border: 1px solid #12BFFF;
 
   .select {
     background-color: transparent;
@@ -141,7 +145,6 @@ function setType(){
     :deep(.el-select__placeholder) {
       font-family: PingFang SC, serif;
       font-weight: 500;
-      color: #fff;
       //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
       //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
       background-color: rgb(33, 123, 188, .1); /* 背景色 */
@@ -154,44 +157,98 @@ function setType(){
       border-color: #1c81a6; /* 边框色 */
       color: #fff; /* 文字颜色 */
     }
-
-    :deep(.el-icon ) {
-      color: #fff;
-    }
   }
 }
 
 .datePick_bg {
-  background: url("@/assets/image/datePicker.png") no-repeat center;
-  background-size: 100% 100%;
   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>

@@ -10,7 +10,8 @@
       <div class="right" :style="{width:myType?'calc(480 * 100vw / 1920)':'calc(640 * 100vw / 1920)'}">
         <div class="rTop">
           <div style="font-family: SimHei, serif;">领导重点关注</div>
-          <div @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
+          <div v-if="props.myTheme=='dark'" @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
+          <div v-if="props.myTheme=='light'" @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more-light@2x.png"></div>
         </div>
         <div class="rBotton">
           <ScrollingData :data="form.leaderinfo" :speed=".3"/>
@@ -19,40 +20,48 @@
     </div>
     
     <div class="bottom">
-      <div class="father dong">
+      <div class="father dong" @click="contrastDialogShow('1')">
         <div style="display: flex">
           <div class="bing" style="width: 30%">
             <div class="bingTitle heiti">
-              <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
+              <span>
+                <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
+                <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
+              </span>
               营业收入
             </div>
-            <div ref="bing1" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
+<!--            '18.3vh'-->
+            <div ref="bing1" style="width: 100%;height:13.3vh">
             </div>
 <!--            <div class="bingBottom heiti">-->
 <!--              <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>-->
 <!--            </div>-->
           </div>
-          <div ref="zhuRef1" class="zhu" style="width:70%" :style="{height:myType?'17.3vh':'calc(20.5vh + 1vw + 8px)'}"/>
+          <div ref="zhuRef1" class="zhu" style="width:70%;height:17.3vh"/>
         </div>
 
         <hr>
       </div>
-      <div class="father">
+      <div class="father" @click="contrastDialogShow('2')">
         <div style="display: flex">
           <div class="bing" style="width: 30%">
             <div class="bingTitle">
-              <span><img alt="" class="titleImg heiti" src="@/assets/image/title_bg.png"></span>
+              <span>
+                <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
+                <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
+              </span>
               应收余额
             </div>
-            <div ref="bing2" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}">
+            <div ref="bing2" style="width: 100%;height:13.3vh">
             </div>
 <!--            <div class="bingBottom">-->
 <!--              <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>-->
 <!--                累计应收余额 <br>(万元)-->
 <!--              </div>-->
 <!--            </div>-->
+<!--            'calc(20.5vh + 1vw + 8px)'-->
           </div>
-          <div ref="zhuRef2" class="zhu" style="width:70%" :style="{height:myType?'17.3vh':'calc(20.5vh + 1vw + 8px)'}"/>
+          <div ref="zhuRef2" class="zhu" style="width:70%;height:17.3vh"/>
         </div>
 
         <hr>
@@ -61,7 +70,10 @@
         <div style="display: flex">
           <div class="bing" style="width: 30%">
             <div class="bingTitle heiti">
-              <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
+              <span>
+                <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
+                <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
+              </span>
               现金余额
             </div>
             <div class="bingImg" style="width: 100%;height:13.3vh;position: relative"><span style="position: absolute;top:50%;left:0;width: 100%">{{bing_number3}}</span></div>
@@ -76,21 +88,53 @@
         </div>
         <hr>
       </div>
+
       <div class="father">
         <div class="bingTitle  tex4">
-          <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
-          <span class="heiti">DSO天数</span>
+          <span>
+            <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
+            <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
+          </span>
+          <span v-if="myType" class="heiti">DSO天数</span>
+          <span v-if="!myType" class="heiti">全公司DSO天数</span>
+          <span class="dsotext heiti">&nbsp;{{ dsoAll }}</span>
+        </div>
+        <div ref="zhuRef4" style="width:100%;height: 17.3vh">
+        </div>
+        <hr v-if="!myType">
+      </div>
+
+      <div class="father" v-if="!myType">
+        <div class="bingTitle  tex4">
+          <span>
+            <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
+            <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
+          </span>
+          <span class="heiti">分公司DSO天数</span>
           <span class="dsotext heiti">&nbsp;{{ dso }}</span>
         </div>
-        <div ref="zhuRef4" style="width: 100%" :style="{height:myType?'calc(17.3vh - 2px)':'calc(20.5vh + 1vw + 8px)'}">
+        <div ref="zhuRef42" style="width: 100%;height: calc(17.3vh - 2px)">
+<!--          calc(20.5vh + 1vw + 8px)-->
         </div>
       </div>
     </div>
     
     <Information ref="InformationRef"></Information>
-  </div>
-
 
+    <el-dialog
+        v-model="showDialog"
+        :append-to-body="true"
+        :z-index="999999"
+        style="width: 766px;height: 593px"
+        :class="{'darkDialog': props.myTheme=='dark','lightDialog': props.myTheme=='light'}"
+        draggable
+        :title="showTitle"
+    >
+      <div>
+        <div ref="contrastRef" class="zhu" style="width:100%;height: 500px"/>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
@@ -100,7 +144,7 @@ import * as echarts from "echarts";
 import * as api from "@/apiPc/common"
 import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick, watch} from 'vue'
 import {dayjs} from 'element-plus'
-import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
+import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005, getYS0010, getYS0011} from '@/api/server.js'
 import Information from "/@/viewsPc/vip/components/information.vue";
 
 const {proxy} = getCurrentInstance()
@@ -131,8 +175,14 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  myTheme:{
+    type: String,
+    default: 'dark'
+  }
 })
 
+const showDialog = ref(false)
+const showTitle = ref('')
 const url = computed(() => props.url)
 const obj = computed(() => props.obj)
 const hDate = computed(() => props.historyDate)
@@ -148,12 +198,19 @@ watch(() => props.sBase,(newVal) => {
     init()
   }
 })
+watch(() => props.myTheme,(newVal) => {
+  if (isMounted.value) {
+    init()
+  }
+})
 const isLeader = computed(() => props.isLeader)
 const myType = computed(() => props.type)
 const zhuRef1 = ref(null)
 const zhuRef2 = ref(null)
 const zhuRef3 = ref(null)
 const zhuRef4 = ref(null)
+const zhuRef42 = ref(null)
+const contrastRef = ref(null)
 const bing1 = ref(null)
 const bing2 = ref(null)
 const bing3 = ref(null)
@@ -163,6 +220,7 @@ const form = ref({
   leaderinfo: []
 })
 const dso = ref(0)
+const dsoAll = ref(0)
 
 const resYear1 = ref()
 const resYear2 = ref()
@@ -180,6 +238,8 @@ let chart22
 let chart3
 let chart33
 let chart44
+let chart442
+let chartContrast
 
 const list = ref([])
 
@@ -265,8 +325,18 @@ async function handelGetYS003() {
 let nowYearString = ref(parseInt(hDate.value.substring(0,4)))
 async function handelGetYS004() {
   const res = await getYS004(url.value, obj.value)
-  let arrList = res.data.blockgroup || []
-  dso.value = res.data.DSOTOTAL || 0
+  let arrList = []
+  let arrBaseList = []
+
+  if (!myType.value) {
+    arrBaseList = res.data.basedso || []
+    arrList = res.data.blockgroup || []
+    dso.value = res.data.BASEDSOTOTAL || 0
+    dsoAll.value = res.data.DSOTOTAL || 0
+  } else {
+    arrList = res.data.blockgroup || []
+    dsoAll.value = res.data.DSOTOTAL || 0
+  }
   // let arrList = [
   //   {
   //     BLOCK: '海上',
@@ -309,78 +379,79 @@ async function handelGetYS004() {
   //     ]
   //   }
   // ]
-  if (myType.value) {
-    let haishang
-    let dalu
 
-    for (const v of arrList) {
-      if (v.BLOCK === '海上') {
-        haishang = v
-      } else {
-        dalu = v
-      }
+  let haishang
+  let dalu
+
+  for (const v of arrList) {
+    if (v.BLOCK === '海上') {
+      haishang = v
+    } else {
+      dalu = v
     }
-    let haishangArr = haishang.list.map(v => ({
-      ...v,
-      type: 1
-    })).sort((v1, v2) => v2.DSO - v1.DSO)
-    let daluArr = dalu.list.map(v => ({
-      ...v,
-      type: 2
-    })).sort((v1, v2) => v2.DSO - v1.DSO)
+  }
+  let haishangArr = haishang.list.map(v => ({
+    ...v,
+    type: 1
+  })).sort((v1, v2) => v2.DSO - v1.DSO)
+  let daluArr = dalu.list.map(v => ({
+    ...v,
+    type: 2
+  })).sort((v1, v2) => v2.DSO - v1.DSO)
 
-    let arr = [...haishangArr, ...daluArr]
-    let listX = arr.map(v => v.BASEJC)
+  let arr = [...haishangArr, ...daluArr]
+  let listX = arr.map(v => v.BASEJC)
 
-    let styleItem1 = {
-      color: {
-        type: 'linear',
-        x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
-        colorStops: [
-          {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
-          {offset: 1, color: 'rgba(106, 235, 228, 1)'}  // 底部颜色
-        ]
-      },
-      borderColor: 'rgba(0, 255, 190, 1)',
-      borderWidth: 1
-    }
-    let styleItem2 = {
-      color: {
-        type: 'linear',
-        x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
-        colorStops: [
-          {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
-          {offset: 1, color: 'rgba(77, 197, 243, 1)'}  // 底部颜色
-        ]
-      },
-      borderColor: 'rgba(0, 168, 255, 1)',
-      borderWidth: 1
-    }
+  let styleItem1 = {
+    color: {
+      type: 'linear',
+      x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+      colorStops: [
+        {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
+        {offset: 1, color: 'rgba(106, 235, 228, 1)'}  // 底部颜色
+      ]
+    },
+    borderColor: 'rgba(0, 255, 190, 1)',
+    borderWidth: 1
+  }
+  let styleItem2 = {
+    color: {
+      type: 'linear',
+      x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+      colorStops: [
+        {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
+        {offset: 1, color: 'rgba(77, 197, 243, 1)'}  // 底部颜色
+      ]
+    },
+    borderColor: 'rgba(0, 168, 255, 1)',
+    borderWidth: 1
+  }
 
-    let dataList = arr.map(v => ({
-      value: v.DSO,
-      day: v.DAYS,
-      itemStyle: v.type == 2 ? styleItem1 : styleItem2,
-      name: v.BASEJC,
-      type: v.type
-    }))
-    let arr1 = []
-    let arr2 = []
-    for (const v of arr) {
-      if (v.type == 2) {
-        arr2.push(290)
-        arr1.push(null)
-      } else {
-        arr1.push(150)
-        arr2.push(null)
-      }
+  let dataList = arr.map(v => ({
+    value: v.DSO,
+    day: v.DAYS,
+    itemStyle: v.type == 2 ? styleItem1 : styleItem2,
+    name: v.BASEJC,
+    type: v.type
+  }))
+  let arr1 = []
+  let arr2 = []
+  for (const v of arr) {
+    if (v.type == 2) {
+      arr2.push(290)
+      arr1.push(null)
+    } else {
+      arr1.push(150)
+      arr2.push(null)
     }
-    if (arr2.length > 0) arr2.push(290)
-    if (arr1.length > 0) arr1.unshift(150)
-    handelZhu4(listX, dataList, arr1, arr2)
-  } else {
+  }
+  if (arr2.length > 0) arr2.push(290)
+  if (arr1.length > 0) arr1.unshift(150)
+  handelZhu4(listX, dataList, arr1, arr2)
+
+  if (!myType.value) {
     let nowYear=[],lastYear=[]
-    for (const v of arrList[0].list) {
+    for (const v of arrBaseList[0].list) {
       if (v.YEAR == nowYearString.value) {
         nowYear.push(v)
       } else {
@@ -439,7 +510,7 @@ async function handelGetYS004() {
     }))
     let arr1 = []
     for (let i=0;i<14;i++) {
-      if (arrList[0].BLOCK == '陆地') {
+      if (arrBaseList[0].BLOCK == '陆地') {
         arr1.push(290)
       } else {
         arr1.push(150)
@@ -451,8 +522,6 @@ async function handelGetYS004() {
     dataList2.push('')
     handelZhu4_2(listX1, dataList1,dataList2, arr1)
   }
-
-
 }
 
 async function handelGetYS005() {
@@ -465,6 +534,31 @@ async function handelGetYS005() {
   }
 }
 
+async function handelGetYS0010() {
+  const res = await getYS0010(url.value, {"yeargroup": resYear1.value})
+  const TBdata = res.data.list.map(n => n.TBRATIO)
+  const HBdata = res.data.list.map(n => n.HBRATIO)
+  handelContrast(resYear1.value[0], resYear1.value[1], TBdata, HBdata, true)
+}
+
+async function handelGetYS0011() {
+  const res = await getYS0011(url.value, {"yeargroup": resYear2.value})
+  const TBdata = res.data.list.map(n => n.TBRATIO)
+  const HBdata = res.data.list.map(n => n.HBRATIO)
+  handelContrast(resYear1.value[0], resYear1.value[1], TBdata, HBdata, false)
+}
+
+function contrastDialogShow(type) {
+  showDialog.value = true
+  if (type == "1") {
+    showTitle.value = '营业收入详情'
+    handelGetYS0010()
+  } else {
+    showTitle.value = '应收余额详情'
+    handelGetYS0011()
+  }
+}
+
 
 function getdata() {
   clear()
@@ -483,6 +577,8 @@ function handleResize() {
   chart3?.resize()
   chart33?.resize()
   chart44?.resize()
+  chart442?.resize()
+  chartContrast?.resize()
 }
 
 function toDieThousands(num) {
@@ -561,11 +657,11 @@ const handelBing1 = (arr1, arr2) => {
             show: true,          // 显示标签
             position: 'center',  // 位置居中
             formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
-            color: "#ffff",
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
             rich: {
               total: {
                 fontSize: 5,
-                color: '#fff'
+                color: props.myTheme=='dark'?'#fff':'#515F6F'
               }
             }
           },
@@ -603,11 +699,11 @@ const handelBing1 = (arr1, arr2) => {
             show: false,          // 显示标签
             position: 'center',  // 位置居中
             formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
-            color: "#ffff",
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
             rich: {
               total: {
                 fontSize: 5,
-                color: '#fff'
+                color: props.myTheme=='dark'?'#fff':'#515F6F'
               }
             }
           },
@@ -730,11 +826,11 @@ const handelBing1 = (arr1, arr2) => {
             show: true,          // 显示标签
             position: 'center',  // 位置居中
             formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
-            color: "#ffff",
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
             rich: {
               total: {
                 fontSize: 5,
-                color: '#fff'
+                color: props.myTheme=='dark'?'#fff':'#515F6F'
               }
             }
           },
@@ -772,11 +868,11 @@ const handelBing1 = (arr1, arr2) => {
             show: false,          // 显示标签
             position: 'center',  // 位置居中
             formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
-            color: "#ffff",
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
             rich: {
               total: {
                 fontSize: 5,
-                color: '#fff'
+                color: props.myTheme=='dark'?'#fff':'#515F6F'
               }
             }
           },
@@ -903,11 +999,11 @@ const handelBing2 = (row1, row2) => {
             show: true,          // 显示标签
             position: 'center',  // 位置居中
             formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
-            color: "#ffff",
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
             rich: {
               total: {
                 fontSize: 5,
-                color: '#fff'
+                color: props.myTheme=='dark'?'#fff':'#515F6F'
               }
             }
           },
@@ -1019,11 +1115,11 @@ const handelBing2 = (row1, row2) => {
             show: true,          // 显示标签
             position: 'center',  // 位置居中
             formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
-            color: "#ffff",
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
             rich: {
               total: {
                 fontSize: 5,
-                color: '#fff'
+                color: props.myTheme=='dark'?'#fff':'#515F6F'
               }
             }
           },
@@ -1138,11 +1234,11 @@ const handelBing3 = (row1, row2) => {
           show: true,          // 显示标签
           position: 'center',  // 位置居中
           formatter: (row1.TOTAL / 10000).toFixed() || 0, // 文字内容
-          color: "#ffff",
+          color: props.myTheme=='dark'?'#fff':'#515F6F',
           rich: {
             total: {
               fontSize: 5,
-              color: '#fff'
+              color: props.myTheme=='dark'?'#fff':'#515F6F'
             }
           }
         },
@@ -1229,7 +1325,7 @@ const handelZhu1 = (row1, row2) => {
     legend: {
       top: '0',
       textStyle: {
-        color: '#FFF'
+        color: props.myTheme=='dark'?'#fff':'#515F6F'
       },
     },
     grid: {
@@ -1246,12 +1342,15 @@ const handelZhu1 = (row1, row2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
         },
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           formatter: function(value, index) {
             // 只显示奇数索引的标签(从0开始计数)
             return index % 2 === 0 ? value : '';
@@ -1265,7 +1364,7 @@ const handelZhu1 = (row1, row2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 1,
             type: 'solid'
           },
@@ -1277,7 +1376,7 @@ const handelZhu1 = (row1, row2) => {
         splitLine: {
           show: true, // 默认false，需显式开启
           lineStyle: {
-            color: 'rgba(255, 255, 255, .2)', // 绿色轴线
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'rgba(0, 0, 0, .2)', // 绿色轴线
           }
         }
       }
@@ -1356,7 +1455,7 @@ const handelZhu2 = (row1, row2) => {
     legend: {
       top: '0',
       textStyle: {
-        color: '#FFF'
+        color: props.myTheme=='dark'?'#fff':'#515F6F'
       },
     },
     grid: {
@@ -1373,12 +1472,15 @@ const handelZhu2 = (row1, row2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
         },
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           interval:0,
           formatter: function(value, index) {
             // 只显示奇数索引的标签(从0开始计数)
@@ -1393,7 +1495,7 @@ const handelZhu2 = (row1, row2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 1,
             type: 'solid'
           }
@@ -1496,7 +1598,7 @@ const handelZhu3 = (row1, row2) => {
     legend: {
       data: [name1, name2],
       textStyle: {
-        color: "#00DDFF"
+        color: props.myTheme=='dark'?"#00DDFF":'#515F6F'
       }
     },
     toolbox: {
@@ -1521,12 +1623,15 @@ const handelZhu3 = (row1, row2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid',
           }
         },
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           padding: [0, 0, 0, 20],
           formatter: function(value, index) {
             // 只显示奇数索引的标签(从0开始计数)
@@ -1541,7 +1646,7 @@ const handelZhu3 = (row1, row2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 1,
             type: 'solid'
           }
@@ -1659,7 +1764,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
     },
     legend: {
       textStyle: {
-        color: '#FFF'
+        color: props.myTheme=='dark'?'#fff':'#515F6F'
       },
       selectedMode: false,
     },
@@ -1679,12 +1784,15 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
         },
         axisLabel:{
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           padding: [0, 0, 0, 6]
         }
       }
@@ -1696,7 +1804,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 1,
             type: 'solid'
           }
@@ -1805,7 +1913,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
             return ''; // 其他点不显示
           },
           fontSize: 13,
-          color: '#fff',
+          color: props.myTheme=='dark'?'#fff':'#000',
           // fontWeight: 'bold',
           opacity: 1,       // 关键：取消透明度
           shadowBlur: 0     // 取消阴影
@@ -1849,7 +1957,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
             return ''; // 其他点不显示
           },
           fontSize: 13,
-          color: '#fff',
+          color: props.myTheme=='dark'?'#fff':'#000',
           // fontWeight: 'bold',
           opacity: 1,       // 关键：取消透明度
           shadowBlur: 0     // 取消阴影
@@ -1862,7 +1970,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
 }
 
 const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
-  chart44 = echarts.init(zhuRef4.value)
+  chart442 = echarts.init(zhuRef42.value)
   const option = {
     tooltip: {
       trigger: 'axis',
@@ -1900,7 +2008,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
     },
     legend: {
       textStyle: {
-        color: '#FFF'
+        color: props.myTheme=='dark'?'#fff':'#515F6F'
       },
     },
     grid: {
@@ -1919,12 +2027,15 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
         },
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           interval:0,
           formatter: function(value, index) {
             // 只显示奇数索引的标签(从0开始计数)
@@ -1940,7 +2051,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 1,
             type: 'solid'
           }
@@ -2042,7 +2153,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
             return ''; // 其他点不显示
           },
           fontSize: 13,
-          color: '#fff',
+          color: props.myTheme=='dark'?'#fff':'#000',
           // fontWeight: 'bold',
           opacity: 1,       // 关键：取消透明度
           shadowBlur: 0     // 取消阴影
@@ -2050,10 +2161,263 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
       },
     ]
   }
-  chart44.setOption(option)
+  chart442.setOption(option)
   // autoHover(chart44, option, 0, 2000)
 }
 
+const handelContrast = (row1, row2, TBdata, HBdata, flag) => {
+  chartContrast = echarts.init(contrastRef.value)
+  let monthData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+
+  // 处理环比数据为series格式
+  const increaseData = [];
+  const decreaseData = [];
+  const barData = []
+  HBdata.forEach((item, index) => {
+    if (item >= 0) {
+      increaseData.push([index, item]);
+      decreaseData.push([index, '-']);
+    } else {
+      decreaseData.push([index, item]);
+      increaseData.push([index, '-']);
+    }
+    barData.push(item)
+  });
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
+      borderColor: 'rgba(46, 151, 198, 1)',    // 边框颜色
+      borderWidth: 1,         // 边框宽度
+      textStyle: {
+        color: props.myTheme=='dark'?'#fff':'#515F6F',        // 文字颜色
+        fontSize: 12,         // 文字大小
+      },
+      formatter: function (params) {
+        let tip = `${params[0].name}<br/>`;
+        params.forEach((item) => {
+          if (item.value !== '-') {
+            const val = item.seriesName.includes('同比')
+                ? `${item.value}%`
+                : item.seriesName.includes('环比')
+                    ? `${item.value[1]}%`
+                    : item.value;
+            if (!item.seriesName.includes('连接线')) {
+              tip += `${item.seriesName}: ${val}<br/>`
+            }
+          }
+        });
+        return tip;
+      }
+    },
+    legend: {
+      data: ['同比', '环比增加', '环比减少', ''+row1.YEAR, ''+row2.YEAR],
+      top: '5%',
+      textStyle: {
+        color: props.myTheme=='dark'?'#fff':'#515F6F'
+      },
+    },
+    grid: [
+      {top: '15%', left: '0%', right: '0%', height: '20%'},
+      {top: '40%', left: '0%', right: '0%', height: '20%'},
+      {top: '65%', left: '0%', right: '0%', bottom: '1%', containLabel: true}
+    ],
+    xAxis: [
+      // 同比的x轴（隐藏，复用月份）
+      {
+        gridIndex: 0,
+        data: monthData,
+        axisLine: {
+          show:true,
+          lineStyle: {
+            color: props.myTheme=='dark'?'#fff':'#000',
+            width: 2,
+            type: 'solid'
+          }
+        },
+        axisLabel: { show:false },
+        splitLine:{show:false} },
+      // 环比的x轴（隐藏，复用月份）
+      {
+        gridIndex: 1,
+        data: monthData,
+        axisLine: {
+          show:true,
+          lineStyle: {
+            color: props.myTheme=='dark'?'#fff':'#000',
+            width: 2,
+            type: 'solid'
+          }
+        },
+        axisLabel: { show:false },
+        splitLine:{show:false} },
+      {
+        gridIndex: 2,
+        type: 'category',
+        data: monthData,
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
+            width: 2,
+            type: 'solid'
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
+          formatter: function(value, index) {
+            // 只显示奇数索引的标签(从0开始计数)
+            return index % 2 === 0 ? value : '';
+          }
+        }
+      }
+    ],
+    yAxis: [
+      // 同比的y轴（百分比）
+      { gridIndex: 0, axisLine: { show:false }, axisLabel: { show:false }, splitLine:{show:false} },
+      // 环比的y轴（百分比）
+      { gridIndex: 1, axisLine: { show:false }, axisLabel: { show:false }, splitLine:{show:false} },
+      {
+        gridIndex: 2,
+        type: 'value',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
+            width: 1,
+            type: 'solid'
+          },
+        },
+        axisLabel: {
+          show:false
+          // formatter: '{value}w'  // 在数值后添加单位
+        },
+        splitLine: {
+          show: true, // 默认false，需显式开启
+          lineStyle: {
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'rgba(0, 0, 0, .2)', // 绿色轴线
+          }
+        }
+      }
+    ],
+    series: [
+      // 同比折线
+      {
+        name: '同比',
+        type: 'line',
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        data: TBdata,
+        symbol: 'circle',
+        symbolSize: 8,
+        lineStyle: { color: '#f9d342' },
+        itemStyle: { color: '#f9d342' },
+        label: { show: true, color: props.myTheme=='dark'?'#fff':'#000', formatter: '{c}%' }
+      },
+      // 环比增加（青色点）
+      {
+        name: '环比增加',
+        type: 'scatter',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: increaseData,
+        symbolSize: 10,
+        itemStyle: { color: flag?'#00d8c9':'#ff4d4f' },
+        label: {
+          offset: [0, -20],
+          show: true,
+          color: props.myTheme=='dark'?'#fff':'#000',
+          formatter: '{@[1]}%' }
+      },
+      // 环比减少（红色点）
+      {
+        name: '环比减少',
+        type: 'scatter',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: decreaseData,
+        symbolSize: 10,
+        itemStyle: { color: flag?'#ff4d4f':'#00d8c9' },
+        label: {
+          offset: [0, 20],
+          show: true,
+          color: props.myTheme=='dark'?'#fff':'#000',
+          formatter: '{@[1]}%'
+        }
+      },
+      {
+        name: '连接线',
+        type: 'bar',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        data: barData, // 在每个点后添加一个null，以便连线可以到达y轴
+        showSymbol: false, // 不显示连线上的点
+        itemStyle: { color: props.myTheme=='dark'?'#fff':'#000' },
+        barWidth: 1,
+      },
+      {
+        name: row1.YEAR,
+        type: 'bar',
+        barGap: 0,
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        emphasis: {
+          focus: 'series'
+        },
+        data: row1.list.map(val => {
+          return (val.SRJE / 10000).toFixed()
+        }),
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+            colorStops: [
+              {offset: 0, color: 'rgba(242, 196, 0, 1)'}, // 顶部颜色
+              {offset: 1, color: 'rgba(153, 101, 0, 1)'}  // 底部颜色
+            ]
+          },
+          borderColor: 'rgba(240, 255, 0, 1)',
+          borderWidth: 1
+        },
+        barWidth: '35%',
+        borderColor: 'rgba(240, 255, 0, 1)'
+      },
+      {
+        name: row2.YEAR,
+        type: 'bar',
+        xAxisIndex: 2,
+        yAxisIndex: 2,
+        emphasis: {
+          focus: 'series'
+        },
+        data: row2.list.map(val => {
+          return (val.SRJE / 10000).toFixed()
+        }),
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+            colorStops: [
+              {offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
+              {offset: 1, color: 'rgba(34, 117, 255, 1)'}  // 底部颜色
+            ]
+          },
+          borderColor: 'rgba(0, 246, 255, 1)',
+          borderWidth: 1
+        },
+        barWidth: '35%',
+      },
+    ]
+  }
+  chartContrast.setOption(option)
+}
+
 function autoHover(myChart, option, index, time) {
   autoToolTip(myChart, option, {
     interval: time,// 轮播间隔时间 默认2s
@@ -2077,6 +2441,33 @@ onUnmounted(() => {
 })
 </script>
 
+<style lang="scss">
+.lightDialog {
+  background: url("@/assets/image/dialogBG-light@2x.png") no-repeat center;
+  background-size: 100% 100%;
+
+  .el-dialog__title {
+    color: #000;
+  }
+
+  .el-dialog__headerbtn .el-icon {
+    color: #000;
+  }
+}
+
+.darkDialog {
+  background: url("@/assets/image/dialogBG-dark.png") no-repeat center;
+  background-size: 100% 100%;
+
+  .el-dialog__title {
+    color: #fff;
+  }
+
+  .el-dialog__headerbtn .el-icon {
+    color: #fff;
+  }
+}
+</style>
 <style lang="scss" scoped>
 :deep(.el-radio-button--small .el-radio-button__inner) {
   font-size: calc(12 * 100vw / 1920);
@@ -2096,9 +2487,6 @@ onUnmounted(() => {
       font-size: calc(18 * 100vw / 1920);
       color: #D1D6DF;
       text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
-      background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
       display: flex;
       margin-top: calc(5 * 100vw / 1920);
       
@@ -2118,22 +2506,6 @@ onUnmounted(() => {
     }
   }
   
-  .dong {
-    position: relative;
-    
-    &::after {
-      content: '';
-      width: 40%;
-      height: 40%;
-      background: url("@/assets/img/line2.png") no-repeat;
-      background-size: contain;
-      position: absolute;
-      top: -25%;
-      left: 0;
-      animation: movelr 4s ease-in infinite;
-    }
-  }
-  
   .top {
     padding-top: calc(20 * 100vw / 1920);
     display: flex;
@@ -2143,8 +2515,6 @@ onUnmounted(() => {
     overflow: hidden;
     
     .left {
-      background: url("@/assets/image/box02@2x.png") no-repeat center;
-      background-size: 100% 100%;
       width: calc(140 * 100vw / 1920);
       height: calc(210 * 100vh / 1920);
       
@@ -2154,12 +2524,8 @@ onUnmounted(() => {
         font-family: SimHei, serif;
         font-weight: 600;
         font-size: calc(20 * 100vw / 1920);
-        color: #FFFFFF;
         padding-top: calc(9 * 100vw / 1920);
         //text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
-        background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
       }
       
       .titleCenter {
@@ -2168,28 +2534,17 @@ onUnmounted(() => {
         font-family: SimHei, serif;
         font-weight: 400;
         font-size: calc(15 * 100vw / 1920);
-        color: #FFFFFF;
         margin-top: calc(22 * 100vh / 1920);
         
         span {
           margin-left: calc(10 * 100vw / 1920);
           font-size: calc(17 * 100vw / 1920);
         }
-        
-        .tex1 {
-          color: #F4AB09
-        }
-        
-        .tex2 {
-          color: #1DFBD1;
-        }
       }
       
     }
     
     .right {
-      background: url("@/assets/image/box03@2x.png") no-repeat center;
-      background-size: 100% 100%;
       width: calc(480 * 100vw / 1920);
       height: calc(220 * 100vh / 1920);
       padding: calc(10 * 100vw / 1920) calc(35 * 100vw / 1920);
@@ -2200,11 +2555,7 @@ onUnmounted(() => {
         font-family: rTop, serif;
         font-weight: 600;
         font-size: calc(20 * 100vw / 1920);
-        color: #FFFFFF;
         //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
-        background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
         
         .rTop-img {
           width: calc(30 * 100vw / 1920);
@@ -2238,8 +2589,6 @@ onUnmounted(() => {
   }
   
   .bottom {
-    background: url("@/assets/image/box04@2x.png") no-repeat center;
-    background-size: 100% 100%;
     margin-top: calc(20 * 100vw / 1920);
     padding: calc(10 * 100vw / 1920);
     position: relative;
@@ -2255,9 +2604,6 @@ onUnmounted(() => {
         font-size: calc(18 * 100vw / 1920);
         color: #D1D6DF;
         text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
-        background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
         display: flex;
         margin-top: calc(10 * 100vw / 1920);
         
@@ -2285,7 +2631,6 @@ onUnmounted(() => {
 
       .bingImg {
         background: url("@/assets/image/rmb.png") no-repeat center;
-        color: #fff;
         font-size: 12px;
         padding: 49px;
       }
@@ -2304,14 +2649,168 @@ onUnmounted(() => {
   }
 }
 
-hr {
-  border: 0;
-  border-top: 1px solid #373e51;
-}
-
 .heiti {
   font-family: SimHei, serif;
 }
 
 
+.light {
+  hr {
+    border: 0;
+    border-top: 1px solid #ADC1D4;
+  }
+
+  .top {
+    .left {
+      background: url("@/assets/image/box02-light@2x.png") no-repeat center;
+      background-size: 100% 100%;
+
+      .titleCenter {
+        color: #000;
+
+        .tex1 {
+          color: #F4AB09
+        }
+
+        .tex2 {
+          color: #0060AA;
+        }
+      }
+
+      .titleTop {
+        color: #0060AA;
+      }
+    }
+
+    .right {
+      background: url("@/assets/image/box03-light@2x.png") no-repeat center;
+      background-size: 100% 100%;
+
+      .rTop {
+        color: #0060AA;
+      }
+    }
+  }
+
+  .bottom {
+    background: url("@/assets/image/box04-light@2x.png") no-repeat center;
+    background-size: 100% 100%;
+
+    .bing {
+      .bingTitle {
+        background: #0060AA;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .bingImg {
+        background: url("@/assets/image/rmb-light.png") no-repeat center;
+        color: #515F6F;
+      }
+    }
+  }
+
+  .center {
+    .father {
+      .tex4 {
+        background: #0060AA;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+}
+
+.dark {
+  hr {
+    border: 0;
+    border-top: 1px solid #373e51;
+  }
+
+  .top {
+    .left {
+      background: url("@/assets/image/box02@2x.png") no-repeat center;
+      background-size: 100% 100%;
+
+      .titleTop {
+        color: #FFFFFF;
+        //text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
+        background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+
+      .titleCenter {
+        color: #FFFFFF;
+
+        .tex1 {
+          color: #F4AB09
+        }
+
+        .tex2 {
+          color: #1DFBD1;
+        }
+      }
+    }
+
+    .right {
+      background: url("@/assets/image/box03@2x.png") no-repeat center;
+      background-size: 100% 100%;
+
+      .rTop {
+        color: #FFFFFF;
+        //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
+        background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+
+  .bottom {
+    background: url("@/assets/image/box04@2x.png") no-repeat center;
+    background-size: 100% 100%;
+
+    .bing {
+      .bingTitle {
+        background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .bingImg {
+      background: url("@/assets/image/rmb.png") no-repeat center;
+      color: #fff;
+    }
+  }
+
+  .center {
+    .father {
+      .tex4 {
+        background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+    }
+
+    .dong {
+      position: relative;
+
+      &::after {
+        content: '';
+        width: 40%;
+        height: 40%;
+        background: url("@/assets/img/line2.png") no-repeat;
+        background-size: contain;
+        position: absolute;
+        top: -25%;
+        left: 0;
+        animation: movelr 4s ease-in infinite;
+      }
+    }
+  }
+}
+
+
 </style>

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

@@ -25,7 +25,7 @@
                 placeholder="数据因素"
                 size="small"
                 @change="handelSelect1">
-              <el-option label="收入" value="1"/>
+              <el-option label="累计收入" value="1"/>
               <el-option label="应收账款余额" value="2"/>
             </el-select>
           </div>
@@ -39,41 +39,26 @@
       <div class="title">余额占比</div>
       <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
     </div>
-    
 
     <div class="chartCard mt30">
-      <div>
-        <div class="title">节点组成</div>
-        
-        <div class="po_right">
-          <div class="itemBox">
-            <el-select
-              v-model="type4"
-              class="select"
-              collapse-tags
-              multiple
-              placeholder="全部基地"
-              size="small"
-              @change="handelSelect4">
-              <el-option :label="`${Year1}年`" value="1"/>
-              <el-option :label="`${Year2}年`" value="2"/>
-            </el-select>
-          </div>
-          <div class="itemBox" v-if="myType">
-            <el-select
-              v-model="type3"
-              class="select"
-              placeholder="全部基地"
-              size="small"
-              @change="handelSelect3"
-            >
-              <el-option label="全部" value="0"/>
-              <el-option v-for="val in list" :key="val.BASEJC" :label="val.BASEJC" :value="val.BASEJC"/>
-            </el-select>
-          </div>
-        </div>
-      </div>
-      <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
+      <div class="title">应收账期</div>
+      <!--      <div class="po_right" style="justify-content: end;">-->
+      <!--        <div class="itemBox" v-if="myType">-->
+      <!--          <el-select-->
+      <!--              v-model="list9Y"-->
+      <!--              class="select"-->
+      <!--              collapse-tags-->
+      <!--              multiple-->
+      <!--              placeholder="全部基地"-->
+      <!--              size="small"-->
+      <!--              @change="handelSelect9">-->
+      <!--            <el-option-->
+      <!--                v-for="(val,i) in list9"-->
+      <!--                :key="i" :label="val.BASEJC" :value="val.BASEJC"/>-->
+      <!--          </el-select>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
     </div>
   </div>
 </template>
@@ -83,7 +68,7 @@ import {onMounted, ref, onUnmounted, computed, watch} from 'vue'
 import {autoToolTip} from "@/plugins/auto-toolTip";
 import * as echarts from "echarts";
 import * as api from "@/apiPc/common"
-import {getYS006} from '@/api/server.js'
+import {getYS006, getYS009} from '@/api/server.js'
 import {dayjs} from 'element-plus'
 
 const props = defineProps({
@@ -108,6 +93,10 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  myTheme:{
+    type: String,
+    default: 'dark'
+  },
 })
 
 const url = computed(() => props.url)
@@ -127,10 +116,15 @@ watch(() => props.sBase,(newVal) => {
     init()
   }
 })
+watch(() => props.myTheme,(newVal) => {
+  if (isMounted.value) {
+    init()
+  }
+})
 
 const zhuRef = ref(null)
 const lineRef = ref(null)
-const payeeRef = ref(null)
+const overdueRef = ref(null)
 
 const type3 = ref('0')
 const type4 = ref(['1','2'])
@@ -148,14 +142,8 @@ const s2 = ref([])
 const s3 = ref([])
 const s4 = ref([])
 
-
-const h1 = ref([])
-const h2 = ref([])
-const h3 = ref([])
-
-const h4 = ref([])
-const h5 = ref([])
-const h6 = ref([])
+const list9 = ref([])
+const list9Y = ref([])
 
 // const Year1 = dayjs().year() - 1
 // const Year2 = dayjs().year()
@@ -168,7 +156,6 @@ const legend1 = [`${Year1.value}待收款`, `${Year1.value}收费单待签`, `${
 const legend2 = [`${Year2.value}待收款`, `${Year2.value}收费单待签`, `${Year2.value}合同待签`]
 
 
-console.log(Year1.value, Year2.value)
 let chartA
 let chartB
 let chartC
@@ -198,13 +185,7 @@ async function handelGetYS006() {
   s2.value = [...new Array(12).fill(0)]
   s3.value = [...new Array(12).fill(0)]
   s4.value = [...new Array(12).fill(0)]
-  
-  h1.value = [...new Array(12).fill(0)]// 初始化 12 个月，默认值 0
-  h2.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
-  h3.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
-  h4.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
-  h5.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
-  h6.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
+
   // h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
   type2.value = []
   for (const v1 of list.value) {
@@ -230,19 +211,6 @@ async function handelGetYS006() {
     type2.value.push(v1.BASEJC)
     for (const v2 of v1.list) {
       const i = v2.MONTH - 1; // 转为 0~11 的索引
-      h1.value[i] += v2.YSDSK / 10000 || 0;
-      h2.value[i] += v2.SFDDQ / 10000 || 0;
-      let obj = {...h3.value[i]}
-      obj.value += v2.HTDQ / 10000 || 0;
-      obj.info += v2.YSWELLINFO;
-      h3.value[i] = {...obj}
-      
-      h4.value[i] += v2.JNYSDSK / 10000 || 0
-      h5.value[i] += v2.JNSFDDQ / 10000 || 0
-      let obj2 = {...h6.value[i]}
-      obj2.value += v2.JNHTDQ / 10000 || 0;
-      obj2.info += v2.JNYSWELLINFO;
-      h6.value[i] = {...obj2}
       s1.value[i] += v2.INCOME / 10000 || 0;
       s2.value[i] += v2.LASTINCOME / 10000 || 0;
       s3.value[i] += v2.LASTYSBALANCE / 10000 || 0;
@@ -277,19 +245,64 @@ async function handelGetYS006() {
   )
   // h3.value = h3.value.map((item) => JSON.parse(item))
   // setC(h1.value, h2.value, h3.value, h4.value, h5.value, h6.value)
-  setC(
-    type4.value.includes('1') ? h1.value : [],
-    type4.value.includes('1') ? h2.value : [],
-    type4.value.includes('1') ? h3.value : [],
-    type4.value.includes('2') ? h4.value : [],
-    type4.value.includes('2') ? h5.value : [],
-    type4.value.includes('2') ? h6.value : [],
-    type4.value.includes('1') ? legend1 : [],
-    type4.value.includes('2') ? legend2 : [],
-  )
+}
+
+async function handelGetYS009() {
+  const res = await getYS009(url.value, obj.value)
+  list9.value = res.data.list
+  list9Y.value = []
+  let arrY = []
+  let arr1 = []
+  let arr2 = []
+  let arr3 = []
 
-  console.log(2222222, h3.value)
-  console.log(33333333, h6.value)
+  if (myType.value) {
+    for (const val of list9.value) {
+      list9Y.value.push(val.BASEJC)
+      arrY.push(val.BASEJC)
+      arr1.push(Math.round(val.WKPCOSTONE / 10000))
+      arr2.push(Math.round(val.WKPCOSTTWO / 10000))
+      arr3.push({
+        value: Math.round(val.WKPCOSTTHREE / 10000),
+        info: val.YQWELLINFO
+      })
+    }
+  } else {
+    for (const val of list9.value) {
+      arrY.push(val.MONTH)
+      arr1.push(Math.round(val.WKPCOSTONE / 10000))
+      arr2.push(Math.round(val.WKPCOSTTWO / 10000))
+      arr3.push({
+        value: Math.round(val.WKPCOSTTHREE / 10000),
+        info: val.YQWELLINFO
+      })
+    }
+  }
+
+  setC(arrY, arr1, arr2, arr3)
+}
+
+function handelSelect9() {
+  let arr = list9Y.value.map(val => list9.value.find(item => item.BASEJC === val));
+  list9Y.value = []
+  console.log(arr)
+  let arrY = []
+  let arr1 = []
+  let arr2 = []
+  let arr3 = []
+
+  for (const val of arr) {
+    list9Y.value.push(val.BASEJC)
+    arrY.push(val.BASEJC)
+    arr1.push(Math.round(val.WKPCOSTONE / 10000))
+    arr2.push(Math.round(val.WKPCOSTTWO / 10000))
+    arr3.push({
+      value: Math.round(val.WKPCOSTTHREE / 10000),
+      info: val.YQWELLINFO
+    })
+  }
+
+  setC(arrY, arr1, arr2, arr3)
 }
 
 function handelSelect1() {
@@ -326,92 +339,6 @@ function handelSelect2() {
   )
 }
 
-function handelSelect3() {
-  h1.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
-  h2.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
-  h3.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
-  h4.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
-  h5.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
-  h6.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
-
-  if (type3.value == '0') {
-    //   h1.value.push(val.YSDSK)//应待收款
-    //   h2.value.push(val.SFDDQ)//收费单待签
-    //   h3.value.push(val.HTDQ)//合同待签
-    for (const department of list.value) {
-      for (const monthData of department.list) {
-        const i = monthData.MONTH - 1; // 转为 0~11 的索引
-        h1.value[i] += monthData.YSDSK / 10000 || 0;
-        h2.value[i] += monthData.SFDDQ / 10000 || 0;
-        let obj = {...h3.value[i]}
-        obj.value += monthData.HTDQ / 10000 || 0;
-        obj.info += monthData.YSWELLINFO;
-        h3.value[i] = {...obj}
-        
-        h4.value[i] += monthData.JNYSDSK / 10000 || 0
-        h5.value[i] += monthData.JNSFDDQ / 10000 || 0
-        let obj2 = {...h6.value[i]}
-        obj2.value += monthData.JNHTDQ / 10000 || 0;
-        obj2.info += monthData.JNYSWELLINFO;
-        h6.value[i] = {...obj2}
-      }
-    }
-    // h3.value = h3.value.map((item) => JSON.parse(item))
-  } else {
-    // 找到对应的数据
-    h3.value = []
-    h2.value = []
-    h1.value = []
-    h4.value = []
-    h5.value = []
-    h6.value = []
-    let obj = list.value.find(item => item.BASEJC === type3.value)
-    for (const val of obj.list) {
-      const i = val.MONTH - 1; // 转为 0~11 的索引
-      h1.value.push(val.YSDSK / 10000 || 0)//应待收款
-      h2.value.push(val.SFDDQ / 10000 || 0)//收费单待签
-      h3.value.push({
-        value: val.HTDQ / 10000 || 0,
-        info: val.YSWELLINFO
-      })//合同待签
-      
-      h4.value.push(val.JNYSDSK / 10000 || 0)//应待收款
-      h5.value.push(val.JNSFDDQ / 10000 || 0)//收费单待签
-      let obj2 = {...h6.value[i]}
-      obj2.value += val.JNHTDQ / 10000 || 0;
-      obj2.info += val.JNYSWELLINFO;
-      h6.value[i] = {...obj2}
-    }
-  }
-  setC(
-    type4.value.includes('1') ? h1.value : [],
-    type4.value.includes('1') ? h2.value : [],
-    type4.value.includes('1') ? h3.value : [],
-    type4.value.includes('2') ? h4.value : [],
-    type4.value.includes('2') ? h5.value : [],
-    type4.value.includes('2') ? h6.value : [],
-    type4.value.includes('1') ? legend1 : [],
-    type4.value.includes('2') ? legend2 : [],
-  )
-  // setC(h1.value, h2.value, h3.value, h4.value, h5.value, h6.value)
-}
-
-function handelSelect4() {
-  // console.log(type4.value)
-  // if (type4.value)
-  setC(
-    type4.value.includes('1') ? h1.value : [],
-    type4.value.includes('1') ? h2.value : [],
-    type4.value.includes('1') ? h3.value : [],
-    type4.value.includes('2') ? h4.value : [],
-    type4.value.includes('2') ? h5.value : [],
-    type4.value.includes('2') ? h6.value : [],
-    type4.value.includes('1') ? legend1 : [],
-    type4.value.includes('2') ? legend2 : [],
-  )
-  
-}
-
 const init = () => {
   clear()
   // if (!intervalA) {
@@ -426,12 +353,38 @@ const init = () => {
 const getdata = () => {
   clear()
   handelGetYS006()
+  handelGetYS009()
 }
 
 const setA = (arr, arr2, arr3) => {
   let sum1 = arr.reduce((a, b) => a + b.value, 0)
-  let sumPercent1 = ((arr2.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2)
-  let sumPercent2 = ((arr3.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2)
+  let sumPercent1 = Math.round((arr2.reduce((a, b) => a + b.value, 0)/sum1)*100)
+  let sumPercent2 = Math.round((arr3.reduce((a, b) => a + b.value, 0)/sum1)*100)
+  let sum2 = arr2.reduce((a, b) => a + b.value, 0)
+  let sum3 = arr3.reduce((a, b) => a + b.value, 0)
+  let per2 = Math.round((sum2/(sum2 + sum3)) * 100)
+  let per3 = Math.round((sum3/(sum2 + sum3)) * 100)
+  arr2.forEach(item => {
+    item.perValue = Math.round((item.value/(sum2 + sum3)) * 100)
+  })
+  arr3.forEach(item => {
+    item.perValue = Math.round((item.value/(sum2 + sum3)) * 100)
+  })
+  let perSum2 = arr2.reduce((a, b) => a + b.perValue, 0)
+  let perSum3 = arr3.reduce((a, b) => a + b.perValue, 0)
+  if (perSum2 < per2) {
+    arr2[0].perValue += 1
+  }
+  if (perSum2 > per2) {
+    arr2[0].perValue -= 1
+  }
+  if (perSum3 < per3) {
+    arr3[0].perValue += 1
+  }
+  if (perSum3 > per3) {
+    arr3[0].perValue -= 1
+  }
+
   chartA = echarts.init(zhuRef.value)
   const option = {
     tooltip: {
@@ -454,7 +407,7 @@ const setA = (arr, arr2, arr3) => {
         bottom: '25%',
         itemGap:10,
         textStyle: {
-          color: '#FFF',
+          color: props.myTheme=='dark'?'#fff':'#515F6F',
           rich: {
             a:{
               float:'left',
@@ -481,7 +434,7 @@ const setA = (arr, arr2, arr3) => {
               width:40,
             },
             hr: {
-              borderColor: '#fff',
+              borderColor: props.myTheme=='dark'?'#fff':'#515F6F',
               borderWidth: 1,
               width: '100%',
               height: 0,
@@ -494,7 +447,7 @@ const setA = (arr, arr2, arr3) => {
           let isLast = false
           for (let i = 0; i < option.series[2].data?.length; i++) {
             if (option.series[2].data[i].name === name) {
-              value = option.series[2].data[i].value;
+              value = option.series[2].data[i].perValue;
               break;
             }
           }
@@ -502,8 +455,8 @@ const setA = (arr, arr2, arr3) => {
             isLast = true
           }
           // 计算百分比
-          let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2);
-         let num2 = num1 > 0 ? num1 + '%' : 0 + '%'
+          // let num1 = Math.round((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100);
+          let num2 = value > 0 ? value + '%' : 0 + '%'
           return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
          // return name + '    ' + num2;
         },
@@ -516,7 +469,7 @@ const setA = (arr, arr2, arr3) => {
         bottom: '25%',
         itemGap:10,
         textStyle: {
-          color: '#FFF',
+          color: props.myTheme=='dark'?'#fff':'#515F6F',
           rich: {
             a:{
               float:'left',
@@ -543,7 +496,7 @@ const setA = (arr, arr2, arr3) => {
               width:40,
             },
             hr: {
-              borderColor: '#fff',
+              borderColor: props.myTheme=='dark'?'#fff':'#515F6F',
               borderWidth: 1,
               width: '100%',
               height: 0,
@@ -556,7 +509,7 @@ const setA = (arr, arr2, arr3) => {
           let isLast = false
           for (let i = 0; i < option.series[2].data?.length; i++) {
             if (option.series[2].data[i].name === name) {
-              value = option.series[2].data[i].value;
+              value = option.series[2].data[i].perValue;
               break;
             }
           }
@@ -564,8 +517,8 @@ const setA = (arr, arr2, arr3) => {
             isLast = true
           }
           // 计算百分比
-          let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2);
-          let num2 = num1 > 0 ? num1 + '%' : 0 + '%'
+          // let num1 = Math.round((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100);
+          let num2 = value > 0 ? value + '%' : 0 + '%'
           return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
           // return name + '    ' + num2;
         },
@@ -578,7 +531,7 @@ const setA = (arr, arr2, arr3) => {
         right: '31%',
         style: {
           text: '陆地：          ' + sumPercent2+'%', // 这里可以计算合计值并显示
-          fill: '#fff', // 文本颜色
+          fill: props.myTheme=='dark'?'#fff':'#515F6F', // 文本颜色
           fontSize: 12, // 文本大小
         },
       },{
@@ -587,7 +540,7 @@ const setA = (arr, arr2, arr3) => {
         right: '6%',
         style: {
           text: '海上：          ' + sumPercent1+'%', // 这里可以计算合计值并显示
-          fill: '#fff', // 文本颜色
+          fill: props.myTheme=='dark'?'#fff':'#515F6F', // 文本颜色
           fontSize: 12, // 文本大小
         }
       }],
@@ -700,7 +653,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
     legend: {
       top: '3%',
       textStyle: {
-        color: '#FFF'
+        color: props.myTheme=='dark'?'#fff':'#515F6F'
       },
     },
     grid: {
@@ -716,12 +669,15 @@ const setB = (arr1, arr2, arr3, arr4) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
         },
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           formatter: function(value, index) {
             // 只显示奇数索引的标签(从0开始计数)
             return index % 2 === 0 ? value : '';
@@ -740,7 +696,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 1,
             type: 'solid'
           }
@@ -748,7 +704,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
         splitLine: {
           show: true, // 默认false，需显式开启
           lineStyle: {
-            color: 'rgba(255, 255, 255, .2)', // 绿色轴线
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
           }
         }
       }
@@ -757,7 +713,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
     series: [
       {
         name: `${Year2.value}应收余额`,
-        type: 'bar',
+        type: 'line',
         barGap: 0,
         emphasis: {
           focus: 'series'
@@ -780,7 +736,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
       },
       {
         name: `${Year1.value}应收余额`,
-        type: 'bar',
+        type: 'line',
         emphasis: {
           focus: 'series'
         },
@@ -802,8 +758,8 @@ const setB = (arr1, arr2, arr3, arr4) => {
         barWidth: '15%'
       },
       {
-        name: `${Year2.value}收入`,
-        type: 'bar',
+        name: `${Year2.value}累计收入`,
+        type: 'line',
         emphasis: {
           focus: 'series'
         },
@@ -824,8 +780,8 @@ const setB = (arr1, arr2, arr3, arr4) => {
         barWidth: '15%'
       },
       {
-        name: `${Year1.value}收入`,
-        type: 'bar',
+        name: `${Year1.value}累计收入`,
+        type: 'line',
         emphasis: {
           focus: 'series'
         },
@@ -851,14 +807,14 @@ const setB = (arr1, arr2, arr3, arr4) => {
   chartB.setOption(option)
   // autoHover(chartB, option, 0, 2000)
 }
-const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
-  chartC = echarts.init(payeeRef.value)
+
+const setC = (arry, arr1, arr2, arr3) => {
+  chartC = echarts.init(overdueRef.value)
   const option = {
     tooltip: {
-      // axisPointer: {
-      //   type: 'shadow'
-      // },
-      valueFormatter: (value) => (value * 1).toFixed() + '万',
+      trigger: 'axis',
+      confine: true,
+      // valueFormatter: (value) => value + '万',
       backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
       borderColor: 'rgba(46, 151, 198, 1)',    // 边框颜色
       borderWidth: 1,         // 边框宽度
@@ -866,56 +822,39 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
         color: '#fff',        // 文字颜色
         fontSize: 12,         // 文字大小
       },
-      confine: true,
+      axisPointer: {
+        type: 'none' // 关闭悬浮竖线
+      },
       position: 'top',
       formatter: function (row) {
         return `
-          <div style="font-weight:bold">${row.name}</div>
+          <div style="font-weight:bold">${row[0].name}</div>
           <div style="display:flex;align-items:center;margin-top:5px">
-            ${row.marker}
-            ${row.seriesName}: ${row.value.toFixed(0)}万
+            ${row[0].marker}
+            ${row[0].seriesName == '逾期360天以上' ? '未开票金额' : row[0].seriesName}: ${row[0].value}万
           </div>
-          <div>
-          ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
+          <div style="display:flex;align-items:center;margin-top:5px">
+            ${row[1].marker}
+            ${row[0].seriesName == '逾期360天以上' ? '未开票金额' : row[1].seriesName}: ${row[1].value}万
+          </div>
+          <div style="display:flex;align-items:center;margin-top:5px">
+            ${row[2].marker}
+            ${row[0].seriesName == '逾期360天以上' ? '未开票金额' : row[2].seriesName}: ${row[2].value}万
+          </div>
+          <div style="display:flex;align-items:center;margin-top:5px">
+            <span>合计：</span>
+            ${row[0].value + row[1].value + row[2].value}万
           </div>
         `;
-      },
-      extraCssText: `
-    max-height: 150px;
-    overflow: auto !important;
-    padding-right: 10px; /* 为滚动条留出空间 */
-  `,
-      enterable: true, // 允许鼠标进入tooltip
-      axisPointer: {
-        type: 'cross',
-        label: {
-          backgroundColor: '#6a7985'
-        }
       }
     },
-    legend: [
-      {
-        data: l1,
-        left: 'center',
-        itemGap: 20,
-        top: '5%',
-        textStyle: {
-          color: '#FFF'
-        },
+    legend: {
+      top: '10%',
+      textStyle: {
+        color: props.myTheme=='dark'?'#fff':'#515F6F'
       },
-      {
-        data: l2,
-        left: 'center',
-        itemGap: 20,
-        padding: [25, 0, 0, 0], // 上右下左内边距
-        top: '5%',
-        textStyle: {
-          color: '#FFF'
-        },
-      }
-    ],
+    },
     grid: {
-      top: '30%',
       left: '3%',
       right: '4%',
       bottom: '3%',
@@ -925,186 +864,117 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
       {
         type: 'category',
         stack: 'Ad',
-        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+        data: arry,
+        axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
+          formatter: function(value, index) {
+            // 只显示奇数索引的标签(从0开始计数)
+            if (myType.value) {
+              return value;
+            }
+            return index % 2 === 0 ? value : ''
+          },
+          interval: 0,
+          // rotate: 45,
+          fontSize: 10,
+        },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
-          }
+          },
+
         },
-        axisLabel: {
-          formatter: function(value, index) {
-            // 只显示奇数索引的标签(从0开始计数)
-            return index % 2 === 0 ? value : '';
-          }
-        }
       }
     ],
     yAxis: [
       {
         type: 'value',
-        name: '',
-        axisLabel: {
-          // formatter: '{value}w'  // 在数值后添加单位
-          show:false,
-        },
-
+        name: '金额(万元)',
+        show: false, // 完全隐藏 Y 轴
+        axisTick: {show: false},
+        axisLabel: {show: false},
+        splitLine: {show: false},
         axisLine: {
-          show: true,
+          show: false,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
         },
-        splitLine: {
-          show: true, // 默认false，需显式开启
-          lineStyle: {
-            color: 'rgba(255, 255, 255, .2)', // 绿色轴线
-          }
-        }
       }
     ],
     series: [
       {
-        name: `${Year1.value}待收款`,
+        name: '0-180天',
         type: 'bar',
         stack: 'Ad',
-        barGap: 0,
+        barMaxWidth: 60, // 设置柱子的最大宽度为40px
+
         emphasis: {
           focus: 'series'
         },
-        // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
-        data: h1,
+        // data: [320, 332,],
+        data: arr1,
         itemStyle: {
           color: {
             type: 'linear',
             x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
             colorStops: [
-              {offset: 0, color: '#18c877'}, // 顶部颜色
-              // {offset: 1, color: 'rgba(70, 232, 116,1 )'}  // 底部颜色
-            ]
+              {offset: 0, color: 'rgba(109, 217, 255, 1)'}, // 顶部颜色
+              // {offset: 1, color: 'rgba(244, 171, 9, 1)'}  // 底部颜色
+            ],
           },
         },
         barWidth: '30%'
       },
       {
-        name: `${Year1.value}收费单待签`,
+        name: '180-360天',
         type: 'bar',
+        barMaxWidth: 60, // 设置柱子的最大宽度为40px
         stack: 'Ad',
-        barGap: 0,
         emphasis: {
           focus: 'series'
         },
-        // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
-        data: h2,
+        // data: [120, 132,],
+        data: arr2,
         itemStyle: {
           color: {
             type: 'linear',
             x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
             colorStops: [
-              {offset: 0, color: '#69c818'}, // 顶部颜色
-              // {offset: 1, color: 'rgba(234, 216, 18, 1)'}  // 底部颜色
-            ]
+              {offset: 0, color: 'rgba(24, 124, 236, 1)'}, // 顶部颜色
+              // {offset: 1, color: 'rgba(148, 140, 252, 1)'}  // 底部颜色
+            ],
           },
         },
         barWidth: '30%'
       },
       {
-        name: `${Year1.value}合同待签`,
+        name: '360天以上',
         type: 'bar',
         stack: 'Ad',
-        barGap: 0,
-        emphasis: {
-          focus: 'series'
-        },
-        // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
-        data: h3,
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
-            colorStops: [
-              {offset: 0, color: 'rgba(9, 173, 122, 1)'}, // 顶部颜色
-              // {offset: 1, color: 'rgba(77, 197, 243, 1)'}  // 底部颜色
-            ]
-          },
-        },
-        barWidth: '30%'
-      },
-      
-      {
-        name: `${Year2.value}待收款`,
-        type: 'bar',
-        stack: 'Ad2',
-        barGap: 0,
-        emphasis: {
-          focus: 'series'
-        },
-        // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
-        data: h4,
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
-            colorStops: [
-              {offset: 0, color: '#2FA9FF'},
-              // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
-            ]
-          },
-        },
-        barWidth: '30%'
-      },
-      {
-        name: `${Year2.value}收费单待签`,
-        type: 'bar',
-        barGap: 0,
-        stack: 'Ad2',
-        emphasis: {
-          focus: 'series'
-        },
-        // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
-        data: h5,
-        itemStyle: {
-          color: {
-            type: 'linear',
-            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
-            colorStops: [
-              {offset: 0, color: '#187CEC'},
-              // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
-              
-              // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
-              // {offset: 1, color: 'rgba(213, 0, 249, 1)'}
-              
-              // {offset: 0, color: 'rgba(255, 215, 0, 0.8)'},
-              // {offset: 1, color: 'rgba(255, 255, 0, 0.6)'}
-            ]
-          },
-        },
-        barWidth: '30%'
-      },
-      {
-        name: `${Year2.value}合同待签`,
-        type: 'bar',
-        stack: 'Ad2',
-        barGap: 0,
+        barMaxWidth: 60, // 设置柱子的最大宽度为40px
+
         emphasis: {
           focus: 'series'
         },
-        // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
-        data: h6,
+        // data: [220, 182,],
+        data: arr3,
         itemStyle: {
           color: {
             type: 'linear',
             x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
             colorStops: [
-              // {offset: 0, color: 'rgba(255, 87, 34, 0.8)'},
-              // {offset: 1, color: 'rgba(255, 138, 101, 0.6)'}
-              {offset: 0, color: 'rgba(2, 62, 218, 1)'},
-              // {offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
-            ]
+              {offset: 0, color: 'rgba(201, 19, 34, 1)'}, // 顶部颜色
+              // {offset: 1, color: 'rgba(176, 72, 119, 1)'}  // 底部颜色
+            ],
           },
         },
         barWidth: '30%'
@@ -1115,7 +985,6 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
   // autoHover(chartC, option, 0, 2000)
 }
 
-
 const clear = () => {
   if (autoToolTip) {
     clearTimeout(autoToolTip);
@@ -1151,26 +1020,13 @@ onUnmounted(() => {
 .title {
   font-family: SimHei, serif;
   font-weight: 600;
-  color: #FFFFFF;
   //text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
-  background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  //background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
+  //-webkit-background-clip: text;
+  //-webkit-text-fill-color: transparent;
   padding: calc(12 * 100vw / 1920) calc(5 * 100vw / 1920) 0;
   font-size: calc(22 * 100vw / 1920);
   position: relative;
-  
-  &::after {
-    content: '';
-    width: 100%;
-    height: 100%;
-    background: url("@/assets/img/line2.png") no-repeat;
-    background-size: contain;
-    position: absolute;
-    top: calc(20 * 100vw / 1920);
-    left: 0;
-    animation: movelr 4s ease-in infinite;
-  }
 }
 
 @keyframes movelr {
@@ -1185,8 +1041,6 @@ onUnmounted(() => {
 }
 
 .chartCard {
-  background: url("@/assets/image/box01@2x.png") no-repeat top left;
-  background-size: 100% 100%;
   position: relative;
   overflow: hidden;
   
@@ -1220,10 +1074,8 @@ onUnmounted(() => {
   
   .itemBox {
     width: 48%;
-    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: 1px solid #12BFFF;
     margin-left: 10px;
     
     .select {
@@ -1250,23 +1102,13 @@ onUnmounted(() => {
       :deep(.el-select__placeholder) {
         font-family: PingFang SC, serif;
         font-weight: 500;
-        color: #fff;
+        //color: #fff;
         //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
         //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
         background-color: rgb(33, 123, 188, .1); /* 背景色 */
         -webkit-background-clip: text;
         //-webkit-text-fill-color: transparent
       }
-      
-      :deep(.el-tag--info) {
-        background-color: rgb(33, 123, 188, .1); /* 背景色 */
-        border-color: #1c81a6; /* 边框色 */
-        color: #fff; /* 文字颜色 */
-      }
-      
-      :deep(.el-icon ) {
-        color: #fff;
-      }
     }
   }
 }
@@ -1284,4 +1126,87 @@ onUnmounted(() => {
     bottom: 0;
   }
 }
+
+.dark {
+  .chartCard {
+    background: url("@/assets/image/box01@2x.png") no-repeat top left;
+    background-size: 100% 100%;
+
+    .title {
+      background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
+      -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text;
+
+      &::after {
+        content: '';
+        width: 100%;
+        height: 100%;
+        background: url("@/assets/img/line2.png") no-repeat;
+        background-size: contain;
+        position: absolute;
+        top: calc(20 * 100vw / 1920);
+        left: 0;
+        animation: movelr 4s ease-in infinite;
+      }
+    }
+
+    .itemBox {
+      background: #0B2239;
+      border: 1px solid #12BFFF;
+      box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
+
+      .select {
+        :deep(.el-tag--info) {
+          background-color: rgb(33, 123, 188, .1); /* 背景色 */
+          border-color: #1c81a6; /* 边框色 */
+          color: #fff; /* 文字颜色 */
+        }
+
+        :deep(.el-icon ) {
+          color: #fff;
+        }
+
+        :deep(.el-select__placeholder) {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+
+}
+
+.light {
+  .chartCard {
+    background: url("@/assets/image/box01-light.png") no-repeat top left;
+    background-size: 100% 100%;
+
+    .title {
+      color: #0060AA;
+    }
+
+    .itemBox {
+      background: transparent;
+      border: 1px solid #97D3FF;
+
+      .select {
+        :deep(.el-tag--info) {
+          border: 1px solid #12BFFF;
+          color: #0060AA;
+        }
+
+        :deep(.el-icon ) {
+          color: #0060AA;
+        }
+
+        :deep(.el-select__placeholder) {
+          color: #0060AA;
+        }
+      }
+    }
+  }
+
+
+
+}
 </style>

@@ -51,33 +51,47 @@
       </div>
       <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
     </div>
-    
+
     <div class="chartCard mt30">
-      <div class="title">应收账期</div>
-<!--      <div class="po_right" style="justify-content: end;">-->
-<!--        <div class="itemBox" v-if="myType">-->
-<!--          <el-select-->
-<!--              v-model="list9Y"-->
-<!--              class="select"-->
-<!--              collapse-tags-->
-<!--              multiple-->
-<!--              placeholder="全部基地"-->
-<!--              size="small"-->
-<!--              @change="handelSelect9">-->
-<!--            <el-option-->
-<!--                v-for="(val,i) in list9"-->
-<!--                :key="i" :label="val.BASEJC" :value="val.BASEJC"/>-->
-<!--          </el-select>-->
-<!--        </div>-->
-<!--      </div>-->
-      <div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
+      <div>
+        <div class="title">节点组成</div>
+
+        <div class="po_right">
+          <div class="itemBox">
+            <el-select
+                v-model="type4"
+                class="select"
+                collapse-tags
+                multiple
+                placeholder="全部"
+                size="small"
+                @change="handelSelect4">
+              <el-option :label="`${Year1}年`" value="1"/>
+              <el-option :label="`${Year2}年`" value="2"/>
+            </el-select>
+          </div>
+          <div class="itemBox" v-if="myType">
+            <el-select
+                v-model="type3"
+                class="select"
+                placeholder="全部基地"
+                size="small"
+                @change="handelSelect3"
+            >
+              <el-option label="全部" value="0"/>
+              <el-option v-for="val in list" :key="val.BASEJC" :label="val.BASEJC" :value="val.BASEJC"/>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
     </div>
   </div>
 </template>
 
 <script setup>
 import {onMounted, onUnmounted, computed, ref, watch} from 'vue'
-import {getYS007, getYS008, getYS009} from '@/api/server.js'
+import {getYS007, getYS008, getYS006} from '@/api/server.js'
 import {autoToolTip} from "@/plugins/auto-toolTip";
 import * as echarts from "echarts";
 import * as api from "@/apiPc/common"
@@ -104,6 +118,10 @@ const props = defineProps({
     type: String,
     default: undefined
   },
+  myTheme:{
+    type: String,
+    default: 'dark'
+  }
 })
 
 const url = computed(() => props.url)
@@ -115,17 +133,21 @@ watch(() => props.historyDate,(newVal) => {
     nowYear.value = parseInt(newVal.substring(0,4))
     init()
   }
-
 })
 watch(() => props.sBase,(newVal) => {
   if (isMounted.value) {
     init()
   }
 })
+watch(() => props.myTheme,(newVal) => {
+  if (isMounted.value) {
+    init()
+  }
+})
 const myType = computed(() => props.type)
 const zhuRef = ref(null)
 const lineRef = ref(null)
-const overdueRef = ref(null)
+const payeeRef = ref(null)
 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
 const radioA = ref('month')
@@ -269,6 +291,26 @@ const list7Y = ref([])
 const select7 = ref([])
 const BC = ref()
 
+const list = ref([])
+
+const arrX = ref([])
+const h1 = ref([])
+const h2 = ref([])
+const h3 = ref([])
+
+const h4 = ref([])
+const h5 = ref([])
+const h6 = ref([])
+
+let Year1 = ref(parseInt(hDate.value.substring(0,4)) - 1)
+let Year2 = ref(parseInt(hDate.value.substring(0,4)))
+
+const legend1 = ref([`${Year1.value}待收款`, `${Year1.value}收费单待签`, `预提占比`])
+const legend2 = ref([`${Year2.value}待收款`, `${Year2.value}收费单待签`, `同期预提占比`])
+
+const type4 = ref(['1','2'])
+const type3 = ref('0')
+
 let chartA
 let chartB
 let chartC
@@ -323,8 +365,8 @@ onMounted(() => {
   // handelGetYS007()
   // handelGetYS008()
   // handelGetYS009()
-  
 })
+
 const init = () => {
   clear()
   obj.value["SELECTDATE"] = hDate
@@ -340,6 +382,72 @@ const init = () => {
   intervalA = setInterval(getdata(), 1000 * 60 * 60);
 }
 
+async function handelGetYS006() {
+  obj.value["SELECTDATE"] = hDate
+  obj.value["BASE"] = sBase
+
+  const res = await getYS006(url.value, obj.value)
+  list.value = res.data.baselist
+  arrX.value = []
+
+  if (myType.value) {
+    for (let i=0; i<list.value.length; i++) {
+      let row = list.value[i]
+      arrX.value.push(list.value[i].BASEJC)
+      h2.value[i] = {value:'',info:''}
+      h5.value[i] = {value:'',info:''}
+
+      h1.value[i] = list.value[i].YSDSKTOTAL / 10000;
+      h2.value[i].value = list.value[i].SFDDQTOTAL / 10000;
+      h3.value[i] = list.value[i].BASEYTZB
+      h4.value[i] = list.value[i].LASTYSDSKTOTAL / 10000;
+      h5.value[i].value = list.value[i].LASTSFDDQTOTAL / 10000
+      h6.value[i] = list.value[i].BASELASTYTZB
+
+      for (let n=0; n<row.list.length; n++) {
+        h2.value[i].info += row.list[n].YSWELLINFO
+        h5.value[i].info += row.list[n].JNYSWELLINFO
+      }
+    }
+  } else {
+    h3.value = []
+    h2.value = []
+    h1.value = []
+    h4.value = []
+    h5.value = []
+    h6.value = []
+    arrX.value = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
+    legend1.value = [`${Year1.value}待收款`, `${Year1.value}收费单待签`]
+    legend2.value = [`${Year2.value}待收款`, `${Year2.value}收费单待签`]
+
+    let obj2 = list.value.find(item => item.BASE === sBase.value)
+    for (let i=0; i<obj2.list.length; i++) {
+      h2.value[i] = {value:'',info:''}
+      h5.value[i] = {value:'',info:''}
+      h1.value[i] = obj2.list[i].YSDSK / 10000;
+      h2.value[i].value = obj2.list[i].SFDDQ / 10000;
+      h4.value[i] = obj2.list[i].JNYSDSK / 10000;
+      h5.value[i].value = obj2.list[i].JNSFDDQ / 10000;
+
+      h2.value[i].info += obj2.list[i].YSWELLINFO
+      h5.value[i].info += obj2.list[i].JNYSWELLINFO
+    }
+  }
+
+
+  setC(
+      arrX.value,
+      type4.value.includes('1') ? h1.value : [],
+      type4.value.includes('1') ? h2.value : [],
+      type4.value.includes('1') ? h3.value : [],
+      type4.value.includes('2') ? h4.value : [],
+      type4.value.includes('2') ? h5.value : [],
+      type4.value.includes('2') ? h6.value : [],
+      type4.value.includes('1') ? legend1.value : [],
+      type4.value.includes('2') ? legend2.value : [],
+  )
+}
+
 async function handelGetYS007() {
   const res = await getYS007(url.value, obj.value)
   list7.value = res.data.list
@@ -350,9 +458,8 @@ async function handelGetYS007() {
   let arr1 = []
   let arr2 = []
   let arr3 = []
-
   if (myType.value) {
-    list7.value.sort((a, b) => a.EXECOST - b.EXECOST);
+    list7.value.sort((a, b) => a.EXERATIO - b.EXERATIO);
     for (const val of list7.value) {
       select7.value.push(val.BASEJC)
       list7Y.value.push({
@@ -410,6 +517,7 @@ function handelSelect7() {
   let arr3 = []
   list7Y.value = []
   select7.value = []
+  arr.sort((a, b) => a.EXERATIO - b.EXERATIO);
   for (const val of arr) {
     select7.value.push(val.BASEJC)
     list7Y.value.push({
@@ -419,12 +527,12 @@ function handelSelect7() {
     arr1.push({
       value: Math.round(val.PLANCOST / 10000),
       name: (val.EXERATIO * 100).toFixed() + '%',
-      itemStyle: val.EXERATIO * 100 >= BC.value ? color1 : color3
+      itemStyle: color4
     })
     arr2.push({
       value: Math.round(val.EXECOST / 10000),
       name: (val.EXERATIO * 100).toFixed() + '%',
-      itemStyle: val.EXERATIO * 100 >= BC.value ? color2 : color4
+      itemStyle: color2
     })
     arr3.push(val.EXERATIO)
   }
@@ -522,74 +630,111 @@ function handelType8() {
   setB(list8Y.value, arrc)
 }
 
-async function handelGetYS009() {
-  const res = await getYS009(url.value, obj.value)
-  list9.value = res.data.list
-  list9Y.value = []
-  let arrY = []
-  let arr1 = []
-  let arr2 = []
-  let arr3 = []
+function handelSelect3() {
+  if (type3.value == '0') {
+    legend1.value = [`${Year1.value}待收款`, `${Year1.value}收费单待签`, `预提占比`]
+    legend2.value = [`${Year2.value}待收款`, `${Year2.value}收费单待签`, `同期预提占比`]
+    // for (const department of list.value) {
+    //   for (const monthData of department.list) {
+    //     const i = monthData.MONTH - 1; // 转为 0~11 的索引
+    //     h1.value[i] += monthData.YSDSK / 10000 || 0;
+    //     h2.value[i] += monthData.SFDDQ / 10000 || 0;
+    //     let obj = {...h3.value[i]}
+    //     obj.value += monthData.HTDQ / 10000 || 0;
+    //     obj.info += monthData.YSWELLINFO;
+    //     h3.value[i] = {...obj}
+    //
+    //     h4.value[i] += monthData.JNYSDSK / 10000 || 0
+    //     h5.value[i] += monthData.JNSFDDQ / 10000 || 0
+    //     let obj2 = {...h6.value[i]}
+    //     obj2.value += monthData.JNHTDQ / 10000 || 0;
+    //     obj2.info += monthData.JNYSWELLINFO;
+    //     h6.value[i] = {...obj2}
+    //   }
+    // }
+    arrX.value = []
+    for (let i=0; i<list.value.length; i++) {
+      let row = list.value[i]
+      arrX.value.push(list.value[i].BASEJC)
+      h2.value[i] = {value:'',info:''}
+      h5.value[i] = {value:'',info:''}
 
-  if (myType.value) {
-    for (const val of list9.value) {
-      list9Y.value.push(val.BASEJC)
-      arrY.push(val.BASEJC)
-      arr1.push(Math.round(val.WKPCOSTONE / 10000))
-      arr2.push(Math.round(val.WKPCOSTTWO / 10000))
-      arr3.push({
-        value: Math.round(val.WKPCOSTTHREE / 10000),
-        info: val.YQWELLINFO
-      })
+      h1.value[i] = list.value[i].YSDSKTOTAL / 10000;
+      h2.value[i].value = list.value[i].SFDDQTOTAL / 10000;
+      h3.value[i] = list.value[i].BASEYTZB
+      h4.value[i] = list.value[i].LASTYSDSKTOTAL / 10000;
+      h5.value[i].value = list.value[i].LASTSFDDQTOTAL / 10000
+      h6.value[i] = list.value[i].BASELASTYTZB
+
+      for (let n=0; n<row.list.length; n++) {
+        h2.value[i].info += row.list[n].YSWELLINFO
+        h5.value[i].info += row.list[n].JNYSWELLINFO
+      }
     }
   } else {
-    for (const val of list9.value) {
-      arrY.push(val.MONTH)
-      arr1.push(Math.round(val.WKPCOSTONE / 10000))
-      arr2.push(Math.round(val.WKPCOSTTWO / 10000))
-      arr3.push({
-        value: Math.round(val.WKPCOSTTHREE / 10000),
-        info: val.YQWELLINFO
-      })
-    }
-  }
+    // 找到对应的数据
+    h3.value = []
+    h2.value = []
+    h1.value = []
+    h4.value = []
+    h5.value = []
+    h6.value = []
+    arrX.value = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
+    legend1.value = [`${Year1.value}待收款`, `${Year1.value}收费单待签`]
+    legend2.value = [`${Year2.value}待收款`, `${Year2.value}收费单待签`]
 
-  setC(arrY, arr1, arr2, arr3)
-}
+    let obj = list.value.find(item => item.BASEJC === type3.value)
+    for (let i=0; i<obj.list.length; i++) {
+      h2.value[i] = {value:'',info:''}
+      h5.value[i] = {value:'',info:''}
+      h1.value[i] = obj.list[i].YSDSK / 10000;
+      h2.value[i].value = obj.list[i].SFDDQ / 10000;
+      h4.value[i] = obj.list[i].JNYSDSK / 10000;
+      h5.value[i].value = obj.list[i].JNSFDDQ / 10000;
 
-function handelSelect9() {
-  let arr = list9Y.value.map(val => list9.value.find(item => item.BASEJC === val));
-  list9Y.value = []
-  console.log(arr)
-  let arrY = []
-  let arr1 = []
-  let arr2 = []
-  let arr3 = []
-
-  for (const val of arr) {
-    list9Y.value.push(val.BASEJC)
-    arrY.push(val.BASEJC)
-    arr1.push(Math.round(val.WKPCOSTONE / 10000))
-    arr2.push(Math.round(val.WKPCOSTTWO / 10000))
-    arr3.push({
-      value: Math.round(val.WKPCOSTTHREE / 10000),
-      info: val.YQWELLINFO
-    })
+      h2.value[i].info += obj.list[i].YSWELLINFO
+      h5.value[i].info += obj.list[i].JNYSWELLINFO
+    }
   }
+  setC(
+      arrX.value,
+      type4.value.includes('1') ? h1.value : [],
+      type4.value.includes('1') ? h2.value : [],
+      type4.value.includes('1') ? h3.value : [],
+      type4.value.includes('2') ? h4.value : [],
+      type4.value.includes('2') ? h5.value : [],
+      type4.value.includes('2') ? h6.value : [],
+      type4.value.includes('1') ? legend1.value : [],
+      type4.value.includes('2') ? legend2.value : [],
+  )
+  // setC(h1.value, h2.value, h3.value, h4.value, h5.value, h6.value)
+}
 
-  setC(arrY, arr1, arr2, arr3)
+function handelSelect4() {
+  // console.log(type4.value)
+  // if (type4.value)
+  setC(
+      arrX.value,
+      type4.value.includes('1') ? h1.value : [],
+      type4.value.includes('1') ? h2.value : [],
+      type4.value.includes('1') ? h3.value : [],
+      type4.value.includes('2') ? h4.value : [],
+      type4.value.includes('2') ? h5.value : [],
+      type4.value.includes('2') ? h6.value : [],
+      type4.value.includes('1') ? legend1.value : [],
+      type4.value.includes('2') ? legend2.value : [],
+  )
 }
 
 const getdata = () => {
+  handelGetYS006()
   handelGetYS007()
   handelGetYS008()
-  handelGetYS009()
 }
 
 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
   chartA = echarts.init(zhuRef.value)
   let option
-  console.log(myType.value)
   if (myType.value) {
     option = {
       tooltip: {
@@ -609,12 +754,12 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
       legend: {
         top: "3%",
         textStyle: {
-          color: '#FFF'
+          color: props.myTheme=='dark'?'#fff':'#515F6F'
         },
       },
       grid: {
         top: "15%",
-        left: '5%',
+        left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
@@ -622,12 +767,15 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
       xAxis: {
         type: 'value',
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           formatter: '{value}'  // 在数值后添加单位
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
@@ -635,7 +783,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
         splitLine: {
           show: true, // 默认false，需显式开启
           lineStyle: {
-            color: 'rgba(255, 255, 255, .2)', // 绿色轴线
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
           }
         }
       },
@@ -660,6 +808,9 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
           type: 'category',
           data: arrY,
           axisLabel: {
+            textStyle: {
+              color: props.myTheme=='dark'?'#fff':'#515F6F',
+            },
             // formatter: '{value}w'  // 在数值后添加单位
             interval: 0,
             fontSize: 10,
@@ -667,7 +818,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
           axisLine: {
             show: true,
             lineStyle: {
-              color: 'rgba(255, 255, 255, 1)',
+              color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'#ADC1D4',
               width: 1,
               type: 'solid'
             }
@@ -722,7 +873,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
             show: true,
             position: 'right',
             textStyle: {
-              color: 'rgba(255, 255, 255, 1)',
+              color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'rgba(0, 0, 0, 1)',
             },
             formatter: function (v1) {
               return v1.data.name
@@ -767,7 +918,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
                   formatter: BC + '%',
                   position: 'end', // 可选值: 'start', 'middle', 'end'
                   distance: [-20, 40],
-                  color: "#fff"
+                  color: props.myTheme=='dark'?'#fff':'#000'
                 }
               }
             ]
@@ -795,7 +946,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
       legend: {
         top: "3%",
         textStyle: {
-          color: '#FFF'
+          color: props.myTheme=='dark'?'#fff':'#515F6F'
         },
       },
       grid: {
@@ -816,7 +967,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
         splitLine: {
           show: true, // 默认false，需显式开启
           lineStyle: {
-            color: 'rgba(255, 255, 255, .2)', // 绿色轴线
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
           }
         }
       },
@@ -841,6 +992,9 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
           type: 'category',
           data: arrY,
           axisLabel: {
+            textStyle: {
+              color: props.myTheme=='dark'?'#fff':'#515F6F',
+            },
             formatter: function(value, index) {
               // 只显示奇数索引的标签(从0开始计数)
               return index % 2 === 0 ? value : '';
@@ -851,7 +1005,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
           axisLine: {
             show: true,
             lineStyle: {
-              color: 'rgba(255, 255, 255, 1)',
+              color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'#ADC1D4',
               width: 1,
               type: 'solid'
             }
@@ -904,7 +1058,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
             show: true,
             position: 'right',
             textStyle: {
-              color: 'rgba(255, 255, 255, 1)',
+              color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'rgba(0, 0, 0, 1)',
             },
             formatter: function (v1) {
               return v1.data.name
@@ -947,7 +1101,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
                   formatter: BC + '%',
                   position: 'end', // 可选值: 'start', 'middle', 'end'
                   distance: [-20, 40],
-                  color: "#fff"
+                  color: props.myTheme=='dark'?'#fff':'#000'
                 }
               }
             ]
@@ -992,12 +1146,15 @@ const setB = (arrY, arr1, arr2) => {
       xAxis: {
         type: 'value',
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           formatter: '{value}'  // 在数值后添加单位
         },
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 1,
             type: 'solid'
           }
@@ -1005,7 +1162,7 @@ const setB = (arrY, arr1, arr2) => {
         splitLine: {
           show: true, // 默认false，需显式开启
           lineStyle: {
-            color: 'rgba(255, 255, 255, .2)', // 绿色轴线
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
           }
         }
       },
@@ -1014,6 +1171,9 @@ const setB = (arrY, arr1, arr2) => {
         // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
         data: arrY,
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           // formatter: '{value}w'  // 在数值后添加单位
           interval: 0,
           fontSize: 10,
@@ -1021,7 +1181,7 @@ const setB = (arrY, arr1, arr2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
@@ -1186,7 +1346,7 @@ const setB = (arrY, arr1, arr2) => {
       legend: {
         top: "3%",
         textStyle: {
-          color: '#FFF'
+          color: props.myTheme=='dark'?'#fff':'#515F6F'
         },
       },
       grid: {
@@ -1207,7 +1367,7 @@ const setB = (arrY, arr1, arr2) => {
         splitLine: {
           show: true, // 默认false，需显式开启
           lineStyle: {
-            color: 'rgba(255, 255, 255, .2)', // 绿色轴线
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
           }
         }
       },
@@ -1216,6 +1376,9 @@ const setB = (arrY, arr1, arr2) => {
         // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
         data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
         axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          },
           formatter: function(value, index) {
             // 只显示奇数索引的标签(从0开始计数)
             return index % 2 === 0 ? value : '';
@@ -1226,7 +1389,7 @@ const setB = (arrY, arr1, arr2) => {
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
           }
@@ -1527,13 +1690,15 @@ const setB = (arrY, arr1, arr2) => {
   chartB.setOption(option)
   // autoHover(chartB, option, 0, 2000)
 }
-const setC = (arry, arr1, arr2, arr3) => {
-  chartC = echarts.init(overdueRef.value)
+
+const setC = (arr, h1, h2, h3, h4, h5, h6, l1, l2) => {
+  chartC = echarts.init(payeeRef.value)
   const option = {
     tooltip: {
-      trigger: 'axis',
-      confine: true,
-      valueFormatter: (value) => value + '万',
+      // axisPointer: {
+      //   type: 'shadow'
+      // },
+      valueFormatter: (value) => (value * 1).toFixed() + '万',
       backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
       borderColor: 'rgba(46, 151, 198, 1)',    // 边框颜色
       borderWidth: 1,         // 边框宽度
@@ -1541,30 +1706,73 @@ const setC = (arry, arr1, arr2, arr3) => {
         color: '#fff',        // 文字颜色
         fontSize: 12,         // 文字大小
       },
-      axisPointer: {
-        type: 'none' // 关闭悬浮竖线
-      },
+      confine: true,
       position: 'top',
-      // formatter: function (row) {
-      //   return `
-      //     <div style="font-weight:bold">${row.name}</div>
-      //     <div style="display:flex;align-items:center;margin-top:5px">
-      //       ${row.marker}
-      //       ${row.seriesName == '逾期360天以上' ? '未开票金额' : row.seriesName}: ${row.value}万
-      //     </div>
-      //     <div>
-      //     ${row.data?.info ? row.data?.info?.replaceAll('\n', '<br>') : ''}
-      //     </div>
-      //   `;
-      // }
-    },
-    legend: {
-      top: '10%',
-      textStyle: {
-        color: '#FFF'
+      formatter: function (row) {
+        let outStr = ''
+        let barStr = `
+          <div style="font-weight:bold">${row.name}</div>
+          <div style="display:flex;align-items:center;margin-top:5px">
+            ${row.marker}
+            ${row.seriesName}: ${row.value.toFixed(0)}万
+          </div>
+          <div>
+          ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
+          </div>
+        `
+
+        let lineStr = `
+          <div style="font-weight:bold">${row.name}</div>
+          <div style="display:flex;align-items:center;margin-top:5px">
+            ${row.marker}
+            ${row.seriesName}: ${row.value}
+          </div>
+        `
+
+        if (row.seriesName == "预提占比" || row.seriesName == "同期预提占比") {
+          outStr = lineStr
+        } else {
+          outStr = barStr
+        }
+
+        return outStr;
       },
+      extraCssText: `
+    max-height: 150px;
+    overflow: auto !important;
+    padding-right: 10px; /* 为滚动条留出空间 */
+  `,
+      enterable: true, // 允许鼠标进入tooltip
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
     },
+    legend: [
+      {
+        data: l1,
+        left: 'center',
+        itemGap: 20,
+        top: '5%',
+        textStyle: {
+          color: props.myTheme=='dark'?'#fff':'#515F6F'
+        },
+      },
+      {
+        data: l2,
+        left: 'center',
+        itemGap: 20,
+        padding: [25, 0, 0, 0], // 上右下左内边距
+        top: '5%',
+        textStyle: {
+          color: props.myTheme=='dark'?'#fff':'#515F6F'
+        },
+      }
+    ],
     grid: {
+      top: '30%',
       left: '3%',
       right: '4%',
       bottom: '3%',
@@ -1574,123 +1782,230 @@ const setC = (arry, arr1, arr2, arr3) => {
       {
         type: 'category',
         stack: 'Ad',
-        // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-        data: arry,
-        axisLabel: {
-          formatter: function(value, index) {
-            // 只显示奇数索引的标签(从0开始计数)
-            if (myType.value) {
-              return value;
-            }
-            return index % 2 === 0 ? value : ''
-          },
-          interval: 0,
-          // rotate: 45,
-          fontSize: 10,
-        },
+        data: arr,
         axisLine: {
           show: true,
           lineStyle: {
-            color: '#fff',
+            color: props.myTheme=='dark'?'#fff':'#ADC1D4',
             width: 2,
             type: 'solid'
-          },
-          
+          }
         },
+        axisLabel: {
+          textStyle: {
+            color: props.myTheme=='dark'?'#fff':'#515F6F',
+          }
+        }
       }
     ],
     yAxis: [
       {
         type: 'value',
-        name: '金额(万元)',
-        show: false, // 完全隐藏 Y 轴
-        axisTick: {show: false},
-        axisLabel: {show: false},
-        splitLine: {show: false},
+        name: '',
+        axisLabel: {
+          // formatter: '{value}w'  // 在数值后添加单位
+          show:false,
+        },
+
         axisLine: {
           show: false,
+        },
+        splitLine: {
+          show: true, // 默认false，需显式开启
           lineStyle: {
-            color: '#fff',
-            width: 2,
-            type: 'solid'
+            color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
           }
+        }
+      },
+      {
+        type: 'value',
+        name: '',
+        axisLabel: {
+          // formatter: '{value}w'  // 在数值后添加单位
+          show:false,
         },
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: false, // 默认false，需显式开启
+        }
       }
     ],
     series: [
       {
-        name: '0-180天',
+        name: `${Year1.value}待收款`,
         type: 'bar',
         stack: 'Ad',
-        barMaxWidth: 60, // 设置柱子的最大宽度为40px
-        
+        barGap: 0,
         emphasis: {
           focus: 'series'
         },
-        // data: [320, 332,],
-        data: arr1,
+        // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
+        data: h1,
         itemStyle: {
           color: {
             type: 'linear',
             x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
             colorStops: [
-              {offset: 0, color: 'rgba(109, 217, 255, 1)'}, // 顶部颜色
-              // {offset: 1, color: 'rgba(244, 171, 9, 1)'}  // 底部颜色
-            ],
+              {offset: 0, color: '#18c877'}, // 顶部颜色
+              // {offset: 1, color: 'rgba(70, 232, 116,1 )'}  // 底部颜色
+            ]
           },
         },
         barWidth: '30%'
       },
       {
-        name: '180-360天',
+        name: `${Year1.value}收费单待签`,
         type: 'bar',
-        barMaxWidth: 60, // 设置柱子的最大宽度为40px
         stack: 'Ad',
+        barGap: 0,
+        emphasis: {
+          focus: 'series'
+        },
+        // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
+        data: h2,
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+            colorStops: [
+              {offset: 0, color: '#69c818'}, // 顶部颜色
+              // {offset: 1, color: 'rgba(234, 216, 18, 1)'}  // 底部颜色
+            ]
+          },
+        },
+        barWidth: '30%'
+      },
+      // {
+      //   name: `${Year1.value}合同待签`,
+      //   type: 'bar',
+      //   stack: 'Ad',
+      //   barGap: 0,
+      //   emphasis: {
+      //     focus: 'series'
+      //   },
+      //   // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
+      //   data: h3,
+      //   itemStyle: {
+      //     color: {
+      //       type: 'linear',
+      //       x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+      //       colorStops: [
+      //         {offset: 0, color: 'rgba(9, 173, 122, 1)'}, // 顶部颜色
+      //         // {offset: 1, color: 'rgba(77, 197, 243, 1)'}  // 底部颜色
+      //       ]
+      //     },
+      //   },
+      //   barWidth: '30%'
+      // },
+      {
+        name: `预提占比`,
+        type: 'line',
+        data: h3,
+        symbol:'circle',
+        symbolSize: 6,
+        yAxisIndex:1,
+        itemStyle: {
+          normal:{
+            color:'#F7CE10'
+          }
+        },
+      },
+
+      {
+        name: `${Year2.value}待收款`,
+        type: 'bar',
+        stack: 'Ad2',
+        barGap: 0,
         emphasis: {
           focus: 'series'
         },
-        // data: [120, 132,],
-        data: arr2,
+        // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
+        data: h4,
         itemStyle: {
           color: {
             type: 'linear',
             x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
             colorStops: [
-              {offset: 0, color: 'rgba(24, 124, 236, 1)'}, // 顶部颜色
-              // {offset: 1, color: 'rgba(148, 140, 252, 1)'}  // 底部颜色
-            ],
+              {offset: 0, color: '#2FA9FF'},
+              // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
+            ]
           },
         },
         barWidth: '30%'
       },
       {
-        name: '360天以上',
+        name: `${Year2.value}收费单待签`,
         type: 'bar',
-        stack: 'Ad',
-        barMaxWidth: 60, // 设置柱子的最大宽度为40px
-        
+        barGap: 0,
+        stack: 'Ad2',
         emphasis: {
           focus: 'series'
         },
-        // data: [220, 182,],
-        data: arr3,
+        // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
+        data: h5,
         itemStyle: {
           color: {
             type: 'linear',
             x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
             colorStops: [
-              {offset: 0, color: 'rgba(201, 19, 34, 1)'}, // 顶部颜色
-              // {offset: 1, color: 'rgba(176, 72, 119, 1)'}  // 底部颜色
-            ],
+              {offset: 0, color: '#187CEC'},
+              // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
+
+              // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
+              // {offset: 1, color: 'rgba(213, 0, 249, 1)'}
+
+              // {offset: 0, color: 'rgba(255, 215, 0, 0.8)'},
+              // {offset: 1, color: 'rgba(255, 255, 0, 0.6)'}
+            ]
           },
         },
         barWidth: '30%'
       },
+      // {
+      //   name: `${Year2.value}合同待签`,
+      //   type: 'bar',
+      //   stack: 'Ad2',
+      //   barGap: 0,
+      //   emphasis: {
+      //     focus: 'series'
+      //   },
+      //   // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
+      //   data: h6,
+      //   itemStyle: {
+      //     color: {
+      //       type: 'linear',
+      //       x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
+      //       colorStops: [
+      //         // {offset: 0, color: 'rgba(255, 87, 34, 0.8)'},
+      //         // {offset: 1, color: 'rgba(255, 138, 101, 0.6)'}
+      //         {offset: 0, color: 'rgba(2, 62, 218, 1)'},
+      //         // {offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
+      //       ]
+      //     },
+      //   },
+      //   barWidth: '30%'
+      // },
+      {
+        name: `同期预提占比`,
+        type: 'line',
+        data: h6,
+        symbol:'circle',
+        symbolSize: 6,
+        yAxisIndex:1,
+        itemStyle: {
+          normal:{
+            color:'#00B5A3'
+          }
+        },
+      },
     ]
   }
   chartC.setOption(option)
   // autoHover(chartC, option, 0, 2000)
 }
+
 const clear = () => {
   if (autoToolTip) {
     clearTimeout(autoToolTip);
@@ -1727,24 +2042,12 @@ onUnmounted(() => {
   font-weight: 600;
   color: #FFFFFF;
   //text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
-  background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  //background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
+  //-webkit-background-clip: text;
+  //-webkit-text-fill-color: transparent;
   padding: calc(12 * 100vw / 1920) calc(5 * 100vw / 1920) 0;
   font-size: calc(22 * 100vw / 1920);
   position: relative;
-  
-  &::after {
-    content: '';
-    width: 100%;
-    height: 100%;
-    background: url("@/assets/img/line2.png") no-repeat;
-    background-size: contain;
-    position: absolute;
-    top: calc(20 * 100vw / 1920);
-    left: 0;
-    animation: movelr 4s ease-in infinite;
-  }
 }
 
 @keyframes movelr {
@@ -1796,7 +2099,6 @@ onUnmounted(() => {
 .itemBox {
   width: 60%;
   background: #0B2239;
-  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: 1px solid #12BFFF;
   
@@ -1833,12 +2135,6 @@ onUnmounted(() => {
       //-webkit-text-fill-color: transparent
     }
     
-    :deep(.el-tag--info) {
-      background-color: rgb(33, 123, 188, .1); /* 背景色 */
-      border-color: #1c81a6; /* 边框色 */
-      color: #fff; /* 文字颜色 */
-    }
-    
     :deep(.el-icon ) {
       color: #fff;
     }
@@ -1873,4 +2169,87 @@ onUnmounted(() => {
   -webkit-text-fill-color: transparent;
   cursor: pointer;
 }
+
+.dark {
+  .chartCard {
+    background: url("@/assets/image/box01@2x.png") no-repeat top left;
+    background-size: 100% 100%;
+
+    .title {
+      background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
+      -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text;
+
+      &::after {
+        content: '';
+        width: 100%;
+        height: 100%;
+        background: url("@/assets/img/line2.png") no-repeat;
+        background-size: contain;
+        position: absolute;
+        top: calc(20 * 100vw / 1920);
+        left: 0;
+        animation: movelr 4s ease-in infinite;
+      }
+    }
+
+    .itemBox {
+      background: #0B2239;
+      border: 1px solid #12BFFF;
+      box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
+
+      .select {
+        :deep(.el-tag--info) {
+          background-color: rgb(33, 123, 188, .1); /* 背景色 */
+          border-color: #1c81a6; /* 边框色 */
+          color: #fff; /* 文字颜色 */
+        }
+
+        :deep(.el-icon ) {
+          color: #fff;
+        }
+
+        :deep(.el-select__placeholder) {
+          color: #fff;
+        }
+      }
+    }
+  }
+
+
+}
+
+.light {
+  .chartCard {
+    background: url("@/assets/image/box01-light.png") no-repeat top left;
+    background-size: 100% 100%;
+
+    .title {
+      color: #0060AA;
+    }
+
+    .itemBox {
+      background: transparent;
+      border: 1px solid #97D3FF;
+
+      .select {
+        :deep(.el-tag--info) {
+          border: 1px solid #97D3FF;
+          color: #0060AA;
+        }
+
+        :deep(.el-icon ) {
+          color: #0060AA;
+        }
+
+        :deep(.el-select__placeholder) {
+          color: #0060AA;
+        }
+      }
+    }
+  }
+
+
+
+}
 </style>

@@ -107,7 +107,7 @@ onUnmounted(() => {
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .scrolling-container {
   width: 100%;
   height: 100%;
@@ -124,7 +124,6 @@ onUnmounted(() => {
   font-family: SimHei, serif;
   font-weight: 400;
   font-size: calc(17 * 100vw / 1920);
-  color: #FFFFFF;
   height: calc(40 * 100vh / 1920);
   margin: calc(8 * 100vw / 1920) 0;
   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>