看板

zhangmeng
Showing 4 changed files with 37 additions and 31 deletions
src/viewsPc/home.vue
src/viewsPc/vip/centerPage.vue
src/viewsPc/vip/leftPage.vue
src/viewsPc/vip/rightPage.vue
--- a/src/viewsPc/home.vue
View file @6b94d10
+++ b/src/viewsPc/home.vue
View file @6b94d10
 <template>
  <div class="main">
    <el-row class="w100">
-      <el-col v-if="obj.IFBASE" :span="type=='否'?8:12">
+      <el-col v-if="obj?.IFBASE" :span="type=='否'?8:12">
        <left-page :obj="obj" :type="type" :url="result"/>
      </el-col>
      <el-col v-if="type=='否'" :span="8">
        <center-page :obj="obj" :type="type=='否'" :url="result"/>
      </el-col>
-      <el-col v-if="obj.IFBASE" :span="type=='否'?8:12">
+      <el-col v-if="obj?.IFBASE" :span="type=='否'?8:12">
        <right-page :obj="obj" :type="type" :url="result"/>
      </el-col>
    </el-row>
  </div>
 </template>
@@ -45,7 +44,9 @@ onMounted(() => {
 async function handelGetYS000() {
  const res = await getYS000(result.value)
  type.value = res.data?.IFBASE || '否'
-  obj.value = res.data
+  obj.value = res.data || {
+    IFBASE: '123'
+  }
 }
--- a/src/viewsPc/vip/centerPage.vue
View file @6b94d10
+++ b/src/viewsPc/vip/centerPage.vue
View file @6b94d10
@@ -26,13 +26,13 @@
              <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
              营业收入
            </div>
-            <div ref="bing1" style="width: 100%;height:13vh;">
+            <div ref="bing1" style="width: 100%;height:13.3vh;">
            </div>
            <div class="bingBottom">
              <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>
            </div>
          </div>
-          <div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
+          <div ref="zhuRef1" class="zhu" style="width:70%;height: 17.3vh"/>
        </div>
        <hr>
@@ -44,7 +44,7 @@
              <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
              应收余额
            </div>
-            <div ref="bing2" style="width: 100%;height:13vh;">
+            <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>
@@ -52,7 +52,7 @@
              </div>
            </div>
          </div>
-          <div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
+          <div ref="zhuRef2" class="zhu" style="width:70%;height: 17.3vh"/>
        </div>
        <hr>
@@ -64,14 +64,14 @@
              <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
              现金余额
            </div>
-            <div ref="bing3" style="width: 100%;height:13vh;">
+            <div ref="bing3" 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>
          </div>
-          <div ref="zhuRef3" class="zhu" style="width:70%;height: 17vh"/>
+          <div ref="zhuRef3" class="zhu" style="width:70%;height: 17.3vh"/>
        </div>
        <hr>
      </div>
@@ -80,7 +80,7 @@
          <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span>
          DSO天数
        </div>
-        <div ref="zhuRef4" style="width: 100%;height: 17vh">
+        <div ref="zhuRef4" style="width: 100%;height: 17.3vh">
        </div>
      </div>
    </div>
--- a/src/viewsPc/vip/leftPage.vue
View file @6b94d10
+++ b/src/viewsPc/vip/leftPage.vue
View file @6b94d10
@@ -2,7 +2,7 @@
  <div class="pd20">
    <div class="chartCard">
      <div class="title">应收账款余额</div>
-      <div ref="zhuRef" style="width: 100%; height: 24.6vh;"></div>
+      <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
    </div>
    <div class="chartCard mt30">
@@ -25,6 +25,7 @@
            <el-select
              v-model="type1"
              class="select"
+              collapse-tags
              multiple
              placeholder="数据因素"
              size="small"
@@ -36,7 +37,7 @@
        </div>
      </div>
-      <div ref="lineRef" style="width: 100%; height: 24.6vh;"></div>
+      <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
    </div>
    <div class="chartCard mt30">
      <div>
@@ -55,7 +56,7 @@
          </div>
        </div>
      </div>
-      <div ref="payeeRef" style="width: 100%; height: 24.6vh;"></div>
+      <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
    </div>
  </div>
 </template>
@@ -852,7 +853,7 @@ onUnmounted(() => {
    right: calc(20 * 100vw / 1920);
    top: 3%;
    z-index: 1;
-    width: 70%;
+    width: 60%;
    display: flex;
    justify-content: space-between;
--- a/src/viewsPc/vip/rightPage.vue
View file @6b94d10
+++ b/src/viewsPc/vip/rightPage.vue
View file @6b94d10
@@ -17,7 +17,7 @@
        </div>
      </div>
-      <div ref="zhuRef" style="width: 100%; height: 24.6vh;"></div>
+      <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
    </div>
    <div class="chartCard mt30">
@@ -49,12 +49,12 @@
          </el-select>
        </div>
      </div>
-      <div ref="lineRef" style="width: 100%; height: 24.6vh;"></div>
+      <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
    </div>
    <div class="chartCard mt30">
      <div class="title">逾期360天以上未开票</div>
-      <div ref="overdueRef" style="width: 100%; height: 24.6vh;"></div>
+      <div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
    </div>
  </div>
 </template>
@@ -452,7 +452,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
      textStyle: {
        color: '#fff',        // 文字颜色
        fontSize: 12,         // 文字大小
-      }
+      },
    },
    legend: {
      top: "3%",
@@ -612,6 +612,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
    ],
  }
  chartA.setOption(option)
  autoHover(chartA, option, 0, 2000)
 }
@@ -835,10 +836,10 @@ const setC = (arry, arr1, arr2, arr3) => {
  chartC = echarts.init(overdueRef.value)
  const option = {
    tooltip: {
-      trigger: 'axis',
+      // trigger: '',
-      axisPointer: {
+      // axisPointer: {
-        type: 'shadow'
+      //   type: 'shadow'
-      },
+      // },
      valueFormatter: (value) => value + '万',
      backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
      borderColor: 'rgba(46, 151, 198, 1)',    // 边框颜色
@@ -846,6 +847,16 @@ const setC = (arry, arr1, arr2, arr3) => {
      textStyle: {
        color: '#fff',        // 文字颜色
        fontSize: 12,         // 文字大小
+      },
+      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>
+        `;
      }
    },
    legend: {
@@ -963,13 +974,6 @@ const setC = (arry, arr1, arr2, arr3) => {
  chartC.setOption(option)
  autoHover(chartC, option, 0, 2000)
 }
-const radioAChange = (e) => {
-  getA()
-}
-const radioBChange = (e) => {
-  getB()
-}
 const clear = () => {
  if (autoToolTip) {
    clearTimeout(autoToolTip);
@@ -1047,7 +1051,7 @@ onUnmounted(() => {
    position: absolute;
    right: calc(20 * 100vw / 1920);
    top: 3%;
-    width: 50%;
+    width: 60%;
    z-index: 1;
    display: flex;
    justify-content: space-between;