数据对接

zhangmeng
Showing 2 changed files with 196 additions and 68 deletions
src/viewsPc/vip/centerPage.vue
src/viewsPc/vip/leftPage.vue
--- a/src/viewsPc/vip/centerPage.vue
View file @8aaa76f
+++ b/src/viewsPc/vip/centerPage.vue
View file @8aaa76f
@@ -17,7 +17,7 @@
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="father dong">
        <div style="display: flex">
@@ -35,7 +35,7 @@
          </div>
          <div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
        </div>
        <hr>
      </div>
      <div class="father">
@@ -54,7 +54,7 @@
          </div>
          <div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
        </div>
        <hr>
      </div>
      <div class="father">
@@ -97,6 +97,7 @@ import * as api from "@/apiPc/common"
 import {onMounted, ref} from 'vue'
 import {dayjs} from 'element-plus'
 import {getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
+import {getLocalList} from "/@/apiPc/local";
 const dataItems = ref([]);
@@ -148,7 +149,7 @@ onMounted(() => {
  // handelBing3()
  // handelZhu3()
  // handelZhu4()
 })
 async function handelGetYS001() {
@@ -178,7 +179,106 @@ async function handelGetYS003() {
 async function handelGetYS004() {
  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() {
@@ -219,7 +319,7 @@ const handelBing1 = (arr1, arr2) => {
    tooltip: {
      trigger: ''
    },
    series: [
      {
        name: '',
@@ -229,7 +329,7 @@ const handelBing1 = (arr1, arr2) => {
        label: {
          show: false
        },
        emphasis: {
          scale: false
        },
@@ -319,7 +419,7 @@ const handelBing1 = (arr1, arr2) => {
      }
    ]
  }
  chart1.setOption(option)
  autoHover(chart1, option, 3, 2000)
 }
@@ -329,7 +429,7 @@ const handelBing2 = (row1, row2) => {
    tooltip: {
      trigger: ''
    },
    series: [
      {
        name: '1',
@@ -408,7 +508,7 @@ const handelBing2 = (row1, row2) => {
      },
    ]
  }
  chart2.setOption(option)
  autoHover(chart2, option, 2, 2000)
 }
@@ -418,7 +518,7 @@ const handelBing3 = (row1, row2) => {
    tooltip: {
      trigger: ''
    },
    series: [
      {
        name: '1',
@@ -508,7 +608,7 @@ const handelBing3 = (row1, row2) => {
      },
    ]
  }
  chart3.setOption(option)
  autoHover(chart3, option, 0, 2000)
 }
@@ -856,27 +956,27 @@ const handelZhu3 = (row1, row2) => {
  chart33.setOption(option)
  autoHover(chart33, option, 0, 2000)
 }
-const handelZhu4 = (row1, row2) => {
+const handelZhu4 = (listX, dataList) => {
-  let name1 = row1.BLOCK
+  // let name1 = row1.BLOCK
-  let name2 = row2.BLOCK
+  // let name2 = row2.BLOCK
+  // console.log(name1, name2)
-  let x1 = row1.list.forEach(val => val.type = 1) || []
+  // let x1 = row1.list.forEach(val => val.type = 1) || []
-  let x2 = row2.list.forEach(val => val.type = 2) || []
+  // let x2 = row2.list.forEach(val => val.type = 2) || []
-  let list = [...x1, ...x2].map(val => val.BASE)
+  // let list = [...x1, ...x2].map(val => val.BASE)
-  let listX = []
+  // let listX = []
-  let listL = []
+  // let listL = []
-  let listH = []
+  // let listH = []
-  for (const val of list) {
+  // for (const val of list) {
-    listX.push(val.BASE)
+  //   listX.push(val.BASE)
-    if (val.type == 1) {
+  //   if (val.type == 1) {
-      listL.push(val.DSO)
+  //     listL.push(val.DSO)
-      listH.push(0)
+  //     listH.push(0)
-    } else {
+  //   } else {
-      listL.push(0)
+  //     listL.push(0)
-      listH.push(val.DSO)
+  //     listH.push(val.DSO)
-    }
+  //   }
-  }
+  // }
  chart44 = echarts.init(zhuRef4.value)
  const option = {
    tooltip: {
@@ -928,14 +1028,14 @@ const handelZhu4 = (row1, row2) => {
    ],
    series: [
      {
-        name: name1,
+        name: '陆地',
        type: 'bar',
        barGap: 0,
        emphasis: {
          focus: 'series'
        },
        // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
-        data: listL,
+        data: dataList,
        itemStyle: {
          color: {
            type: 'linear',
@@ -951,14 +1051,14 @@ const handelZhu4 = (row1, row2) => {
        barWidth: '30%',
      },
      {
-        name: name2,
+        name: '海上',
        type: 'bar',
        barGap: 0,
        emphasis: {
          focus: 'series'
        },
        // data: [30, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
-        data: listH,
+        // data: listHai,
        itemStyle: {
          color: {
            type: 'linear',
@@ -996,10 +1096,10 @@ function autoHover(myChart, option, index, time) {
 .center {
  width: 100%;
  .father {
    position: relative;
    .tex4 {
      position: absolute;
      font-family: PingFang SC, serif;
@@ -1012,7 +1112,7 @@ function autoHover(myChart, option, index, time) {
      -webkit-text-fill-color: transparent;
      display: flex;
      margin-top: calc(5 * 100vw / 1920);
      .titleImg {
        display: block;
        width: calc(50 * 100vw / 1920);
@@ -1020,10 +1120,10 @@ function autoHover(myChart, option, index, time) {
      }
    }
  }
  .dong {
    position: relative;
    &::after {
      content: '';
      width: 40%;
@@ -1036,7 +1136,7 @@ function autoHover(myChart, option, index, time) {
      animation: movelr 4s ease-in infinite;
    }
  }
  .top {
    padding-top: calc(20 * 100vw / 1920);
    display: flex;
@@ -1044,14 +1144,14 @@ function autoHover(myChart, option, index, time) {
    align-items: center;
    position: relative;
    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);
      .titleTop {
        text-align: center;
        font-family: PingFang SC, serif;
@@ -1063,7 +1163,7 @@ function autoHover(myChart, option, index, time) {
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .titleCenter {
        //text-align: center;
        padding-left: calc(21 * 100vw / 1920);
@@ -1072,30 +1172,30 @@ function autoHover(myChart, option, index, time) {
        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(13 * 100vw / 1920) calc(35 * 100vw / 1920);
      .rTop {
        display: flex;
        justify-content: space-between;
@@ -1107,13 +1207,13 @@ function autoHover(myChart, option, index, time) {
        background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        .rTop-img {
          width: calc(30 * 100vw / 1920);
          height: calc(24 * 100vh / 1920);
        }
      }
      .rBotton {
        height: calc(130 * 100vh / 1920);
        //overflow-y: scroll;
@@ -1124,7 +1224,7 @@ function autoHover(myChart, option, index, time) {
          color: #FFFFFF;
          height: calc(40 * 100vh / 1920);
          margin: calc(8 * 100vw / 1920) 0;
          span {
            display: inline-block;
            width: calc(12 * 100vw / 1920);
@@ -1138,7 +1238,7 @@ function autoHover(myChart, option, index, time) {
      }
    }
  }
  .bottom {
    background: url("@/assets/image/box04@2x.png") no-repeat center;
    background-size: 100% 100%;
@@ -1146,11 +1246,11 @@ function autoHover(myChart, option, index, time) {
    padding: calc(10 * 100vw / 1920);
    position: relative;
    overflow: hidden;
    .bing {
      text-align: center;
      .bingTitle {
        font-family: PingFang SC, serif;
        font-weight: 500;
@@ -1162,21 +1262,21 @@ function autoHover(myChart, option, index, time) {
        -webkit-text-fill-color: transparent;
        display: flex;
        margin-top: calc(10 * 100vw / 1920);
        .titleImg {
          display: block;
          width: calc(50 * 100vw / 1920);
          height: calc(20 * 100vw / 1920);
        }
      }
      .bingBottom {
        position: absolute;
        z-index: 9;
        bottom: 4%;
        left: 0;
        width: 30%;
        div {
          font-family: PingFang SC;
          font-weight: 400;
--- a/src/viewsPc/vip/leftPage.vue
View file @8aaa76f
+++ b/src/viewsPc/vip/leftPage.vue
View file @8aaa76f
@@ -22,8 +22,16 @@
            </el-select>
          </div>
          <div class="itemBox">
-            <el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)" size="small">
+            <el-select
-              <el-option label="数据因素(可多选)" value="month"/>
+              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>
          </div>
        </div>
@@ -74,6 +82,7 @@ const radioB = ref('month')
 const type3 = ref('0')
 const type2 = ref([])
+const type1 = ref(['1', '2'])
 const list = ref([])
@@ -133,7 +142,6 @@ async function handelGetYS006() {
      s2.value[i2] += v2.LASTINCOME || 0;
      s3.value[i2] += v2.LASTYSBALANCE || 0;
      s4.value[i2] += v2.YSBALANCE || 0;
    }
  }
@@ -159,10 +167,24 @@ async function handelGetYS006() {
  //
  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)
 }
+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() {
  console.log(type2.value)
  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;
    }
  }
-  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() {