看版

zhangmeng
Showing 3 changed files with 219 additions and 99 deletions
src/viewsPc/vip/centerPage.vue
src/viewsPc/vip/leftPage.vue
src/viewsPc/vip/rightPage.vue
--- a/src/viewsPc/vip/centerPage.vue
View file @bb19620
+++ b/src/viewsPc/vip/centerPage.vue
View file @bb19620
@@ -327,13 +327,12 @@ async function handelGetYS005() {
 function getdata() {
-  total = 0
+  clear()
-  api.getDegree().then(res => {
+  handelGetYS001()
-    list.value = res.data
+  handelGetYS002()
-    for (let n in list.value) {
+  handelGetYS003()
-      total = total + (list.value[n] || 0)
+  handelGetYS004()
-    }
+  handelGetYS005()
-  })
 }
 function handleResize() {
--- a/src/viewsPc/vip/leftPage.vue
View file @bb19620
+++ b/src/viewsPc/vip/leftPage.vue
View file @bb19620
@@ -42,7 +42,21 @@
    <div class="chartCard mt30">
      <div>
        <div class="title">应收账款余额组成</div>
-        <div class="po_right" style="justify-content: end;">
+        <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">
            <el-select
              v-model="type3"
@@ -67,6 +81,7 @@ import {autoToolTip} from "@/plugins/auto-toolTip";
 import * as echarts from "echarts";
 import * as api from "@/apiPc/common"
 import {getYS006} from '@/api/server.js'
+import {dayjs} from 'element-plus'
 const props = defineProps({
  url: {
@@ -86,12 +101,9 @@ const obj = computed(() => props.obj)
 const zhuRef = ref(null)
 const lineRef = ref(null)
 const payeeRef = ref(null)
-const kindList = ref([])
-const dataA = ref([])
-const radioA = ref('month')
-const radioB = ref('month')
 const type3 = ref('0')
+const type4 = ref(['1'])
 const type2 = ref([])
 const type1 = ref(['1', '2'])
@@ -111,7 +123,18 @@ const h1 = ref([])
 const h2 = ref([])
 const h3 = ref([])
+const h4 = ref([])
+const h5 = ref([])
+const h6 = ref([])
+const Year1 = dayjs().year() - 1
+const Year2 = dayjs().year()
+const legend1 = [`${Year1}待收款`, `${Year1}收费单待签`, `${Year1}合同待签`]
+const legend2 = [`${Year2}待收款`, `${Year2}收费单待签`, `${Year2}合同待签`]
+console.log(Year1, Year2)
 let chartA
 let chartB
 let chartC
@@ -141,6 +164,9 @@ async function handelGetYS006() {
  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) {
@@ -172,6 +198,13 @@ async function handelGetYS006() {
      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 = {...h3.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;
@@ -187,7 +220,20 @@ async function handelGetYS006() {
    type1.value.includes('2') ? s4.value : []
  )
  // h3.value = h3.value.map((item) => JSON.parse(item))
-  setC(h1.value, h2.value, h3.value)
+  // 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 : [],
+  )
+  console.log(2222222, h3.value)
+  console.log(33333333, h6.value)
 }
 function handelSelect1() {
@@ -228,6 +274,10 @@ 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)//收费单待签
@@ -241,6 +291,13 @@ function handelSelect3() {
        obj.value += monthData.HTDQ / 10000 || 0;
        obj.info += monthData.YSWELLINFO;
        h3.value[i] = {...obj}
+        h4.value[i] += v2.JNYSDSK / 10000 || 0
+        h5.value[i] += v2.JNSFDDQ / 10000 || 0
+        let obj2 = {...h3.value[i]}
+        obj2.value += v2.JNHTDQ / 10000 || 0;
+        obj2.info += v2.JNYSWELLINFO;
+        h6.value[i] = {...obj2}
      }
    }
    // h3.value = h3.value.map((item) => JSON.parse(item))
@@ -249,6 +306,9 @@ function handelSelect3() {
    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) {
      h1.value.push(val.YSDSK / 10000 || 0)//应待收款
@@ -257,53 +317,56 @@ function handelSelect3() {
        value: val.HTDQ / 10000 || 0,
        info: val.YSWELLINFO
      })//合同待签
+      h4.value.push(val.JNYSDSK / 10000 || 0)//应待收款
+      h5.value.push(val.JNSFDDQ / 10000 || 0)//收费单待签
+      let obj2 = {...h3.value[i]}
+      obj2.value += v2.JNHTDQ / 10000 || 0;
+      obj2.info += v2.JNYSWELLINFO;
+      h6.value[i] = {...obj2}
    }
  }
+  setC(
-  setC(h1.value, h2.value, h3.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 : [],
+    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) {
    handelGetYS006()
  }
-  intervalA = setInterval(getdata, 1000 * 60 * 60);
+  intervalA = setInterval(getdata(), 1000 * 60 * 60);
 }
 const getdata = () => {
  clear()
-  getAdata()
+  handelGetYS006()
-  getBdata()
-}
-const getAdata = () => {
-  api.getJieDai({type: radioA.value}).then(res => {
-    dataA.value = []
-    kindList.value = []
-    for (let n of res.data) {
-      if (n.count > 0) {
-        kindList.value.push(n.name)
-        dataA.value.push(n.count)
-      }
-    }
-    setA()
-  })
-}
-const getBdata = () => {
-  api.getJianSuo({type: radioB.value}).then(res => {
-    dataA.value = []
-    kindList.value = []
-    for (let n of res.data) {
-      if (n.count > 0) {
-        kindList.value.push(n.name)
-        dataA.value.push(n.count)
-      }
-    }
-    setB()
-  })
 }
 const setA = (arr, arr2, arr3) => {
@@ -528,7 +591,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
    ],
    series: [
      {
-        name: '2025年应收账款余额',
+        name: `${Year2}年应收账款余额`,
        type: 'bar',
        barGap: 0,
        emphasis: {
@@ -551,7 +614,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
        barWidth: '15%'
      },
      {
-        name: '2024年应收账款余额',
+        name: `${Year1}年应收账款余额`,
        type: 'bar',
        emphasis: {
          focus: 'series'
@@ -574,7 +637,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
        barWidth: '15%'
      },
      {
-        name: '2025年收入',
+        name: `${Year2}年收入`,
        type: 'bar',
        emphasis: {
          focus: 'series'
@@ -596,7 +659,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
        barWidth: '15%'
      },
      {
-        name: '2024年收入',
+        name: `${Year1}年收入`,
        type: 'bar',
        emphasis: {
          focus: 'series'
@@ -616,13 +679,14 @@ const setB = (arr1, arr2, arr3, arr4) => {
          borderWidth: 1
        },
        barWidth: '15%'
      },
    ]
  }
  chartB.setOption(option)
  autoHover(chartB, option, 0, 2000)
 }
-const setC = (h1, h2, h3) => {
+const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
  chartC = echarts.init(payeeRef.value)
  const option = {
    tooltip: {
@@ -652,13 +716,29 @@ const setC = (h1, h2, h3) => {
        `;
      }
    },
-    legend: {
+    legend: [
-      top: '10%',
+      {
-      textStyle: {
+        data: l1,
-        color: '#FFF'
+        left: 'center',
+        itemGap: 20,
+        top: '5%',
+        textStyle: {
+          color: '#FFF'
+        },
      },
-    },
+      {
+        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%',
@@ -704,9 +784,10 @@ const setC = (h1, h2, h3) => {
    ],
    series: [
      {
-        name: '待收款',
+        name: `${Year1}待收款`,
        type: 'bar',
        stack: 'Ad',
+        barGap: 0,
        emphasis: {
          focus: 'series'
        },
@@ -725,9 +806,10 @@ const setC = (h1, h2, h3) => {
        barWidth: '40%'
      },
      {
-        name: '收费单待签',
+        name: `${Year1}收费单待签`,
        type: 'bar',
        stack: 'Ad',
+        barGap: 0,
        emphasis: {
          focus: 'series'
        },
@@ -746,9 +828,10 @@ const setC = (h1, h2, h3) => {
        barWidth: '40%'
      },
      {
-        name: '合同待签',
+        name: `${Year1}合同待签`,
        type: 'bar',
        stack: 'Ad',
+        barGap: 0,
        emphasis: {
          focus: 'series'
        },
@@ -766,21 +849,87 @@ const setC = (h1, h2, h3) => {
        },
        barWidth: '40%'
      },
+      {
+        name: `${Year2}待收款`,
+        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: 'rgba(46, 125, 50, 1)'},
+              {offset: 1, color: 'rgba(76, 175, 80, 1)'}
+            ]
+          },
+        },
+        barWidth: '40%'
+      },
+      {
+        name: `${Year2}收费单待签`,
+        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: 'rgba(58, 123, 213, 1)'},
+              {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: '40%'
+      },
+      {
+        name: `${Year2}合同待签`,
+        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(138, 43, 226, 0.8)'},
+              {offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
+            ]
+          },
+        },
+        barWidth: '40%'
+      },
    ]
  }
  chartC.setOption(option)
  autoHover(chartC, option, 0, 2000)
 }
-const radioAChange = (e) => {
-  clear()
-  getAdata()
-}
-const radioBChange = (e) => {
-  clear()
-  getBdata()
-}
 const clear = () => {
  if (autoToolTip) {
--- a/src/viewsPc/vip/rightPage.vue
View file @bb19620
+++ b/src/viewsPc/vip/rightPage.vue
View file @bb19620
@@ -417,24 +417,10 @@ async function handelGetYS009() {
 }
 const getdata = () => {
-  getA()
+  handelGetYS007()
-  getB()
+  handelGetYS008()
+  handelGetYS009()
 }
-const getA = () => {
-  //定时更新
-  api.getJieYue({type: radioA.value}).then(res => {
-    dataA.value = []
-    kindList.value = []
-    for (let n of res.data) {
-      if (n.count > 0) {
-        kindList.value.push(n.name)
-        dataA.value.push(n.count)
-      }
-    }
-    setA()
-  })
-}
 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
  chartA = echarts.init(zhuRef.value)
@@ -619,20 +605,6 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
  chartA.setOption(option)
  autoHover(chartA, option, 0, 2000)
 }
-const getB = () => {
-  api.getJieShou().then(res => {
-    dataA.value = []
-    kindList.value = []
-    for (let n of res.data) {
-      if (n.count > 0) {
-        kindList.value.push(n.name)
-        dataA.value.push(n.count)
-      }
-    }
-    setB()
-  })
-}
 const setB = (arrY, arr1, arr2) => {
  chartB = echarts.init(lineRef.value)
  const option = {