数据对接

zhangmeng
Showing 1 changed file with 162 additions and 81 deletions
src/viewsPc/vip/leftPage.vue
--- a/src/viewsPc/vip/leftPage.vue
View file @9a56dbd
+++ b/src/viewsPc/vip/leftPage.vue
View file @9a56dbd
@@ -4,17 +4,21 @@
      <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="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
+            <el-select
-              <el-option label="全部基地1" value="1"/>
+              v-model="type2"
-              <el-option label="全部基地2" value="2"/>
+              class="select"
-              <el-option label="全部基地3" value="3"/>
+              collapse-tags
-              <el-option label="全部基地4" value="4"/>
+              multiple
+              placeholder="全部基地"
+              size="small"
+              @change="handelSelect2">
+              <el-option v-for="val in list" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
            </el-select>
          </div>
          <div class="itemBox">
@@ -24,7 +28,7 @@
          </div>
        </div>
      </div>
      <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
    </div>
    <div class="chartCard mt30">
@@ -32,34 +36,18 @@
        <div class="title">应收账款余额组成</div>
        <div class="po_right" style="justify-content: end;">
          <div class="itemBox">
-            <el-select v-model="queryParams.select" class="select" placeholder="全部基地" size="small">
+            <el-select
-              <el-option label="全部基地1" value="1"/>
+              v-model="type3"
-              <el-option label="全部基地2" value="2"/>
+              class="select"
-              <el-option label="全部基地3" value="3"/>
+              placeholder="全部基地"
-              <el-option label="全部基地4" value="4"/>
+              size="small"
+              @change="handelSelect3">
+              <el-option label="全部" value="0"/>
+              <el-option v-for="val in list" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
            </el-select>
          </div>
        </div>
-        <!--        <div class="title">-->
-        <!--          <el-select>-->
-        <!--            <el-option label="全部基地(可多选)" value="month"/>-->
-        <!--          </el-select>-->
-        <!--        </div>-->
-        <!--        <div class="title">-->
-        <!--          <el-select>-->
-        <!--            <el-option label="数据因素(可多选)" value="month"/>-->
-        <!--          </el-select>-->
-        <!--        </div>-->
      </div>
-      <!--      <div class="po_right">-->
-      <!--        <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
-      <!--          <el-radio-button label="本月" value="month"/>-->
-      <!--          <el-radio-button label="本季度" value="quarter"/>-->
-      <!--          <el-radio-button label="本年" value="year"/>-->
-      <!--        </el-radio-group>-->
-      <!--      </div>-->
      <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
    </div>
  </div>
