daping quan

zrj
Showing 6 changed files with 119 additions and 61 deletions
src/viewsPc/home.vue
src/viewsPc/vip/centerPage.vue
src/viewsPc/vip/components/information.vue
src/viewsPc/vip/leftPage.vue
src/viewsPc/vip/rightPage.vue
src/viewsPc/vip/scrollingData.vue
--- a/src/viewsPc/home.vue
View file @6a8890c
+++ b/src/viewsPc/home.vue
View file @6a8890c
 <template>
  <div class="main">
+<!--    <div style="position: absolute;top: 23px;right: 20px">-->
+<!--        <el-date-picker-->
+<!--          v-model="nowDate"-->
+<!--          type="date"-->
+<!--          placeholder="Pick a day"-->
+<!--          :size="size"-->
+<!--      ></el-date-picker>-->
+<!--    </div>-->
    <el-row class="w100">
      <el-col v-if="obj.IFBASE" :span="8">
-        <left-page :obj="obj" :type="type" :url="result"/>
+        <left-page :obj="obj" :type="type=='否'" :url="result"/>
      </el-col>
      <el-col v-if="obj.IFBASE" :span="8">
        <center-page :obj="obj" :isLeader="isLeader" :type="type=='否'" :url="result"/>
      </el-col>
      <el-col v-if="obj.IFBASE" :span="8">
-        <right-page :obj="obj" :type="type" :url="result"/>
+        <right-page :obj="obj" :type="type=='否'" :url="result"/>
      </el-col>
    </el-row>
  </div>
@@ -28,9 +36,10 @@ const url = ref()
 const obj = ref({})
 const result = ref()
 const router = useRouter()
+const nowDate = new Date()
 let isLeader = ref(false)
