数据对接

@@ -97,6 +97,7 @@ import * as api from "@/apiPc/common"
 import {onMounted, ref} from 'vue'
 import {onMounted, ref} from 'vue'
 import {dayjs} from 'element-plus'
 import {dayjs} from 'element-plus'
 import {getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
 import {getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
+import {getLocalList} from "/@/apiPc/local";
 
 
 
 
 const dataItems = ref([]);
 const dataItems = ref([]);
@@ -178,7 +179,106 @@ async function handelGetYS003() {
 
 
 async function handelGetYS004() {
 async function handelGetYS004() {
   const res = await getYS004()
   const res = await getYS004()
-  handelZhu4(res.data.blockgroup[0], res.data.blockgroup[1])
+  console.log(res)
+  // let arrList = res.data.blockgroup
+  let arrList = [
+    {
+      BLOCK: '海上',
+      list: [
+        {
+          BASE: '上海',
+          DAYS: '6',
+          DSO: '20'
+        },
+        {
+          BASE: '浙江',
+          DAYS: '3',
+          DSO: '202'
+        },
+        {
+          BASE: '青岛',
+          DAYS: '61',
+          DSO: '230'
+        }
+      ]
+    },
+    {
+      BLOCK: '陆地',
+      list: [
+        {
+          BASE: '合肥',
+          DAYS: '61',
+          DSO: '20'
+        },
+        {
+          BASE: '北京',
+          DAYS: '33',
+          DSO: '202'
+        },
+        {
+          BASE: '河南',
+          DAYS: '61',
+          DSO: '230'
+        }
+      ]
+    }
+  ]
+  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
+  }))
+  let daluArr = dalu.list.map(v => ({
+    ...v,
+    type: 2
+  }))
+  
+  let arr = [...haishangArr, ...daluArr]
+  let listX = arr.map(v => v.BASE)
+  
+  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, 255, 190, 1)',
+    borderWidth: 1
+  }
+  
+  let dataList = arr.map(v => ({
+    value: v.DSO,
+    itemStyle: v.type == 2 ? styleItem1 : styleItem2,
+    name: v.type == 2 ? "陆地" : '海上'
+  }))
+  
+  let listHai = arr.map(v => v.type === 1 ? v.DSO : 0)
+  let listLu = arr.map(v => v.type === 2 ? v.DSO : 0)
+  
+  handelZhu4(listX, dataList)
 }
 }
 
 
 async function handelGetYS005() {
 async function handelGetYS005() {
@@ -856,26 +956,26 @@ const handelZhu3 = (row1, row2) => {
   chart33.setOption(option)
   chart33.setOption(option)
   autoHover(chart33, option, 0, 2000)
   autoHover(chart33, option, 0, 2000)
 }
 }
-const handelZhu4 = (row1, row2) => {
-  let name1 = row1.BLOCK
-  let name2 = row2.BLOCK
-
-  let x1 = row1.list.forEach(val => val.type = 1) || []
-  let x2 = row2.list.forEach(val => val.type = 2) || []
-  let list = [...x1, ...x2].map(val => val.BASE)
-  let listX = []
-  let listL = []
-  let listH = []
-  for (const val of list) {
-    listX.push(val.BASE)
-    if (val.type == 1) {
-      listL.push(val.DSO)
-      listH.push(0)
-    } else {
-      listL.push(0)
-      listH.push(val.DSO)
-    }
-  }
+const handelZhu4 = (listX, dataList) => {
+  // let name1 = row1.BLOCK
+  // let name2 = row2.BLOCK
+  // console.log(name1, name2)
+  // let x1 = row1.list.forEach(val => val.type = 1) || []
+  // let x2 = row2.list.forEach(val => val.type = 2) || []
+  // let list = [...x1, ...x2].map(val => val.BASE)
+  // let listX = []
+  // let listL = []
+  // let listH = []
+  // for (const val of list) {
+  //   listX.push(val.BASE)
+  //   if (val.type == 1) {
+  //     listL.push(val.DSO)
+  //     listH.push(0)
+  //   } else {
+  //     listL.push(0)
+  //     listH.push(val.DSO)
+  //   }
+  // }
   
   
   chart44 = echarts.init(zhuRef4.value)
   chart44 = echarts.init(zhuRef4.value)
   const option = {
   const option = {
@@ -928,14 +1028,14 @@ const handelZhu4 = (row1, row2) => {
     ],
     ],
     series: [
     series: [
       {
       {
-        name: name1,
+        name: '陆地',
         type: 'bar',
         type: 'bar',
         barGap: 0,
         barGap: 0,
         emphasis: {
         emphasis: {
           focus: 'series'
           focus: 'series'
         },
         },
         // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
         // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
-        data: listL,
+        data: dataList,
         itemStyle: {
         itemStyle: {
           color: {
           color: {
             type: 'linear',
             type: 'linear',
@@ -951,14 +1051,14 @@ const handelZhu4 = (row1, row2) => {
         barWidth: '30%',
         barWidth: '30%',
       },
       },
       {
       {
-        name: name2,
+        name: '海上',
         type: 'bar',
         type: 'bar',
         barGap: 0,
         barGap: 0,
         emphasis: {
         emphasis: {
           focus: 'series'
           focus: 'series'
         },
         },
         // data: [30, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
         // data: [30, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
-        data: listH,
+        // data: listHai,
         itemStyle: {
         itemStyle: {
           color: {
           color: {
             type: 'linear',
             type: 'linear',

@@ -22,8 +22,16 @@
             </el-select>
             </el-select>
           </div>
           </div>
           <div class="itemBox">
           <div class="itemBox">
-            <el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)" size="small">
-              <el-option label="数据因素(可多选)" value="month"/>
+            <el-select
+              v-model="type1"
+              class="select"
+              collapse-tags
+              multiple
+              placeholder="数据因素"
+              size="small"
+              @change="handelSelect1">
+              <el-option label="收入" value="1"/>
+              <el-option label="应收账款余额" value="2"/>
             </el-select>
             </el-select>
           </div>
           </div>
         </div>
         </div>
@@ -74,6 +82,7 @@ const radioB = ref('month')
 
 
 const type3 = ref('0')
 const type3 = ref('0')
 const type2 = ref([])
 const type2 = ref([])
+const type1 = ref(['1', '2'])
 
 
 const list = ref([])
 const list = ref([])
 
 
@@ -133,7 +142,6 @@ async function handelGetYS006() {
       s2.value[i2] += v2.LASTINCOME || 0;
       s2.value[i2] += v2.LASTINCOME || 0;
       s3.value[i2] += v2.LASTYSBALANCE || 0;
       s3.value[i2] += v2.LASTYSBALANCE || 0;
       s4.value[i2] += v2.YSBALANCE || 0;
       s4.value[i2] += v2.YSBALANCE || 0;
-      
     }
     }
   }
   }
   
   
@@ -159,10 +167,24 @@ async function handelGetYS006() {
   //
   //
   
   
   setA(set1.value)
   setA(set1.value)
-  setB(s1.value, s2.value, s3.value, s4.value)
+  setB(
+    type1.value.includes('1') ? s1.value : [],
+    type1.value.includes('1') ? s2.value : [],
+    type1.value.includes('2') ? s3.value : [],
+    type1.value.includes('2') ? s4.value : []
+  )
   setC(h1.value, h2.value, h3.value)
   setC(h1.value, h2.value, h3.value)
 }
 }
 
 
+function handelSelect1() {
+  setB(
+    type1.value.includes('1') ? s1.value : [],
+    type1.value.includes('1') ? s2.value : [],
+    type1.value.includes('2') ? s3.value : [],
+    type1.value.includes('2') ? s4.value : []
+  )
+}
+
 function handelSelect2() {
 function handelSelect2() {
   console.log(type2.value)
   console.log(type2.value)
   let arr = type2.value.map(val => list.value.find(item => item.BASE === val))
   let arr = type2.value.map(val => list.value.find(item => item.BASE === val))
@@ -175,7 +197,13 @@ function handelSelect2() {
       s4.value[i2] += v2.YSBALANCE || 0;
       s4.value[i2] += v2.YSBALANCE || 0;
     }
     }
   }
   }
-  setB(s1.value, s2.value, s3.value, s4.value)
+  
+  setB(
+    type1.value.includes('1') ? s1.value : [],
+    type1.value.includes('1') ? s2.value : [],
+    type1.value.includes('2') ? s3.value : [],
+    type1.value.includes('2') ? s4.value : []
+  )
 }
 }
 
 
 function handelSelect3() {
 function handelSelect3() {