@@ -72,7 +60,6 @@ import * as echarts from "echarts";
 import * as api from "@/apiPc/common"
 import {getYS006} from '@/api/server.js'
 const queryParams = ref({
  select: null,
  select2: null
@@ -85,17 +72,24 @@ const dataA = ref([])
 const radioA = ref('month')
 const radioB = ref('month')
+const type3 = ref('0')
+const type2 = ref([])
 const list = ref([])
 const set1 = ref([])
-const arr1 = ref([])
-const arr2 = ref([])
+const s1 = ref([])
-const arr3 = ref([])
+const s2 = ref([])
-const arr4 = ref([])
+const s3 = ref([])
+const s4 = ref([])
 const h1 = ref([])
 const h2 = ref([])
 const h3 = ref([])
 let chartA
 let chartB
 let chartC
@@ -107,7 +101,7 @@ onMounted(() => {
  window.addEventListener('resize', handleResize);
  handelGetYS006()
  // setA()
-  setB()
+  // setB()
  // setC()
 })
@@ -115,34 +109,108 @@ async function handelGetYS006() {
  const res = await getYS006()
  list.value = res.data.baselist
  set1.value = []
-  arr1.value = []
+  s1.value = new Array(12).fill(0)
-  arr2.value = []
+  s2.value = new Array(12).fill(0)
-  arr3.value = []
+  s3.value = new Array(12).fill(0)
-  arr4.value = []
+  s4.value = new Array(12).fill(0)
-  h1.value = []
-  h2.value = []
+  h1.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
-  h3.value = []
+  h2.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
-  for (const val of list.value) {
+  h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
+  type2.value = []
+  for (const v1 of list.value) {
    set1.value.push({
-      value: val.TOTAL,
+      value: v1.TOTAL,
-      name: val.BASE
+      name: v1.BASE
    })
-    arr1.value.push(val.YSBALANCE)
+    type2.value.push(v1.BASE)
-    arr2.value.push(val.LASTTOTAL)
+    for (const v2 of v1.list) {
-    arr3.value.push(val.TOTAL)
+      const i2 = v2.MONTH - 1; // 转为 0~11 的索引
-    arr4.value.push(val.LASTTOTAL)
+      h1.value[i2] += v2.YSDSK || 0;
-    h1.value.push(val.YSDSK)
+      h2.value[i2] += v2.SFDDQ || 0;
-    h2.value.push(val.SFDDQ)
+      h3.value[i2] += v2.HTDQ || 0;
-    h3.value.push(val.HTDQ)
+      s1.value[i2] += v2.INCOME || 0;
+      s2.value[i2] += v2.LASTINCOME || 0;
+      s3.value[i2] += v2.LASTYSBALANCE || 0;
+      s4.value[i2] += v2.YSBALANCE || 0;
+    }
  }
+  // for (const val of list.value) {
+  //   listY3.value.push(val.BASE)
+  //   set1.value.push({
+  //     value: val.TOTAL,
+  //     name: val.BASE
+  //   })
+  //   arr2.value.push(val.LASTTOTAL)
+  //   arr3.value.push(val.TOTAL)
+  //   arr4.value.push(val.LASTTOTAL)
+  //
+  //   h1.value.push(val.YSDSK)//应代收款
+  //   h2.value.push(val.SFDDQ)//收费单待签
+  //   h3.value.push(val.HTDQ)//合同待签
+  //
+  //   s1.push(val.INCOME)//今年收入
+  //   s2.push(val.LASTINCOME)//去年收入
+  //   s3.push(val.LASTYSBALANCE)//去年应收账款余额
+  //   s4.push(val.YSBALANCE)//去年收入
+  // }
+  //
+  setA(set1.value)
+  setB(s1.value, s2.value, s3.value, s4.value)
+  setC(h1.value, h2.value, h3.value)
+}
+function handelSelect2() {
+  console.log(type2.value)
+  let arr = type2.value.map(val => list.value.find(item => item.BASE === val))
+  for (const v1 of arr) {
+    for (const v2 of v1.list) {
+      const i2 = v2.MONTH - 1; // 转为 0~11 的索引
+      s1.value[i2] += v2.INCOME || 0;
+      s2.value[i2] += v2.LASTINCOME || 0;
+      s3.value[i2] += v2.LASTYSBALANCE || 0;
+      s4.value[i2] += v2.YSBALANCE || 0;
+    }
+  }
+  setB(s1.value, s2.value, s3.value, s4.value)
+}
-  setA(set1.value)
+function handelSelect3() {
+  console.log(type3.value)
+  h1.value = []
+  h2.value = []
+  h3.value = []
+  if (type3.value == '0') {
+    //   h1.value.push(val.YSDSK)//应代收款
+    //   h2.value.push(val.SFDDQ)//收费单待签
+    //   h3.value.push(val.HTDQ)//合同待签
+    h1.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
+    h2.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
+    h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
+    for (const department of list.value) {
+      for (const monthData of department.list) {
+        const monthIndex = monthData.MONTH - 1; // 转为 0~11 的索引
+        h1.value[monthIndex] += monthData.YSDSK || 0;
+        h2.value[monthIndex] += monthData.SFDDQ || 0;
+        h3.value[monthIndex] += monthData.HTDQ || 0;
+      }
+    }
+  } else {
+    // 找到对应的数据
+    let obj = list.value.find(item => item.BASE === type3.value)
+    for (const val of obj.list) {
+      h1.value.push(val.YSDSK)//应代收款
+      h2.value.push(val.SFDDQ)//收费单待签
+      h3.value.push(val.HTDQ)//合同待签
+    }
+  }
  setC(h1.value, h2.value, h3.value)
-  // resYear1.value = res.data.yeargroup
-  // handelBing1(res.data.yeargroup[0], res.data.yeargroup[1])
-  // handelZhu1(res.data.yeargroup[0], res.data.yeargroup[1])
-  // activeName1.value = res.data.yeargroup[1].YEAR
 }
@@ -203,7 +271,7 @@ const setA = (arr) => {
      },
      formatter: function (name) {
        let value = 0
-        for (let i = 0; i < option.series[2].data.length; i++) {
+        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;
            break;
@@ -244,7 +312,7 @@ const setA = (arr) => {
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: {
          scale: false
@@ -305,8 +373,7 @@ const setA = (arr) => {
  chartA.setOption(option)
  autoHover(chartA, option, 2, 2000)
 }
+const setB = (arr1, arr2, arr3, arr4) => {
-const setB = () => {
  chartB = echarts.init(lineRef.value)
  const option = {
    tooltip: {
@@ -339,7 +406,7 @@ const setB = () => {
            type: 'solid'
          }
        },
      },
    ],
    yAxis: [
@@ -358,7 +425,7 @@ const setB = () => {
          }
        },
      }
    ],
    series: [
      {
@@ -368,7 +435,8 @@ const setB = () => {
        emphasis: {
          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: arr4,
        itemStyle: {
          color: {
            type: 'linear',
@@ -389,7 +457,8 @@ const setB = () => {
        emphasis: {
          focus: 'series'
        },
-        data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
+        // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
+        data: arr3,
        itemStyle: {
          color: {
            type: 'linear',
@@ -410,7 +479,8 @@ const setB = () => {
        emphasis: {
          focus: 'series'
        },
-        data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
+        // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
+        data: arr1,
        itemStyle: {
          color: {
            type: 'linear',
@@ -431,7 +501,8 @@ const setB = () => {
        emphasis: {
          focus: 'series'
        },
-        data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
+        // data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
+        data: arr2,
        itemStyle: {
          color: {
            type: 'linear',
@@ -629,7 +700,7 @@ onUnmounted(() => {
  padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
  font-size: calc(20 * 100vw / 1920);
  position: relative;
  &::after {
    content: '';
    width: 100%;
@@ -659,7 +730,7 @@ onUnmounted(() => {
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  .po_right {
    position: absolute;
    right: calc(20 * 100vw / 1920);
@@ -668,53 +739,53 @@ onUnmounted(() => {
    width: 50%;
    display: flex;
    justify-content: space-between;
    :deep(.el-radio-button) {
      --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
      --el-radio-button-checked-text-color: #fff;
      --el-radio-button-disabled-checked-fill: #03DAFD;
      --el-radio-button-checked-border-color: #0D599A;
      .el-radio-button__inner {
        color: #7ECEF4;
        background: transparent;
        border-color: #0D599A;
      }
      .el-radio-button__original-radio:checked + .el-radio-button__inner {
        color: #fff;
        background: linear-gradient(0deg, #2C67B7, #40A5F4);
      }
    }
  }
  .itemBox {
    width: 45%;
    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;
      :deep(.el-select__wrapper) {
        background-color: transparent;
        box-shadow: 0 0 0 0;
        border: none;
      }
      /* 选项样式 */
      :deep(.el-select-dropdown__item) {
        color: white !important;
        background-color: transparent !important;
      }
      /* 鼠标悬停效果 */
      :deep(.el-select-dropdown__item.hover) {
        background-color: rgba(255, 255, 255, 0.1) !important;
      }
      /* placeholder */
      :deep(.el-select__placeholder) {
        font-family: PingFang SC, serif;
@@ -725,13 +796,23 @@ onUnmounted(() => {
        -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;
+      }
    }
  }
 }
 .downDot {
  position: relative;
  &::after {
    content: '';
    width: calc(6 * 100vw / 1920);