-url.value = 'http://192.168.1.152:8899/login/sid=3e6ac454-6d9a-4f37-a593-d06c65703792#/'
+// url.value = 'http://192.168.1.152:8899/login/sid=a5d48b77-0da4-4008-aa1c-f7f0ed575413#/'
-// url.value = window.location.href
+url.value = window.location.href
 result.value = url.value?.split('=')[1]?.split('#')[0];
 function validateEmail(email) {
@@ -44,6 +53,7 @@ onMounted(() => {
  if (result.value) {
    handelGetYS000()
    isLeader.value = validateEmail(result.value)
+    console.log(isLeader.value)
  } else {
    // result.value = 'a3afc265-1e60-4376-bcfb-6ca124db8704'
    // handelGetYS000()
@@ -62,4 +72,25 @@ async function handelGetYS000() {
 </script>
 <style lang="scss" scoped>
+::v-deep .el-date-editor .el-input__inner {
+  background-color: transparent !important;
+  border-color: #80ffff;
+  box-shadow: none;
+  height: 30px;
+  color: #fff;
+}
+::v-deep .el-input__wrapper {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+/* 隐藏默认图标 */
+::v-deep .el-date-editor .el-input__prefix {
+  display: none;
+}
+/* 强制右侧显示图标 */
+::v-deep .el-date-editor .el-input__suffix {
+  right: 10px !important;
+}
 </style>
--- a/src/viewsPc/vip/centerPage.vue
View file @6a8890c
+++ b/src/viewsPc/vip/centerPage.vue
View file @6a8890c
--- a/src/viewsPc/vip/components/information.vue
View file @6a8890c
+++ b/src/viewsPc/vip/components/information.vue
View file @6a8890c
@@ -7,7 +7,7 @@
    width="33%"
  >
    <div class="son">
-      <div style="color: #fff;font-size: 15px">填写日期:  {{myDate}}</div>
+      <div style="font-family: SimHei, serif;font-weight: 400;font-size: 20px;color: #FFFFFF;">更新日期:  {{myDate}}</div>
      <p v-for="val in list" :key="val" class="row">
        <span></span> {{ val }}
      </p>
--- a/src/viewsPc/vip/leftPage.vue
View file @6a8890c
+++ b/src/viewsPc/vip/leftPage.vue
View file @6a8890c
@@ -105,7 +105,7 @@ const lineRef = ref(null)
 const payeeRef = ref(null)
 const type3 = ref('0')
-const type4 = ref(['1'])
+const type4 = ref(['1','2'])
 const type2 = ref([])
 const type1 = ref(['1', '2'])
@@ -181,7 +181,7 @@ async function handelGetYS006() {
      set2.value.push({
        value: v1.TOTAL,
        name: v1.BASEJC,
-        type: v1.BLOCK
+        type: v1.BLOCK,
      })
    } else {
      set3.value.push({
@@ -221,6 +221,16 @@ async function handelGetYS006() {
  set3.value.sort((a,b)=>{
    return b.value - a.value
  })
+  let colorList = ['#A4E6FF', '#6ED8FF', '#2FA9FF', '#187CEC', '#0142DA']
+  set2.value.forEach((n,index) => {
+    n.itemStyle = {borderColor: colorList[index], borderWidth: 2}
+  })
+  let colorList2 = ['#FEFFD3', '#FFF59C', '#F7E20F', '#F7CE10', '#D29F05']
+  set3.value.forEach((n,index) => {
+    n.itemStyle = {borderColor: colorList2[index], borderWidth: 2}
+  })
  setA(set1.value, set2.value, set3.value)
  setB(
@@ -241,7 +251,7 @@ async function handelGetYS006() {
    type4.value.includes('1') ? legend1 : [],
    type4.value.includes('2') ? legend2 : [],
  )
  console.log(2222222, h3.value)
  console.log(33333333, h6.value)
 }
@@ -401,9 +411,9 @@ const setA = (arr, arr2, arr3) => {
        orient: 'vertical',
        data: arr2,
        right: '5%',
-        top: '12%',
+        top: 20,
-        bottom: 20,
+        bottom: '25%',
-        itemGap:5,
+        itemGap:10,
        textStyle: {
          color: '#FFF',
          rich: {
@@ -414,7 +424,7 @@ const setA = (arr, arr2, arr3) => {
              width:40,
            },
            b:{
-              float:'right',
+              align:'right',
              fontSize: 12,
              lineHeight: 12,
              width:40,
@@ -426,7 +436,7 @@ const setA = (arr, arr2, arr3) => {
              width:40,
            },
            d:{
-              float:'right',
+              align:'right',
              fontSize: 12,
              lineHeight: 22,
              width:40,
@@ -463,9 +473,9 @@ const setA = (arr, arr2, arr3) => {
        orient: 'vertical',
        data: arr3,
        right: '30%',
-        top: '12%',
+        top: 20,
-        bottom: 20,
+        bottom: '25%',
-        itemGap:5,
+        itemGap:10,
        textStyle: {
          color: '#FFF',
          rich: {
@@ -476,7 +486,7 @@ const setA = (arr, arr2, arr3) => {
              width:40,
            },
            b:{
-              float:'right',
+              align:'right',
              fontSize: 12,
              lineHeight: 12,
              width:40,
@@ -488,7 +498,7 @@ const setA = (arr, arr2, arr3) => {
              width:40,
            },
            d:{
-              float:'right',
+              align:'right',
              fontSize: 12,
              lineHeight: 22,
              width:40,
@@ -525,19 +535,19 @@ const setA = (arr, arr2, arr3) => {
    graphic: {
      elements: [{
        type: 'text',
-        bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
+        top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
-        right: '33%',
+        right: '31%',
        style: {
-          text: '陆地：' + sumPercent2+'%', // 这里可以计算合计值并显示
+          text: '陆地：          ' + sumPercent2+'%', // 这里可以计算合计值并显示
          fill: '#fff', // 文本颜色
          fontSize: 12, // 文本大小
        },
      },{
        type: 'text',
-        bottom: '15%', // 可以调整位置，例如使用 'bottom' 来定位到图例下方
+        top: 157, // 可以调整位置，例如使用 'bottom' 来定位到图例下方
-        right: '8%',
+        right: '6%',
        style: {
-          text: '海上：' + sumPercent1+'%', // 这里可以计算合计值并显示
+          text: '海上：          ' + sumPercent1+'%', // 这里可以计算合计值并显示
          fill: '#fff', // 文本颜色
          fontSize: 12, // 文本大小
        }
@@ -591,8 +601,6 @@ const setA = (arr, arr2, arr3) => {
        radius: ['30%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
-          borderWidth: 2,
-          borderColor: 'rgba(255,0,0,0.05)',
          color: function (params) {
            // 自定义颜色
            let colorList = [
@@ -611,7 +619,7 @@ const setA = (arr, arr2, arr3) => {
            show: false,
            fontSize: 20,
            fontWeight: 'bold'
-          }
+          },
        },
        labelLine: {
          show: false
@@ -674,7 +682,12 @@ const setB = (arr1, arr2, arr3, arr4) => {
            type: 'solid'
          }
        },
+        axisLabel: {
+          formatter: function(value, index) {
+            // 只显示奇数索引的标签(从0开始计数)
+            return index % 2 === 0 ? value : '';
+          }
+        }
      },
    ],
    yAxis: [
@@ -827,6 +840,18 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
          ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
          </div>
        `;
+      },
+      extraCssText: `
+    max-height: 150px;
+    overflow: auto !important;
+    padding-right: 10px; /* 为滚动条留出空间 */
+  `,
+      enterable: true, // 允许鼠标进入tooltip
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
      }
    },
    legend: [
@@ -870,6 +895,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            type: 'solid'
          }
        },
+        axisLabel: {
+          formatter: function(value, index) {
+            // 只显示奇数索引的标签(从0开始计数)
+            return index % 2 === 0 ? value : '';
+          }
+        }
      }
    ],
    yAxis: [
@@ -913,12 +944,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
            colorStops: [
-              {offset: 0, color: 'rgba(141, 251, 116,1 )'}, // 顶部颜色
+              {offset: 0, color: '#18c877'}, // 顶部颜色
              // {offset: 1, color: 'rgba(70, 232, 116,1 )'}  // 底部颜色
            ]
          },
        },
-        barWidth: '40%'
+        barWidth: '30%'
      },
      {
        name: `${Year1}收费单待签`,
@@ -935,12 +966,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
            colorStops: [
-              {offset: 0, color: 'rgba(1, 255, 133, 1)'}, // 顶部颜色
+              {offset: 0, color: '#69c818'}, // 顶部颜色
              // {offset: 1, color: 'rgba(234, 216, 18, 1)'}  // 底部颜色
            ]
          },
        },
-        barWidth: '40%'
+        barWidth: '30%'
      },
      {
        name: `${Year1}合同待签`,
@@ -962,7 +993,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            ]
          },
        },
-        barWidth: '40%'
+        barWidth: '30%'
      },
      {
@@ -980,12 +1011,12 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
            colorStops: [
-              {offset: 0, color: 'rgba(109, 217, 255,1)'},
+              {offset: 0, color: '#2FA9FF'},
              // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
            ]
          },
        },
-        barWidth: '40%'
+        barWidth: '30%'
      },
      {
        name: `${Year2}收费单待签`,
@@ -1002,7 +1033,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
            colorStops: [
-              {offset: 0, color: 'rgba(47, 169, 254, 1)'},
+              {offset: 0, color: '#187CEC'},
              // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
              // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
@@ -1013,7 +1044,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            ]
          },
        },
-        barWidth: '40%'
+        barWidth: '30%'
      },
      {
        name: `${Year2}合同待签`,
@@ -1037,7 +1068,7 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
            ]
          },
        },
-        barWidth: '40%'
+        barWidth: '30%'
      },
    ]
  }
@@ -1179,11 +1210,12 @@ onUnmounted(() => {
      :deep(.el-select__placeholder) {
        font-family: PingFang SC, serif;
        font-weight: 500;
-        color: #13C1F4;
+        color: #fff;
-        text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
+        //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
-        background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
+        //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
+        background-color: rgb(33, 123, 188, .1); /* 背景色 */
        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent
+        //-webkit-text-fill-color: transparent
      }
      :deep(.el-tag--info) {
--- a/src/viewsPc/vip/rightPage.vue
View file @6a8890c
+++ b/src/viewsPc/vip/rightPage.vue
View file @6a8890c
--- a/src/viewsPc/vip/scrollingData.vue
View file @6a8890c
+++ b/src/viewsPc/vip/scrollingData.vue
View file @6a8890c
@@ -5,7 +5,7 @@
        <span/> {{ item }}
      </div>
      <!-- 复制一份数据实现无缝滚动 -->
-      <div v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item">
+      <div v-if="list.length > 1" v-for="(item, index) in list" :key="`copy-${index}`" class="scrolling-item">
        <span/> {{ item }}
      </div>
    </div>
@@ -51,22 +51,20 @@ const initScroll = () => {
  }
  // 重置位置到第一条数据
  offset.value = -props.speed-0.1;
-  scrollInterval2.value = setInterval(()=> {
-    // 设置定时器
+  scrollInterval.value = setInterval(() => {
-    scrollInterval.value = setInterval(() => {
+    if (!isPaused.value) {
-      if (!isPaused.value) {
+      offset.value -= props.speed;
-        offset.value -= props.speed;
+      // 当滚动到内容的一半时，重置位置实现无缝滚动
-        // 当滚动到内容的一半时，重置位置实现无缝滚动
+      if (Math.abs(offset.value) >= contentHeight.value / 2) {
-        if (Math.abs(offset.value) >= contentHeight.value / 2) {
+        offset.value += contentHeight.value / 2;
-          offset.value += contentHeight.value / 2;
-        }
-      }
-      if (offset.value>=(-props.speed)) {
-        console.log("1111111111111111111111111")
-        clearInterval(scrollInterval.value);
      }
-    }, 20);
+    }
-  },10000)
+    if (offset.value>=(-props.speed)) {
+      clearInterval(scrollInterval.value);
+      setTimeout(initScroll,10000)
+    }
+  }, 20);
 };
@@ -106,9 +104,6 @@ onUnmounted(() => {
  if (scrollInterval.value) {
    clearInterval(scrollInterval.value);
  }
-  if (scrollInterval2.value) {
-    clearInterval(scrollInterval2.value);
-  }
 });
 </script>